Lists not showing bullets or numbering when rendering Portable Text markdown

This is a common issue when rendering Portable Text lists - the bullets and numbering don't appear because you need to add CSS styling or configure custom serializers for list elements. By default, the Portable Text renderer outputs semantic HTML but doesn't include any styling.

Here are the solutions:

Quick Fix: Add CSS Styling

The simplest solution is to add CSS to style your lists. The rendered lists use standard HTML <ul> and <ol> tags:

/* Add bullets to unordered lists */
ul {
  list-style-type: disc;
  padding-left: 1.5rem; /* or 24px */
}

/* Add numbering to ordered lists */
ol {
  list-style-type: decimal;
  padding-left: 1.5rem;
}

/* Style nested lists if needed */
ul ul {
  list-style-type: circle;
}

Using Tailwind Typography

If you're using Tailwind CSS, the Typography plugin handles this automatically:

import { PortableText } from '@portabletext/react'

<article className="prose">
  <PortableText value={content} />
</article>

Custom List Serializers

For more control, you can define custom list components:

const components = {
  list: {
    bullet: ({children}) => <ul className="list-disc pl-6 my-4">{children}</ul>,
    number: ({children}) => <ol className="list-decimal pl-6 my-4">{children}</ol>
  },
  listItem: {
    bullet: ({children}) => <li className="mb-2">{children}</li>,
    number: ({children}) => <li className="mb-2">{children}</li>
  }
}

<PortableText value={content} components={components} />

The issue occurs because browsers don't display list markers when lists have certain CSS properties (like list-style-position: inside without proper padding) or when the default styling is reset by CSS frameworks. Adding explicit list-style-type and padding-left should resolve your issue immediately.