Visual editing for
your framework
Drop in an SDK, point Mantle at your running app, and edit content visually — the changes write back to your source code.
How it works
Three steps to visual editing
Install the SDK
Add @mantle/react to your Next.js app — or @mantle/sdk for any framework. One dependency, no build step changes.
$ npm install @mantle/reactConnect your project
Point Mantle at your dev server. It reads your component tree and maps editable regions automatically.
$ mantle connect http://localhost:3000Edit visually
Click any text, swap images, reorder sections. Changes write back to your source files via Git.
Capabilities
Everything you need to edit visually
A complete editing layer that works with your existing stack — not a replacement for it.
Visual Editor
Point-and-click editing layered on top of your actual running application. What you see is what ships.
AI Generation
Generate entire sections or modify existing ones with natural language. Built on Claude for precise, contextual output.
Site Import
Paste any URL and Mantle reconstructs it into editable components with full settings schemas. Bring existing sites in.
Section Reordering
Drag sections to rearrange your page layout. Add new sections from your element library or generate them with AI.
Inline Editing
Click on any text and start typing. Rich text support with formatting tools. Every edit updates the source.
GitHub-backed Content
Every content change is a Git commit. Full version history, branch workflows, and no proprietary lock-in.
Developer Experience
Your components, now editable
Wrap content with Mantle components. They render normally in production and become editable when connected to the Mantle editor.
import { MantleProvider, MantleText, MantleImage } from '@mantle/react'
export default function HomePage() {
return (
<MantleProvider>
<h1>
<MantleText id="hero-title">
Welcome to our site
</MantleText>
</h1>
<MantleImage
id="hero-image"
src="/hero.jpg"
alt="Hero image"
/>
</MantleProvider>
)
}