FAQ

Answers to frequently asked questions about using Streamdown in your projects.

What makes Streamdown different from react-markdown?

Streamdown is specifically designed for AI-powered streaming applications. It includes built-in support for incomplete markdown parsing, which means it can render markdown even while it's being generated by AI models. It also includes security features like URL prefix restrictions and better performance optimizations for streaming contexts.

Can I use custom components with Streamdown?

Yes! Streamdown fully supports custom components through the components prop, just like react-markdown. You can override any markdown element with your own React components to customize the rendering.

How does the incomplete markdown parsing work?

When parseIncompleteMarkdown is enabled (default), Streamdown automatically detects and fixes common issues in incomplete markdown like unclosed code blocks, incomplete lists, and partial formatting. This ensures smooth rendering even as markdown is being streamed from AI models.

Is Streamdown compatible with all react-markdown plugins?

Streamdown supports both remark and rehype plugins, making it compatible with most react-markdown plugins. It includes popular plugins like remarkGfm, remarkMath, and rehypeKatex by default, and you can add your own through the remarkPlugins and rehypePlugins props.

Why do I get a Package shiki can't be external warning?

This warning occurs when Next.js tries to treat Shiki as an external package. To fix this, you need to install Shiki explicitly with npm install shiki and add it to your transpilePackages array in your next.config.ts:

{
  // ... other config
  transpilePackages: ["shiki"],
}

This ensures Shiki is properly bundled with your application.

Why do I get a CSS loading error when using Streamdown with Vite SSR?

When using Streamdown with Vite and server-side rendering, you might encounter a TypeError [ERR_UNKNOWN_FILE_EXTENSION] error for CSS files (like katex.min.css). To fix this, add Streamdown to your vite.config.ts:

export default {
  // ... other config
  ssr: {
    noExternal: ['streamdown'],
  },
}

This prevents Vite from treating Streamdown as an external module during SSR, ensuring CSS files are properly processed.

How do I configure Tailwind CSS to work with Streamdown?

Tailwind v4

Add a @source directive to your globals.css file with the path to Streamdown's distribution files:

@source "../node_modules/streamdown/dist/index.js";

Tailwind v3

Add Streamdown to your content array in tailwind.config.js:

content: [
  // ... your other content paths
  "./node_modules/streamdown/dist/**/*.js",
]

Adjust the paths based on your project structure. This ensures Tailwind scans Streamdown's files for any utility classes used in the component.