Visual Editing provides content editors with the ability to click directly on any element of their website to edit it within DatoCMS. This feature bridges the gap between headless CMS functionality and traditional WYSIWYG editing, allowing editors to work with pages and posts rather than navigating complex field structures.

The product supports two primary workflows: Click-to-edit and Visual Mode. Click-to-edit allows editors to visit websites in draft mode, hover over content to see what's editable, and click to open DatoCMS in a new tab. Visual Mode provides side-by-side editing directly within the CMS, with preview on the left and edit panel on the right. Both workflows eliminate the need for tab switching and context loss while providing instant live updates.

The technology uses steganography through invisible Unicode characters appended to every string in 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 eliminates the need for developers to manually wire up content to source fields, as metadata automatically travels with draft content when Content Link is enabled.

Benefits include eliminating the need for editors to hunt through record forms, providing seamless editing experiences, and supporting complex content structures like nested modular blocks and localized structured text. The system works with various hosting platforms including Vercel, Netlify, and Cloudflare, and supports bidirectional navigation between preview and edit panels.

The product targets content editors working with headless CMS systems, developers implementing visual editing features, and teams using frameworks like Next.js, Astro, Svelte, and Vue. It integrates with existing DatoCMS workflows and requires minimal configuration, especially for users already familiar with the Web Previews plugin.