Use object title as preview in pageBuilder array
Yes! You can display the schema title (like "Two Images") in your preview. The correct way to do this is with a custom preview component, since the prepare function doesn't have direct access to the schema type information.
Here's how to implement it:
Custom Preview Component Approach
import {defineType} from 'sanity'
const CustomPreview = (props: PreviewProps) => {
return props.renderDefault({
...props,
title: props.schemaType?.title
})
}
export const twoImagesType = defineType({
name: 'twoImages',
type: 'object',
title: 'Two Images',
fields: [
// your fields here
],
components: {
preview: CustomPreview
}
})The custom preview component receives props.schemaType.title, which will be "Two Images" as defined in your schema.
For PageBuilder Arrays
When using this in a pageBuilder array, apply the custom preview to each object type:
{
name: 'pageBuilder',
type: 'array',
of: [
{
name: 'twoImages',
type: 'object',
title: 'Two Images',
fields: [/* ... */],
components: {
preview: (props) => props.renderDefault({
...props,
title: props.schemaType?.title
})
}
},
{
name: 'heroSection',
type: 'object',
title: 'Hero Section',
fields: [/* ... */],
components: {
preview: (props) => props.renderDefault({
...props,
title: props.schemaType?.title
})
}
}
]
}Combining Schema Title with Dynamic Content
You can also combine the schema title with other field data:
const CustomPreview = (props: PreviewProps) => {
const {title, media} = props
return props.renderDefault({
...props,
title: props.schemaType?.title,
subtitle: title || 'No content yet',
media: media
})
}This approach is perfect for pageBuilder scenarios where you want editors to easily identify block types by their schema names without maintaining separate title fields. You can read more about this in the Sanity documentation on preview configuration and custom preview components.
Show original thread7 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.