Repolode
Submit
vercel

vercel/streamdown

A drop-in replacement for react-markdown built for rendering streaming Markdown from AI models, including incomplete blocks.

View on GitHubWebsite
Stars
5,711
Forks
315
Open issues
44
Last commit
14 hours ago

What is it?

Streamdown is a React Markdown renderer designed for content that arrives token by token, such as responses from AI models. Standard Markdown renderers often display broken formatting while text is still streaming in, for example an unclosed code fence or a half-written table. Streamdown is built to handle incomplete and unterminated Markdown blocks so the output stays readable as it grows.

It can be used as a drop-in replacement for react-markdown. Its feature set includes GitHub Flavored Markdown (tables, task lists, strikethrough), LaTeX math rendered with KaTeX, Mermaid diagrams with a button to render them, and Shiki-based code highlighting. Security is handled with rehype-harden, and rendering is memoized to reduce work on updates.

Streamdown powers the AI Elements Message component of the AI SDK and can also be installed as a standalone npm package. Styling relies on Tailwind and shadcn/ui-style CSS custom properties, which the setup guide covers.

Key features

  • 01Drop-in replacement for react-markdown
  • 02Handles incomplete and unterminated Markdown while streaming
  • 03GitHub Flavored Markdown tables, task lists and strikethrough
  • 04LaTeX math rendering via KaTeX
  • 05Mermaid diagrams with a button to render them
  • 06Code syntax highlighting with Shiki

Use cases

  • Rendering chat responses from LLMs in a React or Next.js app
  • Showing AI-generated answers that include code, tables and math
  • Displaying Mermaid diagrams produced by an AI assistant

Quick start

  1. 1

    Install the package

    npm i streamdown
  2. 2

    Add the Tailwind @source line to your globals.css

  3. 3

    Render streaming Markdown with the Streamdown component in your React app

Things to know

  • The license is not clearly specified in the project metadata.
  • Styling requires Tailwind CSS and shadcn/ui-style CSS custom properties to render correctly.

Topics

#markdown#react#streaming#llm#streaming-markdown#syntax-highlighting#katex#ai

FAQ

What is streamdown?
A drop-in replacement for react-markdown built for rendering streaming Markdown from AI models, including incomplete blocks. Streamdown is a React Markdown renderer designed for content that arrives token by token, such as responses from AI models. Standard Markdown renderers often display broken formatting while text is still streaming in, for example an unclosed code fence or a half-written table. Streamdown is built to handle incomplete and unterminated Markdown blocks so the output stays readable as it grows.
Is streamdown free to use? What license does it have?
streamdown is open source under the Other license. Check the license terms before using it in commercial products.
Is streamdown still maintained?
Actively maintained. The last commit to streamdown was on Oct 19, 2026.
What can I use streamdown for?
Rendering chat responses from LLMs in a React or Next.js app Showing AI-generated answers that include code, tables and math Displaying Mermaid diagrams produced by an AI assistant
How do I install streamdown?
Install the package: npm i streamdown Add the Tailwind @source line to your globals.css Render streaming Markdown with the Streamdown component in your React app
Where can I get streamdown?
The source code and installation instructions are on GitHub: https://github.com/vercel/streamdown

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects