How Overlay works
A universal editing experience with adapter-based persistence. Here is the full loop — without the hand-waving.
- 01
Install the loader
Add a single script tag, install the npm package, or run the CLI. One line of setup per environment.
- 02
Activate the overlay
Visit your site with ?overlay=1 (or a keyboard chord). The overlay boots inside a Shadow DOM — no CSS bleed, no runtime interference for real users.
- 03
Click any element
Hover highlights. Click selects. Overlay captures a stable selector and detects the element's source — a JSX prop, a Blade partial, a CMS field, or unknown.
- 04
Describe the change
Natural language. 'Make this hero feel more premium.' 'Tighten spacing on mobile.' 'Replace this image.' Claude plans a list of structured edit operations.
- 05
Preview instantly
Runtime ops apply to the DOM in-browser. Before/after toggle. Screenshot diff. Everything reversible in one click.
- 06
Approve and persist
On approval, the right adapter writes to the right place: a Git PR, a CMS field update, or a declarative patch file. Every change is audited.
- 07
Roll back anytime
Versions are forward-only. A rollback produces an inverse change set — never a force-push, never a deleted commit.
The honest part
We don't pretend one parser magically understands every framework. When we can't map a DOM node back to source with high confidence, we tell you, and we save the change as a declarative patch your build step applies at runtime. That's how we stay framework-agnostic without lying about it.