Edit-in-place CMS for Next.js
Make every text node, image, link, and section editable — without leaving the page.
Focus:CMS is a drop-in overlay for Next.js themes. Wire it into three components and your editors get a Squarespace-style in-place editor. No separate dashboard. No rebuild. No vendor lock-in.
Why Focus:CMS
Zero visual diff
Edit in place
Click any text, image, link, or section on the live page. The editor wraps existing DOM with data-focus-cms-* markers post-hydration — display mode renders byte-for-byte identical HTML.
One Save, all surfaces
Multi-key, fan-out save
Page bodies, nav menus, site meta, and contact info all live in their own Supabase rows. Edits accumulate in a per-key store; the toolbar's Save fans them out to the right adapters.
Bring your own theme
Theme-agnostic
Themes opt in by following a seven-rule contract. Works for fully-structured React themes, raw HTML pages ported from Squarespace, and everything in between.
Ready to wire it in?
The theme guide walks through the seven-rule integration contract, with copy-pasteable examples for the common cases. Migrating an existing site? Pick your stack and follow the recipe.