How Sanity Visual Editing works
Visual Editing runs on several layers. The Sanity client handles GROQ queries, Content Source Maps and stega encoding. Content Source Maps follow an open standard and are the foundation of click-to-edit. Stega encoding embeds Content Source Map data as invisible characters in string values. In preview mode, the site serves draft content with stega encoding turned on.
Click-to-edit runs on overlays from the @sanity/visual-editing package. The overlays also support manual data attributes for elements where stega encoding is not available. The Presentation Tool is a Sanity Studio plugin that renders the front end inside an iframe. The preview subscribes to the Live Content API for instant updates. Sanity describes each layer in its visual editing architecture overview.
Key features
Live preview shows draft content on the front end while editors make changes.
Click-to-edit takes an editor from the preview directly to the field in Sanity Studio.
Drag and drop lets editors rearrange content sections in the preview, and the Studio shows the change.
Document locations show where the content of a document appears across the site.
Visual Editing works with any modern front-end stack. Sanity publishes Visual Editing guides for the Next.js App Router, the Next.js Pages Router, React Router, Nuxt and Astro. A Next.js App Router site uses the VisualEditing component from next-sanity.
For the wider picture of the CMS, read what Sanity is and how it works. Editing in context is one of the editor features to compare when you choose a headless CMS for a marketing team. For help with a Sanity build, see Pagepro's Sanity development services.
How Pagepro uses Sanity Visual Editing
Pagepro builds Next.js and Sanity sites on Nexity, its delivery system for moving legacy web stacks to Next.js and Sanity on Vercel. The Sanity layer of Nexity includes Visual Editing, live preview and the Presentation Tool.
Sources
- Visual EditingSanity · sanity.io
- Visual editing (introduction)Sanity · sanity.io
- Introducing Visual EditingSanity · sanity.io
- Visual editing architecture overviewSanity · sanity.io
- Configuring the Presentation ToolSanity · sanity.io
- @sanity/visual-editing referenceSanity · reference.sanity.io