
Grab your gear: The official Sanity swag store
Read Grab your gear: The official Sanity swag storeYou're on the right track! You need to add a vimeo serializer to handle your custom type. The issue is that you need to define the serializer in the same way as the other types in your renderBlocks function.
Based on the code you've shared and following the same pattern as your existing serializers, here's what you need to add:
const serializers = {
types: {
code: ({ node }) => h('pre', h('code', { lang: node.language }, node.code)),
mainImage: ({ node }) =>
h('img', {
src: imageUrlFor(node.asset).url()
}),
authorReference: ({ node }) => h('p', 'Author: ' + node.author.name),
vimeo: ({ node }) => {
// Extract the video ID from the URL
const videoId = node.url.split('/').pop();
const embedUrl = `https://player.vimeo.com/video/${videoId}`;
return h('div', { class: 'video-container' },
h('iframe', {
src: embedUrl,
width: '640',
height: '360',
frameborder: '0',
allow: 'autoplay; fullscreen; picture-in-picture',
allowfullscreen: true
})
);
}
}
};Important notes:
// In your Studio schema
{
name: 'vimeo',
type: 'object',
title: 'Vimeo Video',
fields: [
{
name: 'url',
type: 'url',
title: 'Vimeo URL'
}
]
}The h function from @sanity/block-content-to-html creates HTML elements. The syntax is:
h('tagName', attributes, children)h('tagName', children)URL transformation - Vimeo URLs that users paste (like https://vimeo.com/123456) need to be converted to embed URLs (https://player.vimeo.com/video/123456) for the iframe to work properly.
Modern alternative - Note that @sanity/block-content-to-html is an older library. For new projects, Sanity recommends using @portabletext/to-html instead, which has similar functionality but is more actively maintained.
The key is making sure the serializer name (vimeo) matches your schema type name, and that you're accessing the correct properties from the node object (in this case, node.url). If you're still having issues, double-check that your vimeo schema is properly registered in your Studio configuration and that the field structure matches what the serializer expects.
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.
Content operations
Content backend


The only platform powering content operations
By Industry


Tecovas strengthens their customer connections
Build and Share

Grab your gear: The official Sanity swag store
Read Grab your gear: The official Sanity swag store