Visual Editing Resources

Starter templates, guides, and tooling for enabling Visual Editing for Sanity projects

Below are starter templates, framework-specific guides, and tooling to accommodate Visual Editing.

Introduction to Visual Editing

Get a high-level overview of the different capabilities and components for Visual Editing

Guides

Step-by-step instructions for popular front end frameworks.

Next.js

Next.js (App Router)

Set up interactive live preview with Presentation in a Next.js App Router application

Next.js (Pages Router)

Set up interactive live preview with Presentation in a Next.js pages router application

Remix / Hydrogen

Remix

Set up interactive live preview with Presentation in a Remix application

Hydrogen

Set up interactive live preview with Presentation in a Hydrogen storefront.

Starter templates

Ready-to-be-deployed started templates that come with Visual Editing set up.

Tooling

Framework-specific toolkits and loaders

Toolkits

These toolkits comes with loaders and other tooling built-in:

The official Sanity.io toolkit for Next.js apps.

Comes with Visual Editing tooling for Next.js projects

The official Sanity toolkit for Nuxt.js

Comes with Visual Editing tooling for Nuxt.js projects

Loaders

Loader packages for frameworks and languages:

@sanity/react-loader

Loader for React projects

@sanity/svelte-loader

Loader for Svelte and SvelteKit.

@sanity/core-loader

Foundational loader for JavaScript projects.

Other tooling

@sanity/preview-url-secret

Tooling to validate and inspect URL origins for initializing preview mode

Updated on April 23, 2024

Platform

Features

Use cases

Integrations

Learn

Build and share

Frameworks

Discover

Customer stories

Popular guides