Visual Editing

See it. Click it. Change it.

Click any element on your site to jump straight to editing it in DatoCMS. Combine with draft mode and real-time updates for the ideal visual editing experience in a Headless CMS.

DatoCMS Content Link

Click-to-edit, straight from your live site

Drop <ContentLink /> into your layout. When editors visit in draft mode, overlays appear on every editable element. One click opens DatoCMS at the exact field, eliminating hunting through records and tabs.

Works on any hosting platform
No backend changes or plugin needed
Detects records, fields, and locales automatically
Alt/⌥ triggers a temporary overlay mode

DatoCMS Visual Mode

Preview and edit, side by side

The Web Previews plugin embeds your preview directly inside DatoCMS under a new "Visual Mode". Click an element in the preview and the edit panel jumps to that field. Edit that field and the preview updates as you go. Bidirectional. Real-time. That's all.

Full-screen visual editing mode
Multiple environments supported
Quick preview links in the record sidebar

No extra plugins needed

Visual Mode is now available on the same Web Previews plugin you all love so much. Install it or update it and you're good to go.

Install Web Previews →

No gatekeeping

Visual editing is included on every plan. Including Free.

Visual Editing is available to everyone.
Install it. Use it. Break it. And let us know how we can improve it.

Try the live demo Read the docs

How it works

Invisible metadata. Just enable stega encoding.

All you need to do is add 2 headers to your GraphQL requests, and add the ContentLink component to your layout.

The <ContentLink /> component scans for embedded metadata and renders edit overlays on the right DOM nodes. No manual mapping. Structured Text, blocks, linked records... all works out of the box.