Visual Editing
Visual Editing lets content creators see their changes live and edit content directly from the webpage. Think of it as a bridge between your Sanity Studio and your website. Your content team can view drafts, click and drag elements to edit them, and see changes in real-time.
Visual Editing with Next.js App Router
Set up visual editing between Sanity Studio and a Next.js App Router frontend, including the Sanity client, Draft Mode, Visual Editing, and Live Content.
Visual Editing with Next.js Pages Router
Get started with Sanity Visual Editing in a new or existing Next.js application using the Pages Router.
Visual Editing with React Router/Remix
Get started with Sanity Visual Editing in a new or existing React Router (Remix) application.
Visual Editing with Nuxt
Get started with Sanity Visual Editing in a new or existing Nuxt application.
Visual Editing with Astro
Configure Sanity’s Presentation Tool, draft mode, and visual editing overlays to work with an Astro 6 server-rendered frontend.
Configuring the Presentation Tool
Configure the Presentation Tool: previewUrl, document location resolvers, allowed origins, components, and navigation for multi-environment setups.
Visual editing architecture overview
Understand how Sanity's visual editing works across six architectural layers: content source maps, stega encoding, overlays, live updates, preview mode, and the Presentation Tool.
Content Source Maps
Content source maps allow tools to annotate content with metadata and use it to connect tools to content.