Sanity Presentation Tool showing editing options in production
This is a common issue! The editing overlays are showing in production because stega encoding and the Visual Editing component are still active on your production site. They should only be enabled when Draft Mode is active.
The Problem
The overlays you're seeing are powered by stega encoding (invisible metadata embedded in your content) and the <VisualEditing> component from next-sanity or @sanity/overlays. If these are running unconditionally in production, visitors will see the editing overlays.
The Solution
You need to conditionally enable both stega encoding and the VisualEditing component only when Draft Mode is active. Here's how:
1. Conditionally Enable Stega in Your Client
When creating your Sanity client, only enable stega in draft mode:
import { createClient } from 'next-sanity'
import { draftMode } from 'next/headers'
export async function getClient() {
const { isEnabled } = await draftMode()
return createClient({
projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
dataset: process.env.NEXT_PUBLIC_SANITY_DATASET,
apiVersion: '2024-01-01',
useCdn: !isEnabled,
perspective: isEnabled ? 'previewDrafts' : 'published',
stega: {
enabled: isEnabled, // Only enable stega in draft mode
studioUrl: '/studio',
},
})
}2. Conditionally Render the VisualEditing Component
In your root layout or component, only render the <VisualEditing> component when in draft mode:
import { draftMode } from 'next/headers'
import { VisualEditing } from 'next-sanity'
export default async function RootLayout({ children }) {
const { isEnabled } = await draftMode()
return (
<html>
<body>
{children}
{isEnabled && <VisualEditing />}
</body>
</html>
)
}3. Verify Your Draft Mode Setup
Make sure you have proper Draft Mode API routes set up to enable/disable the preview state. You should have routes like:
/api/draft- to enable draft mode/api/disable-draft- to exit draft mode
Quick Checklist
- ✅ Stega encoding only enabled when
draftMode().isEnabledis true - ✅
<VisualEditing>component only rendered in draft mode - ✅ Client uses
publishedperspective in production - ✅ Draft Mode properly activated only through authenticated preview URLs
After making these changes, your production site should no longer show editing overlays to regular visitors, while content editors using preview URLs will still get the full visual editing experience with the Presentation tool.
Show original thread4 replies
Sanity – Build the way you think, not the way your CMS thinks
Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.