Content lives in your code, not a database

Visual editing for
your framework

Create a code-owned site, edit it visually, and publish with GitHub and Vercel connected. Mantle handles the setup so your team can keep shipping in code.

Get Started Read the docs

your-app.localhost:3000

How it works

Three steps to visual editing

Create a project

Start from scratch today with a generated Next.js or React codebase. Website import is in development and will return once it is reliable end to end.

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

Review changes in the editor, then publish when you are ready. Mantle keeps GitHub and Vercel connected so the path from edit to deployment stays in your codebase.

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 running application so you can review real components before you publish.

AI Generation

Generate entire sections or modify existing ones with natural language. Built on Claude for precise, contextual output.

Site Import

Coming soon: paste a URL and Mantle will help rebuild it into editable components. We are keeping this behind the curtain until the import flow is reliable.

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 stays a normal Next.js app with the editing layer kept out of the live experience.

Zero runtime overhead in production — SDK only activates in edit mode

Git-native — edits become commits in your repo

page.tsx

layout.tsx

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>
  )
}

Ready to edit visually?

Set up in under five minutes. Start building for free.

Get Started

Visual editing for your framework