Streamdown

What it does

Streamdown is a drop-in replacement for react-markdown, specifically designed for AI-powered streaming. It was built to enable the streaming of safe and perfectly formatted Markdown content without complex handling, powering components like the AI Elements Response component. It can be installed and used as a standalone package, offering features like built-in typography styles, GitHub Flavored Markdown support, interactive code blocks with Shiki highlighting, mathematical expressions via LaTeX and KaTeX, interactive Mermaid diagrams, and robust security hardening against prompt injection.

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";`.

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