How to visually format custom styles in Sanity block content editor?
Yes, absolutely! You can customize how custom styles and decorators appear visually in the Portable Text editor. The key is using the component property (and optionally the icon property) in your schema definition.
Here's how to add visual styling to a custom decorator like "highlight":
import React from 'react'
const HighlightIcon = () => (
<span style={{ fontWeight: 'bold' }}>H</span>
)
const HighlightDecorator = (props) => (
<span style={{ backgroundColor: 'yellow' }}>{props.children}</span>
)
export default {
name: 'content',
title: 'Content',
type: 'array',
of: [
{
type: 'block',
marks: {
decorators: [
{ title: 'Strong', value: 'strong' },
{ title: 'Emphasis', value: 'em' },
{ title: 'Code', value: 'code' },
{
title: 'Highlight',
value: 'highlight',
icon: HighlightIcon,
component: HighlightDecorator
}
]
}
}
]
}The icon property controls what appears in the toolbar button, while the component property controls how the styled text appears in the editor itself. The component receives props.children containing the text content, which you can wrap in any styling you need.
This same pattern works for block styles too. For example, creating a custom "Title" style:
const TitleStyle = (props) => (
<span style={{ fontFamily: 'Garamond', fontSize: '2em' }}>
{props.children}
</span>
)
export default {
name: 'content',
type: 'array',
of: [
{
type: 'block',
styles: [
{ title: 'Normal', value: 'normal' },
{
title: 'Title',
value: 'title',
component: TitleStyle
}
]
}
]
}For annotations (like custom link types), you use components.annotation instead:
import ExternalLinkRenderer from './components/ExternalLinkRenderer'
{
name: 'link',
type: 'object',
title: 'External link',
fields: [
{ name: 'url', type: 'url' }
],
components: {
annotation: ExternalLinkRenderer
}
}The official documentation on customizing the Portable Text Editor has comprehensive examples of all these patterns. This visual feedback is super helpful for editors to understand what formatting they're applying without needing to preview the content elsewhere!
Show original thread9 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.