Was this page helpful?
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:
shift to freely rearrange page elements in a mini-map outline of your pageSanity'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.
The Integrated Visual Editing with Next.js over at Sanity Learn is a great resource for learning the ins and outs of Visual Editing, even if you plan to be using a different front end.
If you prefer to get right into tinkering with some code, there are several template projects to be found at the Sanity exchange that will get you started.
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.
Check out our framework-specific guides below for a head start. Following along one of these will help you set up Visual Editing from the beginning.
In addition to these Sanity-curated guides, you can find more guides, tools, templates and inspiration at the exchange.