Visual Editing with Sanity
Introduction to Sanity's Visual Editing features, architecture, and where to go to learn more.
Visual Editing lets content creators see their changes live and edit content directly from the webpage. Think of it as a bridge between your Sanity Studio and your website - your content team can view drafts, click and drag elements to edit them, and see changes in real-time.
Visual Editing streamlines content workflow by enabling teams to:
- Live Preview: See draft content immediately as you edit
- Click-to-edit and drag and drop: Jump directly from your website to the right field in Studio
- Global Preview: Preview content across your whole site, not just single pages
- Framework Agnostic: Works with your existing components and most modern JavaScript frameworks and hosting platforms
- No Extra Build: Preview without deploying branches or running preview builds
Protip
Sanity's Visual Editing tooling is available on all plans, including free, and supported by most modern frameworks and hosting platforms.
Note that some hosting platforms, like Vercel, have Visual Editing offerings with platform-specific features. Sanity's tooling should also be compatible with these solutions as long as they are based on Content Source Maps.
Remember: You can start simple with basic preview on a single route and add more routes as you need them. Visual Editing is designed to grow with your needs.
Follow our guide for existing Next.js projects if you want to add Visual Editing to an existing site. Perfect for when you already have a Sanity-powered Next.js website running.
Check out our guides below for new projects if you're starting fresh. We'll help you set up Visual Editing from the beginning.
- Understand how it works? Read more about the Presentation tool and how to think about fetching content for Visual Editing.
- See it in action? Check out the Next.js starter template.
- Need troubleshooting? Visit our troubleshooting guide.