Adding custom bullet lists in Sanity's Portable Text editor
Great question! You're on the right track with adding custom list types to your Portable Text editor. The issue is that while you can define custom list types in your schema, there isn't currently a built-in way to customize how they appear visually in the Sanity Studio editor itself.
The Current Limitation
When you define custom list types in your Portable Text schema, Sanity recognizes them and stores them correctly in your content, but the visual representation in the Studio editor is quite limited. The editor uses a standard rendering for all list types, which is why you're seeing tabs rather than custom visual indicators like checkmarks or styled bullets.
What Works vs. What Doesn't
Unlike decorators (bold, italic, etc.) which support the blockEditor property with render and icon options for customizing their appearance in the editor, list types don't have this same capability. As shown in the decorators documentation, you can customize decorator rendering like this:
decorators: [
{
title: "Sup",
value: "sup",
blockEditor: {
icon: () => <sup>sup</sup>,
render: ({ children }) => <sup>{children}</sup>,
},
},
]However, list types don't support a similar blockEditor or component property for custom rendering within the Studio editor.
Full Control on the Frontend
The good news is that your data is being stored correctly with value: 'checkmarks', and you have complete control over how these lists render on your frontend. Using @portabletext/react or similar rendering libraries, you can create custom components:
const components = {
list: {
checkmarks: ({children}) => (
<ul className="checkmark-list">
{children}
</ul>
)
},
listItem: {
checkmarks: ({children}) => (
<li className="checkmark-item">
β {children}
</li>
)
}
}Workarounds for Better Editor Experience
To help your content editors understand which list type they're using:
Use descriptive titles and icons: You're already doing this with
title: 'Checkmarks'andicon: UlistIcon, which helps editors identify the list type in the formatting toolbarAdd descriptions: Include a
descriptionfield in your list configuration to explain what each list type doesCreate documentation: Provide internal documentation with screenshots showing how each list type will appear on the live site
This is a known limitation of the current Portable Text Editor in Studio. The editor focuses on content structure rather than exact visual fidelity, with the expectation that the final rendering happens on your frontend where you have complete styling control.
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.