# Interactive previews

https://www.sanity.io/learn/course/studio-excellence/intelligent-integrations

Give your authors more confidence to press publish by rendering live updating previews of new drafts or other content releases

---

## Navigation

**Track:** [Mastering content operations](https://www.sanity.io/learn/track/sanity-developer-essentials) · [View as markdown](https://www.sanity.io/learn/track/sanity-developer-essentials.md)

**Course:** [Studio excellence](https://www.sanity.io/learn/course/studio-excellence) · [View as markdown](https://www.sanity.io/learn/course/studio-excellence.md)

**Previous:** [Member-specific options](https://www.sanity.io/learn/course/studio-excellence/member-mastery) · **Next:** [Extending with plugins](https://www.sanity.io/learn/course/studio-excellence/pleasing-plugins)

---

## Course Contents

1. [Excellent editorial experiences](https://www.sanity.io/learn/course/studio-excellence/excellent-editorial-experiences)
2. [Improving the editorial experience](https://www.sanity.io/learn/course/studio-excellence/improving-the-editorial-experience)
3. [Sublime schemas](https://www.sanity.io/learn/course/studio-excellence/sublime-schemas)
4. [Structure customization](https://www.sanity.io/learn/course/studio-excellence/structure-customization)
5. [Custom input components](https://www.sanity.io/learn/course/studio-excellence/custom-form-components)
6. [Member-specific options](https://www.sanity.io/learn/course/studio-excellence/member-mastery)
7. **Interactive previews** *(current)*
8. [Extending with plugins](https://www.sanity.io/learn/course/studio-excellence/pleasing-plugins)
9. [Internationalization](https://www.sanity.io/learn/course/studio-excellence/internationalization)
10. [Awesome authoring](https://www.sanity.io/learn/course/studio-excellence/awesome-authors)

---

> [Video: Interactive previews](https://www.sanity.io/learn/course/studio-excellence/intelligent-integrations)

> [!TIP]
> Review [Previewing content in presentation](https://www.sanity.io/docs/preview-content-on-site#68f497772ca7) in the documentation



## Visual editing



Visual editing can be configured for any web front end. There are multiple [templates, guides, and code examples](https://www.sanity.io/docs/presentation#8baf226e0ab4) for Next.js, Astro, Expo and Remix.



> [!TIP]
> See [Visual editing](https://www.sanity.io/learn/visual-editing/introduction-to-visual-editing) in the documentation



Interactive live preview is the ultimate upgrade for authors inside a headless content management system. There is no substitute for having complete confidence in the impact of your content before pressing publish.



This is usually rendered inside the Presentation tool.



Visual editing is especially powerful when paired with Content Releases so that changes across multiple documents can be stacked and previewed before publishing.



> [!TIP]
> See [Content Releases user guide](https://www.sanity.io/learn/user-guides/content-releases) in the documentation



![Presentation tool showing a website front end with an editable field](https://cdn.sanity.io/images/3do82whm/next/0fe7856b76c8d45281ace72db4b31f1d9721cd43-2240x1480.png)

> [!TIP]
> In the [Work-ready Next.js](https://www.sanity.io/learn/track/work-ready-next-js) track, visual editing is configured during the [Integrated Visual Editing with Next.js](https://www.sanity.io/learn/course/visual-editing-with-next-js) course.



## Components preview



You may also display individual components directly from your frontends or applications inside the Studio. View panes accept the current values of the document being edited and so can be passed in as props to that component.



> [!TIP]
> See the [documentation for `getDefaultDocumentNode`](https://www.sanity.io/docs/structure-builder-reference#97e44ce262c9) to see how components can be loaded alongside the editor.



In the example below, an author is presented with a layout preview of what this property will look like in a search result while authoring the document.



![Sanity Studio document editor shown with a search result component](https://cdn.sanity.io/images/3do82whm/next/22b562b3f27aea1aa2fcddd47bc1f6263232cf31-2144x1388.png)

---

## Related Resources

- [Full course as markdown](https://www.sanity.io/learn/course/studio-excellence.md)
- [Track overview](https://www.sanity.io/learn/track/sanity-developer-essentials.md)
- [All courses and lessons](https://www.sanity.io/learn/sitemap.md)
- [Complete content for LLMs](https://www.sanity.io/learn/llms-full.txt)

<AgentInstructions>

## Submitting Feedback

If you encounter incorrect, outdated, or confusing documentation on this page, submit feedback:

POST https://www.sanity.io/learn/resource/feedback

```json
{
  "path": "/learn/course/studio-excellence/intelligent-integrations.md",
  "feedback": "Description of the issue"
}
```

Only submit feedback when you have something specific and actionable to report.

</AgentInstructions>