Visual Editing by DatoCMS

Key Features

• •Click-to-edit with Content Link: Editors hover over any website element in draft mode and click to open the exact CMS field in a new tab. No manual wiring needed thanks to steganography encoding.
• •Visual Mode side-by-side editing in Web Previews plugin: A split view with live preview on the left and edit panel on the right. Supports bidirectional navigation, full-screen mode, and instant live updates.
• •Steganography metadata encoding: Invisible Unicode characters appended to GraphQL API responses encode each value's origin (record ID, field path, locale), enabling automatic mapping without manual configuration.
• •Framework SDKs and library: Dedicated SDKs for React/Next.js, Astro, Svelte/SvelteKit, and Vue/Nuxt include <ContentLink /> components. A framework-agnostic library (@datocms/content-link) supports any frontend.
• •Draft mode and real-time updates: Works with existing draft mode to display unpublished content. Changes made via Visual Editing appear live instantly, maintaining context.
• •Available on every plan including Free: No upgrade or feature gate. All plans include the full Visual Editing capability, from Click-to-edit to side-by-side mode.
• •Works with complex content models: Supports nested modular blocks, localized Structured Text, links to records, and other field types out of the box with optional data attributes for complex regions.

Use Cases

• •A content editor needs to update a headline on a landing page. Instead of searching through record forms, they click the headline on the website in draft mode, edit the text in the CMS, and see the change instantly.
• •An editor manages a multilingual site. They click on a translated element in the page preview, and the side-by-side panel opens the correct field for that locale, enabling fast localization updates without switching contexts.
• •A developer sets up visual editing for a client's Next.js site. They add two headers to GraphQL requests, drop the <ContentLink /> component into the layout, and optionally install the Web Previews plugin. The whole process takes minutes.
• •A large enterprise with 250+ editors (like Polestar) uses side-by-side editing to reduce support inquiries. Editors can directly click and modify content, eliminating the need to ask developers for field locations.
• •A marketing team creates a new landing page with modular blocks. Using the full-screen Visual Editing mode, they drag and rearrange blocks, update copy, and preview the layout in real time, accelerating page publishing.

Who is this for?

Web developers using headless CMS frameworks like Next.js, Astro, Svelte, or Vue who want to implement visual editing with minimal code. Content editors and digital marketers who need to make frequent website updates without technical assistance. Enterprise teams managing large-scale sites with multiple editors requiring efficient workflows. Agencies building client websites that need intuitive editing interfaces for non-technical users.