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>

Get a site key by registering the site's hostname at thebrainer.co (one site free for life). The response includes the key and an owner link like https://www.example.com/?admin=8f2c4b…. Send it to the owner the way you would send a password. The token is stored in their browser on first open and removed from the address bar. A new link can be issued at any time and the old one stops working.

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>. Load assets/edit.css on 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

Hosted with us: Save hardlink-copies the current version, rewrites only the changed files, and flips the pointer. Old versions stay intact.

Hosted elsewhere: register a write-back target. git: we commit the change to the site's repository (text replaced in the HTML file, uploads under assets/uploads/, style rules appended to assets/edit.css) and your deploy runs. webhook: we POST the change record to your URL. Write-back opens with the site keys.

API

Six endpoints under one base URL. 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 !important rules. 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.