We've rolled out big changes to how editors and content creators can interact with content in DatoCMS. Instead of navigating through forms and fields in the CMS interface, editors can now see their content exactly as it appears on the live site, click directly on any element to edit it, and watch changes appear instantly.​​​​

Visual Editing lets your content editors click directly on any element of your website and edit it in DatoCMS — no more hunting through record forms, switching tabs, or guessing which field maps to which headline. Available on every plan, including Free.

Visual Editing supports two workflows. Use either one, or both depending on which approach suits your content editors best.

Click-to-edit: Content Link on your website

This is the simplest setup. 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.

This also works entirely on your website, no DatoCMS plugin required. It's a great starting point that already provides significant value to editors.

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

We made major updates to the Web Preview plugin to give editors the ideal setup: preview on the left, edit panel on the right, click anything, edit immediately, see it update live.

When they click on content, the edit panel opens instantly in the same view with no tab switching required.

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.

Getting started

We're making it as easy as possible for you to get started with Visual Editing.

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 to see them in action first? Clone one of our starter kits — they come pre-configured with Draft Mode, Real-time Updates, Content Link, and Web Previews already wired together!