Get help on Discord

How to visually format custom styles in Sanity block content editor?

9 replies
Last updated: Dec 2, 2025
I'm adding a custom style to a block content/richtext editor field and was trying to find out how I can format the text in the editor to reflect the different style visually in order for editors to "get it". There's no mention of that in the docs over at https://www.sanity.io/docs/configuration so I was wondering - is it actually possible?
AI Update

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 thread
9 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.

Get started for freeExplore the demo

Was this answer helpful?