Skip to content
🎤 Builder Talk: The Story Behind Lady Gaga’s Digital Experience – Register now
Get help on Slack

Adding custom bullet lists in Sanity's Portable Text editor

8 replies
Last updated: Feb 6, 2025
Hi There,
I'm trying to add a custom bullet list to my portableText editor, like:

lists: [
        {title: 'Bullet', value: 'bullet'},
        {title: 'Numbered', value: 'number'},
        {
          title: 'Checkmarks', 
          value: 'checkmarks', 
          icon: UlistIcon,
        }
      ],
This works nicely, but within the editor it just shows up as tabs.
Does anyone know how to add some styling to this so I can actually show checkmarks, or at least show bullets so that the one editing it is able to see thats it's a list?
Feb 6, 2025, 2:41 PM
i added the following css
.pt-list-item-checkmarks [data-list-item="checkmarks"] [data-list-prefix] > span::before {
    content: "■";
    font-size: 1.0em;
    display: inline-block;
    padding-top: 2px;
    color: crimson;
}
Feb 6, 2025, 2:48 PM
I tried that, but not really sure where to put it /imoprt it😓
Feb 6, 2025, 2:49 PM
or can i just import it in the sanity.config.ts?
Feb 6, 2025, 2:50 PM
in your schema you can import a seperate .css file
so textField.tsx

import './textField.css'


export const textField = defineType({.....
Feb 6, 2025, 2:50 PM
ah i can... i just had a wrong css selector i guess
Feb 6, 2025, 2:50 PM
o thats even better for keeping it organized
Feb 6, 2025, 2:51 PM
Love it, thanks
user Z
Feb 6, 2025, 2:54 PM
👍 No problem
Feb 6, 2025, 2:54 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?