streamdown: Render Markdown During AI Streaming

Overview

Streamdown is a React Markdown renderer for applications that display AI-generated text as it arrives. Unlike a renderer aimed only at complete documents, it is designed to format partial Markdown gracefully, including blocks that have not been closed yet.

It suits teams building chat interfaces or other streaming experiences with React. Use it when incremental rendering is central to the interface; for static Markdown, a conventional renderer may be sufficient. The project also powers the AI Elements Message component and is available as a standalone package.

Key Features

• Drop-in replacement for react-markdown in React projects.
• Handles incomplete and unterminated Markdown during streaming.
• Supports GitHub Flavored Markdown features such as tables, task lists, and strikethrough.
• Optional rendering plugins provide LaTeX math, Mermaid diagrams, and code syntax highlighting.
• Uses rehype-harden for security-focused rendering.
• Offers memoized rendering to support efficient updates.
• Supports custom components and fallback rendering for tags without built-in renderers.

Use Cases

• React chat interfaces that render model responses while they are still streaming.
• AI product teams that need formatted tables, equations, or code in live responses.
• Developers building streaming interfaces who want Markdown rendering without waiting for a complete response.
• Applications that need custom rendering for selected Markdown or allowed HTML tags.

Project Facts

• Language: TypeScript
• License: NOASSERTION
• Stars: 5.7k
• Forks: 305
• Topics: ai, markdown, streaming
• Archived: No

Getting Started

Install the package:

npm i streamdown

See the README and documentation for setup details, styling, and plugin configuration.

Alternatives

• x: Ant Design X is a broader AI interface toolkit with conversation components and streaming utilities, while Streamdown focuses on rendering streaming Markdown.

Considerations

• This is a React package, so it is intended for React applications rather than framework-agnostic Markdown rendering.
• Tailwind CSS users need to configure source paths so Tailwind detects Streamdown's utility classes. Optional plugins may need their own source entries.
• Some components rely on shadcn/ui CSS custom properties. Projects without those variables may need to define them.
• The supplied license value is NOASSERTION, so verify licensing requirements before adopting it.