Streamdown

Core features

• ✦Drop-in replacement for react-markdown
• ✦Designed for AI-powered streaming
• ✦Built-in typography styles with Tailwind classes
• ✦Supports GitHub Flavored Markdown (GFM)
• ✦Interactive code blocks with Shiki highlighting and copy button
• ✦Supports LaTeX mathematical expressions via remark-math and KaTeX
• ✦Supports interactive Mermaid diagrams with render button
• ✦Parses and styles unterminated Markdown blocks for prettier streaming
• ✦Built-in security hardening against prompt injection (image/link origin validation)
• ✦Customizable via props for components, allowed prefixes, plugins, and Shiki themes

Use cases

• →Rendering AI-generated streaming Markdown content in web applications
• →Building chat interfaces or response components for AI models
• →Displaying complex Markdown content with advanced features (math, diagrams, code) in React applications
• →Ensuring secure Markdown rendering from untrusted sources

How to use

To use Streamdown, you can install it directly with `npm i streamdown` or via `npx ai-elements add response`. Integrate it into your React application by using the `<Response>` component (if using AI Elements) or the Streamdown component itself to render Markdown content. Additionally, you need to update your Tailwind `globals.css` file to include Streamdown's styles by adding `@source "../node_modules/streamdown/dist/index.js";`.

FAQ