> For AI agents: the complete Sanity documentation index is available at [https://www.sanity.io/docs/llms.txt](https://www.sanity.io/docs/llms.txt).

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



#### Get started

[Visual Editing with Next.js App Router](https://www.sanity.io/docs/visual-editing/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](https://www.sanity.io/docs/visual-editing/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](https://www.sanity.io/docs/visual-editing/visual-editing-with-react-router)
Get started with Sanity Visual Editing in a new or existing React Router (Remix) application.

[Visual Editing with Nuxt](https://www.sanity.io/docs/visual-editing/visual-editing-with-nuxt)
Get started with Sanity Visual Editing in a new or existing Nuxt application. 

[Visual Editing with Astro](https://www.sanity.io/docs/visual-editing/astro-visual-editing)
Configure Sanity’s Presentation Tool, draft mode, and visual editing overlays to work with an Astro 7 server-rendered frontend.

#### Core concepts

[Configuring the Presentation Tool](https://www.sanity.io/docs/visual-editing/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](https://www.sanity.io/docs/visual-editing/visual-editing-architecture)
Understand how Sanity's visual editing works across seven architectural layers: Content Source Maps, stega encoding, overlays, live updates, preview mode, and the Presentation Tool.

[Content Source Maps](https://www.sanity.io/docs/visual-editing/content-source-maps)
Content source maps allow tools to annotate content with metadata and use it to connect tools to content.

#### Dive deeper

[Build a complete visual editing integration](https://www.sanity.io/docs/visual-editing/build-a-visual-editing-integration)
Build a complete framework-agnostic visual editing integration step-by-step with Vite and a Node.js HTTP server.

[Presentation Resolver API](https://www.sanity.io/docs/visual-editing/presentation-resolver-api)
Programmatically generate shortcuts from document forms to relevant routes in the Presentation Tool