---
title: FAQ
description: Common questions about Streamdown and how it works with AI-powered streaming applications.
type: troubleshooting
summary: Answers to common questions about compatibility, performance, and streaming behavior.
related:
  - /docs/getting-started
  - /docs/configuration
---

# 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 integrates with the [remend](https://www.npmjs.com/package/remend) preprocessor to handle incomplete markdown syntax, which means it can render markdown gracefully 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 uses the [remend](https://www.npmjs.com/package/remend) package to preprocess the markdown before rendering. Remend automatically detects and completes common issues in incomplete markdown like unclosed bold/italic markers, incomplete links, and partial code blocks. This preprocessing ensures smooth rendering even as markdown is being streamed from AI models. You can also use remend as a standalone package in your own projects.

## 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 `remarkGfm` by default, and supports additional plugins like `@streamdown/math` and `@streamdown/mermaid` through the `plugins` prop. You can also add custom remark and rehype plugins 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`:

```tsx title="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`:

```tsx title="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:

```css title="globals.css"
@source "../node_modules/streamdown/dist/*.js";
```

If you install optional plugins, add their matching `@source` lines only for packages you've installed. See the plugin pages for exact paths and examples:

* Code: [/docs/plugins/code](/docs/plugins/code)
* CJK: [/docs/plugins/cjk](/docs/plugins/cjk)
* Math: [/docs/plugins/math](/docs/plugins/math)
* Mermaid: [/docs/plugins/mermaid](/docs/plugins/mermaid)

Example: to include the code plugin, add this to `globals.css` (adjust the relative path as needed):

```css title="globals.css"
@source "../node_modules/@streamdown/code/dist/*.js";
```

### Tailwind v3

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

```js title="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.

## Why do I get `Module not found: Can't resolve 'vscode-jsonrpc'` errors with Next.js?

If you run into bundling errors related to `vscode-jsonrpc`, `langium`, or other Node.js-only packages when using Streamdown with Next.js/Turbopack, this is due to Mermaid's dependency tree including server-side packages. To fix this, configure Next.js to exclude these packages from client-side bundling:

```js title="next.config.js"
export default {
  serverComponentsExternalPackages: ['langium', '@mermaid-js/parser'],

  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.resolve.alias = {
        ...config.resolve.alias,
        'vscode-jsonrpc': false,
        'langium': false,
      };
    }
    return config;
  },
};
```

This tells Next.js not to bundle these Node.js-only dependencies for the browser. This is an upstream issue being tracked in the [Mermaid repository](https://github.com/mermaid-js/mermaid/issues/7094).


---

For a semantic overview of all documentation, see [/sitemap.md](/sitemap.md)

For an index of all available documentation, see [/llms.txt](/llms.txt)

For agent-facing discovery, including API and MCP surfaces, see [/agents.md](/agents.md)