copy-ink

Every site I hand to a client ends up in the same place. They want to change a headline, they cannot, so they message me and I edit a string in a component. That is a bad use of both our time.

The usual answer is a headless CMS, but for a five page brochure site it is a lot of machinery. You are now running a database and a second application, paying for hosting on both, keeping two deploys in sync, and teaching someone a content model that only exists because the CMS needed one. The content was fine sitting in the repo. The only thing missing was a way for a non developer to reach it.

copy-ink keeps the content in the repo as YAML and puts the editor on the live site instead. You sign in with GitHub, click a piece of text, type, and publish. Publishing writes a commit through a GitHub App scoped to that one repository, so the client never gets repo access and there is no separate admin app to deploy.

Reading it looks like this:

<h1><Copy field="heroTitle" /></h1>

In production that renders the string and nothing else. No wrapper element, no class, no data attribute. The editor bundle is only sent to someone who has actually signed in, so a visitor downloads none of it and pages stay statically rendered.

The content files mirror your App Router segments, so content/about/_index.yml is the copy for /about and scope resolution needs no configuration. Collections cover repeating content like blog posts or case studies, and there is a CLI that validates naming, checks locale parity, generates types from your JSX, and finds orphaned images.

Published on npm as copy-ink, with documentation and a CLI. It needs Next.js 15 or later, the App Router, and React 19.

This site runs on it. Every page you are reading, including this sentence, is a YAML file in the repo that I can edit in the browser, and the projects list is a copy-ink collection. Building the site on it also turned up half a dozen gaps in the library that I would not have found from tests, which is most of the reason I did it that way.