How to create a flexible content array with multiple block types in Sanity?
You're looking for an array of objects approach - this is exactly what Sanity calls a "page builder" or "flexible content" pattern! It's a super common setup and doesn't require a rich text editor at all.
Here's how to set it up:
Basic Structure
Create an array field with multiple object types that editors can choose from. Here's a simple example:
{
name: 'content',
type: 'array',
title: 'Page Content',
of: [
{
name: 'hero',
type: 'object',
title: 'Hero Section',
fields: [
{ name: 'heading', type: 'string' },
{ name: 'tagline', type: 'text' },
{ name: 'image', type: 'image' }
]
},
{
name: 'textBlock',
type: 'object',
title: 'Text Block',
fields: [
{ name: 'title', type: 'string' },
{ name: 'content', type: 'text' }
]
},
{
name: 'gallery',
type: 'object',
title: 'Image Gallery',
fields: [
{ name: 'images', type: 'array', of: [{ type: 'image' }] }
]
}
]
}With TypeScript
If you're using TypeScript, use defineField and defineArrayMember for better type safety:
defineField({
name: 'content',
type: 'array',
title: 'Page Content',
of: [
defineArrayMember({
name: 'hero',
type: 'object',
title: 'Hero Section',
fields: [
defineField({ name: 'heading', type: 'string' }),
defineField({ name: 'tagline', type: 'text' }),
defineField({ name: 'image', type: 'image' })
]
}),
defineArrayMember({
name: 'textBlock',
type: 'object',
title: 'Text Block',
fields: [
defineField({ name: 'title', type: 'string' }),
defineField({ name: 'content', type: 'text' })
]
})
]
})Key Benefits
This approach gives you:
- Drag-and-drop reordering of blocks
- Multiple block types to choose from in a dropdown
- Copy/paste support for entire blocks or individual items
- Structured data that's easy to query and render
Making It Better
You can enhance the editing experience by adding custom previews to your blocks so editors can see what each block contains without opening it:
{
name: 'hero',
type: 'object',
preview: {
select: {
title: 'heading',
media: 'image'
}
},
fields: [...]
}Sanity actually has a full course on page building that covers this pattern in depth, including best practices and advanced techniques. The core concept is that at its fundamental level, a page builder is just an array of objects - exactly what you're describing!
Show original thread22 replies
Was this answer helpful?
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.
