Does Sanity real-time live preview work in localhost/dev environments?

Yes, real-time live preview absolutely works in dev environments and on localhost! Based on the guide you're following, here's what you need to know:

It Should Work Locally

The Visual Editing setup with Presentation tool is specifically designed to work in your local development environment. When you visit http://localhost:3000/studio/presentation, it should:

• Show both draft and published documents
• Display clickable overlays on content fields
• Update in real-time as you type in the Studio

Common Issues & Solutions

If it's not updating in real-time, here are the most likely culprits:

1. Missing useLiveQuery Hook

The guide shows you need to wrap your components with the useLiveQuery hook from next-sanity/preview. Make sure you have preview wrapper components like:

// PostsPreview.tsx
import { useLiveQuery } from "next-sanity/preview";

export default function PostsPreview({ posts = [] }) {
  const [data] = useLiveQuery(posts, POSTS_QUERY);
  return <Posts posts={data} />;
}

2. Draft Mode Not Activated

The Presentation tool needs to successfully activate draft mode by visiting your /api/draft route. Check that:

• Your SANITY_API_READ_TOKEN is set in .env.local
• The draft API route exists at ./src/pages/api/draft.ts
• You've configured the Presentation tool with the draft mode enable route in your sanity.config.ts

3. Missing VisualEditing Component

Make sure you have the <VisualEditing /> component from @sanity/visual-editing/next-pages-router in your _app.tsx:

import { VisualEditing } from "@sanity/visual-editing/next-pages-router";

// Should be rendered when draftMode is true
<VisualEditing />

This component contains the useLiveMode hook that actually listens for content changes from the Presentation tool.

4. Stega Encoding Not Enabled

Verify your client configuration in ./sanity/lib/client.ts has stega enabled for preview:

stega: {
  enabled: previewToken ? true : false,
  studioUrl: '/studio',
}

5. PreviewProvider Not Wrapping Your App

Ensure your _app.tsx conditionally wraps your app with the PreviewProvider when draft mode is active. This provider includes the LiveQueryProvider that enables real-time updates.

Deployment Not Required

You do not need to deploy anything for this to work locally. The whole point of this setup is to give content editors a live preview experience during local development and in production.

Debugging Steps

If you're still having issues after checking these:

1. Restart your dev server after adding environment variables
2. Check the browser console for errors
3. Verify the Presentation tool successfully navigates to /api/draft (check Network tab)
4. Make sure you're editing content inside the Presentation tool's iframe, not in a separate Studio tab

The real-time updates should work perfectly on localhost once all the pieces are connected! The guide you're following is specifically designed for local development first, so there's no reason it shouldn't work before deployment.