# 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:

(Video content)

Click-to-edit overlays

## Side-by-side editing inside DatoCMS

The [Web Previews plugin](https://www.datocms.com/marketplace/plugins/i/datocms-plugin-web-previews.md) 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.

(Video content)

Side-by-side editing

## Real-time feedback

When combined with [Real-time Updates](https://www.datocms.com/docs/real-time-updates-api.md), 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](https://www.datocms.com/marketplace/starters.md), 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](https://www.datocms.com/docs/visual-editing.md).

## Related content in "General concepts"

- [What is DatoCMS?](https://www.datocms.com/docs/general-concepts.md)
- [Workspaces: Organizations and Personal Accounts](https://www.datocms.com/docs/general-concepts/organizations-and-accounts.md)
- [Project collaborators, roles and permissions](https://www.datocms.com/docs/general-concepts/roles-and-permission-system.md)
- [The content schema](https://www.datocms.com/docs/general-concepts/data-modelling.md)
- [Organizing content](https://www.datocms.com/docs/general-concepts/navigation-bar.md)
- [Record versioning](https://www.datocms.com/docs/general-concepts/versioning.md)
- [Draft/published system](https://www.datocms.com/docs/general-concepts/draft-published.md)
- [Scheduled publishing](https://www.datocms.com/docs/general-concepts/scheduled-publishing-unpublishing.md)
- [Media Area](https://www.datocms.com/docs/general-concepts/media-area.md)
- [Localization](https://www.datocms.com/docs/general-concepts/localization.md)
- [Visual Editing](https://www.datocms.com/docs/general-concepts/visual-editing.md)
- [Record-level collaboration: Presence & locking](https://www.datocms.com/docs/general-concepts/collaboration-features.md)
- [Workflows](https://www.datocms.com/docs/general-concepts/workflows.md)
- [Webhooks](https://www.datocms.com/docs/general-concepts/webhooks.md)
- [Plugins](https://www.datocms.com/docs/general-concepts/plugins.md)
- [DatoCMS Site Search](https://www.datocms.com/docs/general-concepts/site-search.md)
- [Project Templates](https://www.datocms.com/docs/general-concepts/project-starters-and-templates.md)
- [How your website and DatoCMS work together](https://www.datocms.com/docs/general-concepts/how-your-website-and-datocms-work-together.md)
- [How to deploy](https://www.datocms.com/docs/general-concepts/deployment.md)
- [Primary and sandbox environments](https://www.datocms.com/docs/general-concepts/primary-and-sandbox-environments.md)
- [Project usages](https://www.datocms.com/docs/general-concepts/project-account-usages.md)
- [Audit Logs](https://www.datocms.com/docs/general-concepts/audit-logs.md)