Docs.
Everything on this page is also in the README of the open-source client, written so a Claude Code or Lovable prompt can use it directly.
Install
Add this before </body> on every page:
<script src="https://edit.thebrainer.co/edit.js" data-site="YOUR_SITE_KEY" defer></script>
Sign in at thebrainer.co/app with your email, register the site's hostname, and you get the key and the install tag. Add an editor by email and they receive an owner link like https://www.example.com/?admin=8f2c4b…. It is stored in their browser on first open and removed from the address bar. Up to five editors per site, each link revocable on its own from the dashboard.
For Claude Code, Lovable and Bolt
Paste this into your prompt when the site is done:
Make this site editable by my client. Add<script src="https://edit.thebrainer.co/edit.js" data-site="SITE_KEY" defer></script>before</body>on every page. Do not change any other markup. If a page has a legal or terms section, wrap it in<div data-edit-ignore>. Loadassets/edit.csson every page if it exists (create it empty if it does not).
What the owner can do
| Owner says or does | What happens |
|---|---|
| "change the headline to Family plumbers in Leeds" | The text block changes on the page. Save writes it into the HTML. |
| "make the header photo taller" | The region gets a min-height; photos inside grow with it. Save appends a CSS rule. |
| "slow down the slideshow", "bigger text", "hide the newsletter box", "make the button green" | Style changes from a fixed whitelist of properties. |
| "change a photo", or the paper clip | Tap the photo, pick a file. Uploaded, converted to WebP, src replaced on Save. |
| Tap to edit | Tap any text on the page and type. Same save path. |
| Suggestions | Hero too short, slideshow too fast, text under 15 px on phones, menu links too small to tap. One at a time, yes or skip. |
| Undo | Reverts the whole last request. |
| Save | A new version of the site. Every earlier version is kept. |
Optional markup
None is needed. The script finds text, images and layout regions by walking the page. Two attributes exist for stable names and for keeping things out of reach:
<h1 data-edit="hero.title">Family plumbers in Leeds</h1> <img data-edit-img="hero.image" src="/img/van.jpg" alt="Our van"> <div data-edit-ignore>…legal text the owner must not touch…</div>
Script attributes
| Attribute | Default | Meaning |
|---|---|---|
data-site | required | Site key |
data-api | the script's own origin | Backend base URL, for self-hosting |
data-brand | none | Your studio name in the panel header |
data-color, data-paper | green, paper | Panel colours |
data-lang | page lang | Voice input and reply language |
data-admin-param | admin | Query parameter of the owner link |
How saving works
Default, any host: you register the site address and get the line. Every save is stored by us and applied on the live page the moment it loads, for every visitor: text by element, styles as one rule, photos by swapping the source. Nothing on your host changes, the site works on Webflow, Framer, Netlify, Vercel, Lovable, anywhere. Saves are versioned and the newest change per element wins.
Optional, in a git repository: connect the repository on the site card and Save hardlink-copies the current version, rewrites only the changed files, and flips the pointer. Old versions stay intact.
Git details (Netlify, Vercel, Cloudflare Pages, GitHub Pages, Lovable's GitHub sync): for GitHub a fine-grained token with Contents read and write on that one repository. Every save is a commit "Edit by The Brainer: …" and your normal deploy runs. Text is replaced in the page file, or found in src/ for Vite and Lovable projects; uploads go under assets/uploads/; style rules are appended to assets/edit.css.
API
Seven endpoints under one base URL: session, edits, edit, chat, ev, upload, save. Implement them and the same script runs against your own backend. Full contract with request and response shapes in the README.
| Endpoint | Purpose |
|---|---|
GET /session | Is this owner token good for this site |
POST /edit | Instruction plus the page's own description in, a validated plan out |
POST /save | Persist a change record as a new version |
POST /upload | Image upload, returns the new path |
POST /chat | Questions that are not edits (optional) |
POST /ev | Usage events (optional) |
Limits
- Text edits work on elements with three or fewer children. Rich inline markup inside a block is flattened.
- Style edits are appended as
!importantrules. Your source CSS is never touched. - New pages, new sections and layout changes are out of scope.
- One page at a time: the owner edits the page they are looking at.