Capa
Contact salesGet started

ProductsFor your team

Visual Editing

Click any word. Change it right there.

Capa puts your real site beside the editor. Click a heading and the form jumps to its field. Focus a field and its spot on the page lights up. Save, and the draft re-renders in place, ready to publish.

Start freeSet it up
Capa · Home page · Preview

Northbound Coffee

Fresh harvest, roasted this week

Washed Ethiopian, bright and sweet, roasted in small batches.

Shop the roast
Your page is live
Setup

Four steps, once. Then editors just click.

Your developer does this once: tag what an editor may click, start the overlay in edit mode, accept the preview link, and point Capa at your site.

  1. 01

    Tag what an editor can click

    capaAttrs tags a field's element. Only entries read in edit mode carry the mark, so a visitor's page ships no tags at all.

    page.tsxapp/articles/[id]/page.tsx
    import { capaAttrs } from "@capacms/sdk/next";

<h1 {...capaAttrs(article, "title")}>{article.fields.title}</h1>
  2. 02

    Start the overlay in edit mode

    Render it from your root layout only in edit mode, so a visitor never downloads it. It listens only to your Capa admin.

    layout.tsxapp/layout.tsx
    import { CapaOverlay } from "@capacms/sdk/nextjs/overlay";

{edit ? <CapaOverlay adminOrigins={["https://app.capacms.com"]} /> : null}
  3. 03

    Accept the preview link

    The middleware verifies the editor's token with Capa, removes any forged header, and marks edit-mode responses private.

    middleware.tsmiddleware.ts
    import { NextResponse } from "next/server";
import { capaMiddleware } from "@capacms/sdk/nextjs";

export const middleware = capaMiddleware({ NextResponse });
  4. 04

    Point Capa at your site

    Set your site's preview URL in Capa. From then on, every draft shows on the real page it belongs to.

Safe for production

Editing on the page, nothing on the live site.

  • Visitors

    Ships nothing to visitors

    No data-capa- attributes and no overlay script on a visitor's page. Edit mode exists only for a verified editor.

  • Framing

    Only your admin can frame it

    One header lets the Capa admin frame your site and nothing else. The overlay ignores messages from any other origin.

  • Drafts

    Drafts stay private

    Edit-mode responses are marked private and no-store, so a draft never lands in a shared cache.

  • Follow

    The form follows the page

    Scroll the site and the editor scrolls the form to the field in the middle of the screen.

  • Published view

    Click the live version too

    Switch the editor to Published and your live page is just as clickable, without turning on draft mode.

  • Frameworks

    Not only Next.js

    The overlay is plain DOM with no framework imports, so it starts from any framework.

Why it matters

Edit what you see, not what you imagine.

A form on its ownCapa Visual Editing
Finding the fieldGuess which of forty fields is the one on the pageClick the words on the page
Seeing the changeSave, open a preview tab, refreshSave, and the draft re-renders in place
Long headlinesFind out on the live siteSee the wrap on the real layout before you publish
Client handoverWrite a guide to your field namesShow them the page and say click it
Questions

Before you wire it up.

Can my clients use it?

Yes. Give them a Content role and they can edit and publish on their own pages, without touching your models.

Does it slow my site down?

No. Visitors never download the overlay and their pages carry no editing tags. Edit mode only exists for a request with a verified token from your Capa admin.

Do I need Next.js?

No. Next.js gets the most help, with middleware and a client component ready to use. Anywhere else, call startOverlay from @capacms/sdk/overlay in your own effect.

Does it work with GraphQL reads?

Yes. An entry read in edit mode is marked whether it came from REST or GraphQL, as long as the query selects its id and model.

Works with

Hand over a site they edit by clicking.

Three pieces of code, one preview URL, and every page becomes the editor.

Start freeSet it up