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>.