Visual editing for
your framework
Create your site, edit visually, deploy to your domain — Mantle generates the code and handles the infrastructure.
How it works
Three steps to visual editing
Create a project
Start from scratch or import an existing website. Mantle generates a fully editable Next.js or React codebase for you.
Edit visually
Click any text, swap images, reorder sections. AI can generate entire pages or modify existing content with natural language.
Publish to your domain
Every edit is a Git commit. Deploy to Vercel with one click — your code, your repo, your domain.
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
Mantle generates clean React code with editing attributes baked in. In production, it's just a normal Next.js app — zero overhead.
export default function HeroSection() {
return (
<section
data-acms-element="hero"
>
<h1 data-acms-field="title">
Welcome to our site
</h1>
<img data-acms-field="image"
src="/hero.jpg" />
</section>
)
}