What is Visual Editing by DatoCMS?

Visual Editing by DatoCMS is a feature that lets content editors click directly on any element of a live website to edit it in the CMS. Instead of hunting through record forms to find the right field, editors can simply click on the headline, image, or block they want to change. The system uses steganography—invisible Unicode characters appended to every string in GraphQL API responses—to encode each value's origin, so the frontend automatically knows exactly where every piece of content comes from. Combined with draft mode and real-time updates, making changes becomes a seamless, WYSIWYG experience.

Who it's for

• Content editors who want to stop playing detective with record forms and instead click directly on page elements to edit them
• Developers who need a dead-simple implementation that works with existing DatoCMS projects and doesn't require manually wiring up every piece of content to its source field
• Teams using Next.js, Astro, Svelte, or Vue who want to give their editors a visual editing experience without switching hosting providers or rebuilding their frontend

Key features

Click-to-edit with Content Link

Editors visit the website in draft mode, hover over content to see what's editable, and click to open DatoCMS in a new tab. This works entirely on the frontend with any hosting—Vercel, Netlify, Cloudflare, you name it. No more asking "yo where's that field, again?"

Side-by-side Visual Mode

The Web Previews plugin gets an upgrade: preview on the left, edit panel on the right. Click any piece of content and the edit panel opens right there. No tab switching, no context loss, instant live updates. The plugin also enables preview links in the CMS sidebar, bidirectional navigation between panels, and a full-screen Visual Editing mode.

Automatic metadata encoding

Steganography embeds each value's origin (record ID, field path, locale) directly into the GraphQL API responses. The `` component automatically scans the page for this metadata and renders edit overlays on the right DOM nodes—no manual wiring needed. It works with the entire content model out of the box: links to records, blocks, Structured Text, and modular content.

What stands out

"No more hunting through record forms to find the right field."

This isn't just a preview tool—it's a fundamental shift in how editors interact with headless CMS content. The steganography approach 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, the metadata comes along for the ride automatically, making setup minimal: just two headers added to existing GraphQL requests and one component in the layout.

Worth checking out if…

You're tired of editors asking "where's that field again?" and want a visual editing experience that works with your existing DatoCMS project, any hosting provider, and minimal developer effort. It's available on every plan (including Free) with SDKs for Next.js, Astro, Svelte, and Vue.