Visual editing

Framework quickstarts, a framework-agnostic conceptual series, and task-focused guides for specific features.

Visual editing bridges Sanity Studio and your frontend. Editors see drafts render on the live site or a preview environment, click any element to jump to the right field, and watch content update as they type. It works with any modern frontend stack.

Visual editing streamlines content workflows across three capabilities:

• Live preview: see draft content render on your frontend as editors make changes.
• Click-to-edit: jump directly from the preview to the field being edited in the Studio.
• Drag-and-drop page building: rearrange content sections directly in the preview, with updates reflected in the Studio.

Most teams should start here. The framework-specific guides give you a working visual editing setup in minutes.

• Next.js App Router
• Next.js Pages Router
• Remix / React Router
• Astro
• SvelteKit
• Nuxt
• React Native

If you're using a framework without official support, building a custom integration, or want to understand how visual editing works end-to-end, follow the framework-agnostic series below. All examples use plain TypeScript, standard Web APIs, and minimal libraries.

• Visual editing architecture overview: six-layer mental model of how everything fits together.
• Client setup for visual editing: configure the Sanity client with stega, content source maps, perspectives, and token handling.
• Implementing preview mode: build secure preview endpoints from scratch.
• Overlays and click-to-edit: enable overlays, understand detection methods, integrate your router.
• Real-time content updates: progressive enhancement with the core loader and Live Content API.
• Configuring the Presentation Tool: set up the Studio plugin that hosts the preview.

• Build a complete visual editing integration: step-by-step with Vite and a Node.js HTTP server.

Task-focused guides for specific features and integrations:

• Using the Presentation tool: editor-facing guide to the preview experience.
• Enabling drag and drop: page building with array reordering.
• Custom overlay components: extend the overlay system with plugins.
• Custom preview header and navigation: customize the Presentation tool UI.
• Content Source Maps specification: the JSON format and GROQ compatibility matrix.
• Presentation Resolver API: advanced DocumentLocationResolver reference.
• Studio edit intent links: construct URLs to open documents in the Studio directly.
• Vercel protection bypass: integration guide for deployment protection.
• useOptimistic hook reference: React hook for optimistic drag-and-drop UI.