Blank lines between list items cause unwanted <p> wrapping inside <li>

[istarkov]

Bug Description

The following markdown

## Test

- hellow

- world

is rendered as

(Each list item is wrapped into paragraph)

But must be

Test

• hellow

• world

Steps to Reproduce

// streamdown-ssr.mjs
import React from "react";
import { renderToString } from "react-dom/server";
import { Streamdown } from "streamdown";

const text = `
## Test

- hellow

- world

`;

const html = renderToString(React.createElement(Streamdown, { mode: "static" }, text));

process.stdout.write(html + "\n");

run node streamdown-ssr.mjs

see output

<div class="space-y-4 whitespace-normal [&amp;&gt;*:first-child]:mt-0 [&amp;&gt;*:last-child]:mb-0"><h2 class="mt-6 mb-2 font-semibold text-2xl" data-streamdown="heading-2">Test</h2>
<ul class="list-inside list-disc whitespace-normal [li_&amp;]:pl-6" data-streamdown="unordered-list">
<li class="py-1 [&amp;&gt;p]:inline" data-streamdown="list-item">
<p>hellow</p>
</li>
<li class="py-1 [&amp;&gt;p]:inline" data-streamdown="list-item">
<p>world</p>
</li>
</ul></div>

Expected Behavior

Output must be

<div class="space-y-4 whitespace-normal [&amp;&gt;*:first-child]:mt-0 [&amp;&gt;*:last-child]:mb-0"><h2 class="mt-6 mb-2 font-semibold text-2xl" data-streamdown="heading-2">Test</h2>
<ul class="list-inside list-disc whitespace-normal [li_&amp;]:pl-6" data-streamdown="unordered-list">
<li class="py-1 [&amp;&gt;p]:inline" data-streamdown="list-item">hellow</li>
<li class="py-1 [&amp;&gt;p]:inline" data-streamdown="list-item">world</li>
</ul></div>

Actual Behavior

Modern models often adds unusual \n between list items. But we got broken rendering

Streamdown Version

2.5.0

React Version

19+

Node.js Version

24

Browser(s)

Chrome

Operating System

macOS

Additional Context

Reproduced in Node, browsers, nextjs etc

[istarkov]

Related
remarkjs/remark#104 (comment)

[fredimachado]

I'm actually using this components override to temporary "fix" it. I hope it's useful.

li: ({ children }: React.ComponentPropsWithoutRef<"li">) => {
    const processedChildren = React.Children.map(children, (child) => {
      if (
        React.isValidElement(child) &&
        ((typeof child.type === "string" && child.type === "p") ||
          (child.type === Object(child.type) &&
            Object(child.type).name === "p"))
      ) {
        return (child.props as React.PropsWithChildren).children;
      }
      return child;
    });
    return <li className="text-sm">{processedChildren}</li>;
  }

[istarkov]

Yes, it’s not a big issue and it can be fixed in a few ways. I just feel like it should be the default.

[Kashi-Aida]

Can we get this one fixed in the baseline version? The above patch is actually causing flickering on the Streamdown responses in many cases when bullets and numbering are a part of extra long responses.

[Kashi-Aida]

Any updates on this github issue?

[Kashi-Aida]

@istarkov have you had any luck in fixing this one? This is currently blocking for us on our use case with this component. The above fix does, although it fixes the bullet point spacing, causes unwanted artifacts during the actual response stream

[istarkov]

@Kashi-Aida In our case simple regexps are working fine

export function normalizeMarkdownLists(markdown: string): string {
  return markdown
    .replaceAll(/\n{2,}(\d+\.)/g, "\n$1")
    .replaceAll(/\n{2,}(-+\s)/g, "\n$1")
    .replaceAll(/^  (<img\b)/gm, "    $1");
}

If not here in sources exists https://github.com/vercel/streamdown/blob/main/packages/streamdown/lib/parse-blocks.tsx
which can be used to parse and then rejoin blocks omitting \n blocks.

Any AI will do that in a minute.

[Kashi-Aida]

The above fix isn't addressing the underlying issue with the StreamDown component which is still having the issue and should be fixed. The purpose is for the component to be a drag and drop replacement for ReactMarkdown, which is having issues with lists at the moment when rendering markdown lists.

Trying to fix at the StreamDown level via a custom renderer will result in a flickering on the response (see example Loom)

https://www.loom.com/share/58a70257d58f49e398dc3d75b93985d8

[farnabaz]

Do you use Tailwind CSS? Streamdown’s UI and components are styled with Tailwind CSS. If you check the li element, you’ll see [>p]:inline, which adds display: inline to paragraphs inside li tags and removes the extra margins.

Since Streamdown heavily depends on Tailwind CSS, I would suggest using it with Tailwind CSS, or at least adding important classes like [>p]:inline.

---

These paragraphs and how they appear or disappear are the default behavior of remark, quoted from [CommonMark](https://spec.commonmark.org/0.31.2/#lists):

A list is loose if any of its constituent list items are separated by blank lines, or if any of its constituent list items directly contain two block-level elements with a blank line between them. Otherwise a list is tight.

The purpose of this rule is … empty lines between list items create “loose” lists, in which each list item is wrapped in a <p> tag.

- one

- two

this will create

<li><p>one</p></li>
<li><p>two</p></li>

But

- one
- two

this will create

<li>one</li>
<li>two</li>