In-place visual editing · React + Next.js · MIT

Click anything.
Edit anything.
Ship it.

Focus:CMS turns your existing React app into a live CMS. Drop in a provider, wrap your text and images, and your team gets a click-to-edit overlay with autosave, audit history, and instant publish. No new database, no theme lock-in, no migration.

Read the README →See it in 30 seconds
your-app.com

Live editing overlay

Your real homepage —
now editable.

Hover to highlight. Click to edit. Save to Supabase, GitHub JSON, Postgres, or any storage adapter you write.

Edit mode

Why teams ship with it

Less CMS.
More site.

01

Zero schema

Your JSX is the schema. Wrap any text or image with EditableText / EditableImage and you're done. No content modeling, no admin UI to maintain.

02

Bring your own storage

Built-in adapters for Supabase, in-memory, and GitHub JSON. Write a 30-line adapter for Postgres, Sanity, Notion, S3 — whatever your team already runs.

03

Real-time, collaborative

Multiple editors get presence indicators, per-editor draft trails, JSON-patch sync, and a publish dialog that lands a single atomic commit.

04

No theme lock-in

It's a React provider, not a runtime. Your code stays in your repo, your design system stays yours, your build stays your build.

05

Audit & rollback

Every edit is patch-tracked with author + timestamp. Revert any change to any prior point with one click. Full history in your database.

06

Static-export friendly

Built for the modern static stack. Works with Next.js export, Astro, Remix, Vite. Editor mode loads only when an editor is signed in.

Three steps

Wrap it.
Wire it.
Edit live.

Install one package, add a provider, and replace your headings, images, and blocks with their Editable* counterparts. The next time an authorized editor visits the site, they get a full visual editing surface — without any of your code being conditional on environment.

MIT licensed·Tiny runtime·Works in static exports
// 1. Install
$ npm install focus-cms

// 2. Wrap your app
<FocusCMSProvider
  adapter={supabaseAdapter({ client, siteSlug: "acme" })}
  isEditor={() => user?.role === "editor"}
>
  <App />
</FocusCMSProvider>

// 3. Make anything editable
<EditableText path="hero.heading">
  Enhance Your Natural Beauty
</EditableText>

<EditableImage
  path="hero.image"
  src={block.image}
  alt=""
/>

Plays well with

Your stack, your way.

Next.js 14
Astro
Remix
Vite + React
Supabase
Postgres
GitHub JSON
S3 / R2

Pricing

Open source. Forever.

Self-hosted
$0

MIT-licensed. Install, deploy, and customize as you wish.

  • ✓All adapters (Supabase, GitHub JSON, in-memory)
  • ✓Unlimited editors, unlimited sites
  • ✓Full audit history + rollback
  • ✓Community support
View on GitHub
We build it for you
Managed by Portland Co.
Let's talk

We design your theme, wire the editor, host on Cloudflare, and hand over a turnkey site your team can run.

  • ✓Custom design + theme implementation
  • ✓Schema design + Supabase setup
  • ✓CI/CD, hosting, and observability
  • ✓Editor training + ongoing support
Talk to us →

Stop migrating to a CMS.
Make your site one.

Focus:CMS lives in your codebase, on your hosting, in your design system. The only thing it adds is a click-to-edit overlay for the people who keep your site fresh.

Start with the README →