Introducing Visual Editing. Click it. Change it.

TL;DR

• Visual Editing lets content editors click directly on any element of your website to edit it in DatoCMS.

• Combined with draft mode and real-time updates, making changes is a breeze. No more hunting through record forms to find the right field.

• Available on every plan (including Free!), with SDKs for Next.js, Astro, Svelte, and Vue.

• The best part? Side-by-side editing is an upgrade to the existing Web Previews plugin, so there's minimal config required from your side to enable it for your editors.

👋 Hello, Visual Editing

Your editors don't think in models and fields — they think in pages and posts. And yet every time they need to change a headline, they're playing detective: opening tabs, scrolling through record forms, deciphering which "SEO title override" lives inside which modular block. It's a bad game and nobody's winning.

What if they could just… click the thing on the page and edit it?

Visual Editing supports two workflows. Use either one, or both. Editors pick whichever fits the moment:

Click-to-edit: Content Link on your website

This is the simplest setup (especially if you've been using Vercel's integration with Headless CMS in the past). Editors visit your website in draft mode, hover over content to see what's editable, and click to open DatoCMS in a new tab. It works entirely on your frontend, and with any hosting: Vercel, Netlify, Cloudflare, you name it.

This alone is already a massive improvement. Suddenly, "yo where's that field, again?" becomes redundant.

Visual Mode: Side-by-side editing in the CMS

So. We took the Web Previews plugin, which is loved by so many of you, and gave it some Rare Candy. The result is the workflow editors have been asking for since headless CMSes became a thing: preview on the left, edit panel on the right. Click on any piece of content, the edit panel opens right there. No tab switching, no context loss, instant live updates.

This plugin also enables you to have preview links in the CMS sidebar, have bidirectional navigation (scroll either panel, the other panel will keep up with context), AND give you full-screen Visual Editing mode. 🤯

Want to see it in action before touching any code? Head over to try.datocms.com. No registration, no login. You'll land in a fully set up project where you can experiment with Visual Editing right away.

How it all works

Okidoki, let's dive into the fun bits of what's behind the scenes.

The key trick is steganography: invisible Unicode characters appended to every string in your GraphQL API responses. These characters encode each value's origin (record ID, field path, locale) so the frontend knows exactly where every piece of text comes from.

This means developers don't have to manually wire up every piece of content to its source field (which would be tedious at best, and a maintenance nightmare at worst). Instead, when you fetch draft content with Content Link enabled, the metadata just comes along for the ride. The <ContentLink /> component scans the page for it and renders edit overlays on the right DOM nodes automatically.

Getting started

The setup is minimal, and breaks down into three steps:

1. Enable stega encoding by adding two headers to your existing GraphQL requests when fetching draft content:

   • X-Visual-Editing: v1

   • X-Base-Editing-Url: https://<YOUR-PROJECT-NAME>.admin.datocms.com

2. Add the <ContentLink /> component to your layout. It automatically scans the page for embedded metadata and renders edit overlays on the right DOM nodes — no manual wiring needed.

3. Optionally, install and configure the Web Previews plugin to unlock side-by-side editing directly in the CMS.

That's it for the basics. It works with your whole content model out of the box: links to records, blocks, Structured Text, modular content. Some complex field types may need a couple of data attributes to help Content Link distinguish between editable regions, but it's minimal work.

Docs, Starters, SDKs & Integration Guides

We have dedicated SDKs and in-depth integration guides for React/Next.js, Astro, Svelte/SvelteKit, and Vue/Nuxt. Each provides its own <ContentLink /> component (or equivalent) that handles detection, overlay rendering, and keyboard shortcuts. Drop it into your layout, and you're done.

Want a head start? Clone one of our starter kits — they come pre-configured with Draft Mode, Real-time Updates, Content Link, and Web Previews already wired together!

Using a framework we don't cover yet? All our SDKs are built on @datocms/content-link, a framework-agnostic library you can integrate with directly.

Visual Editing is available on every plan. Including Free. No upgrade, no feature gate, no catch.

Now here's what we want from you: break it. Throw your gnarliest component architecture at it. Nested modular blocks three levels deep? Localized Structured Text inside a tabbed layout? We want to see it all. The weirder your setup, the more useful your feedback.

Jump in at try.datocms.com, and tell us how it went on the community forum. We're listening!