How it works
Your site, with the words made editable.
Refino is added to a website that already exists. Here is what that means for you as the owner, and then, for anyone who wants it, what is actually happening underneath.
For owners
What you see
Turn on editing
You open your own website, the live one, and sign in as its owner. A small bar appears at the top. Every piece of text you are allowed to change gets a faint outline.
Click and type
Click a headline and it becomes a place you can type. The font, the size, the width and the line breaks are all the real ones, because you are editing the real page. Press Enter when you are done, or Escape to put it back.
Save
Save sends only what changed. Your site then publishes the change exactly the way it publishes everything else. When you exit editing, the outlines disappear and the site is just your site again.
There is no separate editing screen, no preview pane and no form with a box for each sentence. The page is the editor.
What you can change is plain text: headlines, paragraphs, labels, buttons. What you cannot change is everything else: layout, images, colours, new sections. Those are jobs for your coding agent, and keeping them there is what keeps Refino simple and safe.
Getting it onto your site
Set up once, with help from the agent that built the site.
Adding Refino to an existing site is a one-time change to its code. You do not have to make that change yourself.
Refino comes with a setup tool that reads your site’s code, finds the text a visitor can see, and writes a short set of instructions specific to your site. You hand those instructions to your coding agent, whichever one you use, and it makes the change.
The tool then checks the result. If the agent missed something or did it differently, the check says exactly what, and the agent tries again. When the check passes, your site is ready to edit.
Nothing about your site is rebuilt. Your pages, your design and your hosting are untouched. What changes is that the text visitors read is now kept in one small file, and the parts of your site that show that text now read from it.
Today this works for sites built with React, which includes Next.js and Vite projects, with code kept on GitHub. That is the stack most AI tools produce. Other setups are planned.
For the curious, and for developers
What is happening underneath
You do not need any of this to use Refino. It is here because a product that touches your code should be willing to explain itself.
One file holds the words
All the editable text on the site lives in a single file in the site’s own repository, conventionally content/copy.json. It is a flat list of stable IDs and their text:
{
"home.hero.title": "Architecture for people who plan to stay.",
"home.hero.cta": "See our work"
}That file is the only source of truth. The visual editor reads and writes it. A developer edits it in their editor. A coding agent edits it when it builds a new section. Everyone changes the same file, so nothing is ever out of sync and there is no second copy of your content anywhere.
The page reads from that file
Each piece of editable text on the page is a small component that knows its ID. In normal use it renders exactly the element it always would, with no editing code attached. When the owner is signed in and editing, the same element becomes editable in place, in its own CSS.
<EditableText id="home.hero.title" as="h1" className="hero__title" />Saving is a commit
Save sends only the IDs that changed, along with the revision of the file they were based on, to an authenticated endpoint. The endpoint applies the changes to the file and commits it to the repository. A one-word edit is a one-line diff, with the site’s normal history and its normal deploy.
If the file changed in the meantime, say because your agent committed something while you were typing, the save is refused as a conflict instead of silently overwriting the newer version. You reload, see the current text, and make your edit again. Stale edits never win.
What the browser cannot do
- It cannot choose which file, repository or branch to write. Those are fixed on the server.
- It cannot add, remove or rename an ID. Adding text to the site is a code change, made by a person or an agent.
- It never sees a repository credential. Authentication is server-side, and secrets stay there.
- It cannot save rich text, HTML or scripts. Values are plain strings, and unknown IDs are rejected.
What it is not
There is no database, no content store and no sync job. There is no page builder and no rich-text editor. Removing Refino from a site leaves the text file and the code exactly where they were. If you want the packages, the file format and the setup flow in full, the documentation is where that lives.
Early access
Refino is not open to everyone yet.
We are working with a small number of site owners first. If you built a site with AI and want to be able to change its words yourself, tell us about it. We read every message and reply ourselves.