How to use a Custom Preview Component on the Document View
To use a custom preview component on the document view in Sanity Studio, you'll configure it using the Structure Builder's S.view.component() method. This lets you add custom React components as alternative views alongside the default form view.
Here's the basic implementation pattern:
export const structure = (S) =>
S.list()
.title('Content')
.items([
S.documentTypeListItem('myDocumentType').child(
S.documentList()
.title('My Documents')
.filter('_type == "myDocumentType"')
.child((documentId) =>
S.document()
.documentId(documentId)
.schemaType('myDocumentType')
.views([
S.view.form(), // Default form view
S.view.component(CustomPreviewComponent)
.title('Preview')
.icon(EyeIcon) // optional
])
)
)
])Your custom component receives the document data as props, which you can use to render your preview:
import { useDocumentPane } from 'sanity/desk'
function CustomPreviewComponent(props) {
const { document, documentId, schemaType } = props
// Access the current document values
const { displayed } = document
return (
<div style={{ padding: '1rem' }}>
<h2>{displayed?.title}</h2>
{/* Render your custom preview here */}
</div>
)
}
export default CustomPreviewComponentThis approach is particularly powerful for:
- Live previews: Show how content will appear on your actual website
- Component visualization: Display frontend components with real document data
- Contextual information: Show related documents, analytics, or metadata
- Custom interactions: Add specialized editing controls for complex content types
The Component View documentation covers this in detail, including how to access document values and integrate with your frontend components for accurate previews.
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.