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 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 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 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/*.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.

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:

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.