Visual Editing

Visual Editing lets content editors click directly on any element of your website to edit it in DatoCMS, without hunting through forms and fields. Combined with draft content and real-time updates, editors see changes reflected instantly on the page as they type.

Click-to-edit on the website

Editors can visit the website in draft mode and interact with content right there. Hovering over any editable element (a title, body text, an image alt text) reveals a subtle overlay. Clicking it opens DatoCMS directly at the exact field that controls that piece of content:

Side-by-side editing inside DatoCMS

The Web Previews plugin brings a live preview of your website directly into the DatoCMS interface. A "Visual" tab provides a full-screen, side-by-side editing view where editors click on any element in the preview and the corresponding record and field open right next to it.

The connection works in both directions: browsing records in DatoCMS navigates the preview to the corresponding page, and clicking around in the preview opens the relevant record in the CMS.

Real-time feedback

When combined with Real-time Updates, editors see their changes reflected on the preview as they type. There's no need to reload: the preview updates live, giving editors immediate confidence that their changes look right in context.

Getting started

Visual Editing is available on every DatoCMS plan (including Free) and works in any environment. The easiest way to get started is from one of our tech starter kits, which come pre-configured with everything wired together. For a detailed walkthrough of how it works and how to set it up, see the Visual Editing guide.