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.