How to Implement Live Preview and Visual Editing in NextJS and Sanity

Learn how to level up your content editing experience by integrating Sanity’s dynamic Visual Editing and Live Preview with Next.js App Router—transforming how your team builds, previews, and launches content in real time!

TL;DR:

The Problem: Tired of clunky, outdated content editing? The Solution: This guide shows you how to integrate Sanity’s Live Preview and Visual Editing with the Next.js App Router. Draft Mode: Instantly preview unpublished drafts to see exactly how they’ll look—no waiting or guessing needed. Visual Editing: Transform your website into an editable canvas—click, drag, and see changes live as you work. Live Preview Iframe Pane: See your changes come to life in real-time, directly alongside your editing workflow—no context switching required! The Result: It’s a total game-changer for smoother workflows, happier editors, and a stress-free content process.

Welcome to the next level of content editing! Traditionally in Sanity, visual editing has been confined to presentation mode, where you preview your content separately from the editing interface. But what if you could see your changes live, right alongside your work? That's where Live Preview comes in. In this guide, we’re exploring how to integrate Sanity’s Visual Editing with the Next.js App Router and how to enable Live Preview—so you can watch your content update in real time.

Whether you’re setting up a brand-new project or upgrading an existing one, this walkthrough will equip you with the tools you need to create an intuitive, real-time editing experience that brings your content to life. Let’s dive in!

1. Getting Started

Before we jump in, make sure you have the following:

A Sanity Project: Ensure your Sanity Studio is hosted or embedded (remember to use route groups if embedding!).
A Next.js Application: Using the App Router (if you haven’t set one up yet, check out the Next.js documentation).

2. Next.js Application Setup

Install Dependencies

First things first, you’ll need to install the necessary packages to handle data fetching and visual editing:

npm install @sanity/client next-sanity

This will equip your application with the tools required to interact with Sanity’s Content Lake.

Set Environment Variables

Create a .env file at the root of your project to store your Sanity configuration. Here’s an example:

# Public
NEXT_PUBLIC_SANITY_PROJECT_ID="YOUR_PROJECT_ID"
NEXT_PUBLIC_SANITY_DATASET="YOUR_DATASET"
NEXT_PUBLIC_SANITY_STUDIO_URL="https://YOUR_PROJECT.sanity.studio"
# Private
SANITY_VIEWER_TOKEN="YOUR_VIEWER_TOKEN"

These variables will allow your application to fetch and preview content smoothly.

Configure the Sanity Client

Set up a Sanity client instance to manage data fetching:

// src/sanity/client.ts
import { createClient } from "next-sanity";

export const client = createClient({
  projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
  dataset: process.env.NEXT_PUBLIC_SANITY_DATASET,
  apiVersion: "2024-12-01",
  useCdn: true,
  token: process.env.SANITY_VIEWER_TOKEN,
  stega: {
    studioUrl: process.env.NEXT_PUBLIC_SANITY_STUDIO_URL,
  },
});

The stega option here is crucial—it enables automatic overlays when in preview mode.

3. Enabling Draft Mode

Draft mode is a game-changer for content editors. It allows you to view and interact with draft content before it goes live.

Create an API Endpoint to Enable Draft Mode

Set up an endpoint to activate draft mode:

// src/app/api/draft-mode/enable/route.ts
import { client } from "@/sanity/client";
import { defineEnableDraftMode } from "next-sanity/draft-mode";

export const { GET } = defineEnableDraftMode({
  client: client.withConfig({
    token: process.env.SANITY_VIEWER_TOKEN,
  }),
});

Create a Server Action to Disable Draft Mode

Sometimes, you’ll need to switch off the draft mode. Here’s how you can do that:

// src/app/actions.ts
'use server'

import { draftMode } from 'next/headers';

export async function disableDraftMode() {
  const disable = (await draftMode()).disable();
  const delay = new Promise((resolve) => setTimeout(resolve, 1000));
  await Promise.allSettled([disable, delay]);
}

Build a Disable Draft Mode Component

Let's install a react toast library called sonner :

npm install sonner

Create a component named DraftModeToast.tsx that will render a toast with a button to disable draft mode for content authors:

// src/components/DraftModeToast.tsx
"use client";

import {
  useDraftModeEnvironment,
  useIsPresentationTool,
} from "next-sanity/hooks";
import { useRouter } from "next/navigation";
import { useEffect, useTransition } from "react";
import { toast } from "sonner";
import { disableDraftMode } from "@/app/actions";

export default function DraftModeToast() {
  const isPresentationTool = useIsPresentationTool();
  const env = useDraftModeEnvironment();
  const router = useRouter();
  const [pending, startTransition] = useTransition();

  useEffect(() => {
    if (isPresentationTool === false) {
      /**
       * We delay the toast in case we're inside Presentation Tool
       */
      const toastId = toast("Draft Mode Enabled", {
        description:
          env === "live"
            ? "Content is live, refreshing automatically"
            : "Refresh manually to see changes",
        duration: Infinity,
        action: {
          label: "Disable",
          onClick: async () => {
            await disableDraftMode();
            startTransition(() => {
              router.refresh();
            });
          },
        },
      });
      return () => {
        toast.dismiss(toastId);
      };
    }
  }, [env, router, isPresentationTool]);

  useEffect(() => {
    if (pending) {
      const toastId = toast.loading("Disabling draft mode...");
      return () => {
        toast.dismiss(toastId);
      };
    }
  }, [pending]);

  return null;
}

Now that you've successfully enabled Draft Mode, your team can:

Instantly preview draft content directly in your Next.js application.
Collaborate effectively by viewing unpublished content changes in real-time.
Quickly toggle between draft and published states for seamless editing and reviewing.

4. Enabling Visual Editing

Visual Editing is a powerful feature from Sanity that enables your editors to see exactly how content changes affect the website in real-time—directly within the editing context. This means no more switching between admin panels and preview windows. Editors can click on content elements to edit them instantly, seeing their updates appear immediately on-screen.

The main benefits of enabling Visual Editing include:

Faster content iteration: Instantly preview and refine content without delays.
Intuitive workflow: Edit directly on-page rather than in a separate admin interface.
Enhanced accuracy: See the true impact of changes immediately, reducing mistakes.

Integrate Visual Editing into Your Root Layout

Enabling Visual Editing with Sanity and Next.js is straightforward. It involves adding the <VisualEditing> component into your application's root layout and conditionally render it when Draft Mode is active.

Here’s how simple it is to set up:

// src/app/layout.tsx
import { VisualEditing } from "next-sanity";
import { draftMode } from "next/headers";
import { Toaster } from "sonner";

import DraftModeToast from "@/app/components/DraftModeToast";

export default async function RootLayout({ children }: { children: React.ReactNode; }) {
  const { isEnabled: isDraftMode } = await draftMode();
  return (
    <html lang="en">
      <body>
        {children}
       {/* The <Toaster> component is responsible for rendering toast notifications used in /app/components/DraftModeToast.tsx */}
          <Toaster />
          {isDraftMode && (
            <>
              <DraftModeToast />
              {/*  Enable Visual Editing, only to be rendered when Draft Mode is enabled */}
              <VisualEditing />
            </>
          )}
      </body>
    </html>
  );
}

Yes, it’s really that simple! Once this is configured, your editors will be able to visually edit content in real time.

Now that you’ve enabled Visual Editing, your team can:

Edit content directly on the live page, making updates intuitive and quick.
Enjoy instant visual feedback on edits, speeding up content production cycles.
Easily identify and refine content visually, reducing errors and improving user experience.

5. Rendering Pages in Preview Mode

Preview Mode in Next.js allows you to fetch and display draft or unpublished content directly within your application, enabling content creators to review their updates exactly as they'll appear live—without having to publish first. It's a game-changer for content accuracy and speed.

Learn more about Preview Mode in the Next.js documentation.

Update Your Data Fetching Logic

Here's how you'll adjust your data fetching logic to take advantage of Preview Mode:

// src/app/[slug]/page.tsx
import { defineQuery } from "next-sanity";
import { draftMode } from "next/headers";
import { client } from "@/sanity/client";

const query = defineQuery(
  `*[_type == "page" && slug.current == $slug][0]{title}`
);

export default async function Page({ params }: { params: Promise<{ slug: string }>; }) {
  const { slug } = await params;
  const { isEnabled } = await draftMode();

  const data = await client.fetch(
    query,
    { slug },
    isEnabled
      ? {
          perspective: "previewDrafts",
          useCdn: false,
          stega: true,
        }
      : undefined
  );

  return <h1>{data.title}</h1>;
}

With Preview Mode enabled, your team can instantly preview and verify content updates, making your editing workflow smoother than ever.

Here's a demonstration of how the live preview functions when preview mode is activated. It updates the data instantly whenever you modify any field in the Sanity Studio.

6. Studio Setup for Live Preview

To achieve an exceptional editing experience, you'll want to enable Live Preview right within your Sanity Studio. Live Preview allows your editors to instantly visualize how changes will look in real-time, directly alongside their editing interface, eliminating context switching and streamlining your workflow.

Learn more about setting up Live Preview in Sanity’s official documentation.

Presentation Resolver API

Take your Live Preview to the next level by programmatically creating shortcuts directly from your document forms to the relevant routes using Sanity’s Presentation Resolver API. This powerful feature allows editors to instantly jump between content and its visual representation—boosting productivity and making content editing effortless.

The Presentation tool enables you to effortlessly create shortcuts that link directly from your documents in Sanity Studio to their visual previews. This is achieved by configuring two essential concepts:

Main Document Resolvers
Document Locations Resolvers

Let's create a resolve.ts file and implement both main document and document locations resolvers.

// /src/lib/resolve.ts
import {defineDocuments, defineLocations, type DocumentLocation} from 'sanity/presentation'

// Define the home location for the presentation tool
const homeLocation = {
  title: 'Home',
  href: '/',
} satisfies DocumentLocation

// resolveHref() is a convenience function that resolves the URL
// path for different document types and used in the presentation tool.
function resolveHref(documentType?: string, slug?: string): string | undefined {
  switch (documentType) {
    case 'post':
      return slug ? `/posts/${slug}` : undefined
    case 'page':
      return slug ? `/${slug}` : undefined
    default:
      console.warn('Invalid document type:', documentType)
      return undefined
  }
}

export const resolve = {
  // The Main Document Resolver API provides a method of resolving a main document from a given route or route pattern. https://www.sanity.io/docs/presentation-resolver-api#57720a5678d9
  mainDocuments: defineDocuments([
    {
      route: '/:slug',
      filter: `_type == "page" && slug.current == $slug || _id == $slug`,
    },
    {
      route: '/posts/:slug',
      filter: `_type == "post" && slug.current == $slug || _id == $slug`,
    },
  ]),
  // Locations Resolver API allows you to define where data is being used in your application. https://www.sanity.io/docs/presentation-resolver-api#8d8bca7bfcd7
  locations: {
    settings: defineLocations({
      locations: [homeLocation],
      message: 'This document is used on all pages',
      tone: 'positive',
    }),
    page: defineLocations({
      select: {
        name: 'name',
        slug: 'slug.current',
      },
      resolve: (doc) => ({
        locations: [
          {
            title: doc?.name || 'Untitled',
            href: resolveHref('page', doc?.slug)!,
          },
        ],
      }),
    }),
    post: defineLocations({
      select: {
        title: 'title',
        slug: 'slug.current',
      },
      resolve: (doc) => ({
        locations: [
          {
            title: doc?.title || 'Untitled',
            href: resolveHref('post', doc?.slug)!,
          },
          {
            title: 'Home',
            href: '/',
          } satisfies DocumentLocation,
        ].filter(Boolean) as DocumentLocation[],
      }),
    }),
  },
}

Configure the Presentation Tool

Update your Sanity Studio configuration to include the Presentation tool:

// sanity.config.ts
import { defineConfig } from "sanity";
import { presentationTool } from "sanity/presentation";
import {resolve} from './src/lib/resolve'

export default defineConfig({
  // ... project configuration
  plugins: [
    presentationTool({
      previewUrl: {
        origin: process.env.SANITY_STUDIO_PREVIEW_ORIGIN,
        preview: "/",
        previewMode: {
          enable: "/api/draft-mode/enable",
        },
      },
      ,
      resolve
    }),
    // ... other plugins
  ],
});

With this setup, when your editors navigate to /posts/example-post, Sanity Studio will automatically identify and display the matching post document—making visual editing seamless!

Live Preview: Customize Document Views with an Iframe Pane

Let's install the sanity-plugin-iframe-pane in where you installed your sanity studio.

npm install --save sanity-plugin-iframe-pane

The simplest way to configure views is by customizing the defaultDocumentNode settings in the structureTool() plugin. This allows you to integrate an Iframe Pane directly into your Studio, providing an immediate preview of your content.
Let's create a separate file called defaultDocumentNode.ts

// ./src/defaultDocumentNode.ts
import {type DefaultDocumentNodeResolver} from 'sanity/structure'
import {urlSearchParamPreviewPerspective} from '@sanity/preview-url-secret/constants'
import {Iframe, UrlResolver} from 'sanity-plugin-iframe-pane'
import {SanityDocument} from '@sanity/client'
// URL for preview functionality, defaults to localhost:3000 if not set
const SANITY_STUDIO_PREVIEW_URL = process.env.SANITY_STUDIO_PREVIEW_URL || 'http://localhost:3000'

// Define allowed schema types for preview
const PREVIEW_SCHEMAS = ['page', 'post'] as const
type PreviewSchemaType = (typeof PREVIEW_SCHEMAS)[number]

// Customise this function to show the correct URL based on the current document and the current studio perspective
const getPreviewUrl: UrlResolver = (doc: SanityDocument | null, perspective) => {
  if (!doc?.slug?.current) return SANITY_STUDIO_PREVIEW_URL

  const pathPrefix = doc._type === 'post' ? 'posts/' : ''
  return `${SANITY_STUDIO_PREVIEW_URL}/${pathPrefix}${doc.slug.current}?${urlSearchParamPreviewPerspective}=${perspective.perspectiveStack}`
}

// Import this into the deskTool() plugin
export const defaultDocumentNode: DefaultDocumentNodeResolver = (S, {schemaType}) => {
  const baseView = S.view.form()

  if (!PREVIEW_SCHEMAS.includes(schemaType as PreviewSchemaType)) {
    return S.document().views([baseView])
  }

  const previewView = S.view.component(Iframe).options({url: getPreviewUrl}).title('Preview')

  return S.document().views([baseView, previewView])
}

Now implement the defaultDocumentNode in structureTool() which will override the default node and show an additional tab for Live Preview

// ./sanity.config.ts
import {defaultDocumentNode} from './src/structure/defaultDocumentNode'

export default defineConfig({
  // ...other config settings
  plugins: [
    structureTool({
      defaultDocumentNode,
      structure, // not required
    }),
    // ...other plugins
  ],
});

Now editors can see the live changes on the page or post without leaving the editor tab. This will allow them to see live previews in real-time effortlessly.

7. Optional Extras: Live Content API

For those who crave the ultimate real-time experience, Sanity’s experimental Live Content API delivers real-time updates for both draft and published content. It allows your application to reflect content changes immediately, creating a dynamic, engaging experience for both editors and end-users.

Learn more by checking out the Live Content API documentation or the official Live Demo video on YouTube!

Update Your Sanity Client for Live Content

// src/sanity/client.ts
import { createClient } from "next-sanity";

export const client = createClient({
  projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
  dataset: process.env.NEXT_PUBLIC_SANITY_DATASET,
  apiVersion: "2024-12-01",
  useCdn: true,
  stega: {
    studioUrl: process.env.NEXT_PUBLIC_SANITY_STUDIO_URL,
  },
});

Configure defineLive

// src/sanity/live.ts
import { defineLive } from "next-sanity";
import { client } from "./client";

const token = process.env.SANITY_VIEWER_TOKEN;

export const { sanityFetch, SanityLive } = defineLive({
  client,
  serverToken: token,
  browserToken: token,
});

Render Live Updates in Your Layout

// src/app/layout.tsx
import { VisualEditing } from "next-sanity";
import { draftMode } from "next/headers";
import { SanityLive } from "@/sanity/live";

export default async function RootLayout({ children }: { children: React.ReactNode; }) {
  return (
    <html lang="en">
      <body>
        {children}
        <SanityLive />
        {(await draftMode()).isEnabled && <VisualEditing />}
      </body>
    </html>
  );
}

Replace client.fetch with sanityFetch

Finally, update your page fetching logic:

// src/app/[slug]/page.tsx
import { defineQuery } from 'next-sanity';
import { sanityFetch } from '@/sanity/live';

const query = defineQuery(
  `*[_type == "page" && slug.current == $slug][0]{title}`,
);

export default async function Page({ params }: { params: Promise<{slug: string}>; }) {
  const { data } = await sanityFetch({
    query,
    params,
  });
  return <h1>{data.title}</h1>;
}

Conclusion

If you've struggled to integrate Sanity’s Live Preview and Visual Editing features into your Next.js App Router project, this guide has shown you how straightforward it can be. You now have a powerful setup that enables your team to visually edit and preview content seamlessly, in real-time, without context-switching or delays.

For example, your marketing team can now confidently create, edit, and immediately preview landing pages or blog posts, ensuring that what they see is exactly what your visitors will experience—instantly.

Ready to enhance your Sanity & Next.js projects even further?
Reach out to us and let's discuss how we can support your content workflows.

Happy coding and live editing!

Eric Nation

Co-Founder & Head of Engineering

Eric Nation, co-founder and partner at Operation Nation, spearheads the Product and Web Development division. Boasting over a decade of expertise as a professional software engineer, Eric thrives on crafting immersive web applications and sites. Away from the keyboard, you can find him at the gym, surfing, skateboarding, or on a motorcycle adventure somewhere.