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

Streamdown is specifically designed for AI-powered streaming applications. It integrates with the 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.

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.

When parseIncompleteMarkdown is enabled (default), Streamdown uses the 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.

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.

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.

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.

Tailwind v4

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

@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
• CJK: /docs/plugins/cjk
• Math: /docs/plugins/math
• Mermaid: /docs/plugins/mermaid

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

@source "../node_modules/@streamdown/code/dist/*.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.

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:

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.