streamdown

Render AI-streamed Markdown content in real-time for chat UIs.

1|Updated Oct 9, 2025
One-click install
npx skills add https://github.com/omerakben/omer-akben --skill streamdown
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: streamdown
Source: https://github.com/omerakben/omer-akben/tree/main/.claude/skills/streamdown
Command: npx skills add https://github.com/omerakben/omer-akben --skill streamdown

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Streamdown renders AI-streamed Markdown content in real-time, enabling seamless visualization of token-by-token outputs in chat UIs and AI assistants.

Core Features & Use Cases

  • Real-time streaming Markdown rendering for conversational interfaces.
  • Support for code highlighting, Mermaid diagrams, KaTeX math, and responsive layouts.
  • Useful for debugging AI-generated content, visualizing streaming outputs, and integrating Markdown rendering into dashboards or CMS-like tools.

Quick Start

Use the Streamdown component in your React app to render streaming Markdown content. Example: <Streamdown isAnimating={true}># Welcome</Streamdown>

Frequently Asked Questions about streamdown

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I render streaming Markdown in a React chat UI as tokens arrive?▼

To render streaming Markdown in a React chat UI, use a component like Streamdown to parse and progressively display token-by-token AI outputs. It handles incomplete syntax and supports code highlighting, Mermaid diagrams, and KaTeX math during streaming.

Why does my AI streaming Markdown break when rendering incomplete code blocks?▼

Streaming Markdown breaks when rendering incomplete code blocks because standard parsers expect complete syntax. Streamdown solves this by progressively parsing token-by-token outputs, allowing interactive assistants to render partial code blocks, diagrams, and math expressions smoothly.

Can I use Mermaid diagrams and KaTeX math with AI-streamed Markdown?▼

Yes, you can use Mermaid diagrams and KaTeX math with AI-streamed Markdown. Streamdown includes a plugin ecosystem that supports code highlighting, Mermaid diagram rendering, KaTeX math expressions, and CJK support for real-time streaming outputs.

What is the best way to visualize token-by-token AI responses in a dashboard?▼

The best way to visualize token-by-token AI responses in a dashboard is using a streaming Markdown renderer like Streamdown. It progressively displays AI-generated content, making it useful for debugging pipelines, dashboards, and CMS-like tools where Markdown arrives incrementally.

Does Streamdown work without external dependencies in a React application?▼

Yes, Streamdown works without external dependencies in a React application. You can use the Streamdown component directly to render streaming Markdown content, such as wrapping your text with <Streamdown isAnimating={true}># Welcome</Streamdown>.