streamdown

Render streaming Markdown with incomplete syntax handling and code highlighting.

5|Updated Jan 26, 2026
One-click install
npx skills add https://github.com/BjornMelin/dev-skills --skill streamdown-bjornmelin
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: streamdown
Source: https://github.com/BjornMelin/dev-skills/tree/main/skills/streamdown
Command: npx skills add https://github.com/BjornMelin/dev-skills --skill streamdown-bjornmelin

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Streamdown addresses the challenge of rendering AI-generated Markdown content in streaming interfaces, gracefully handling incomplete syntax and preserving UX quality.

Core Features & Use Cases

  • Streaming Markdown rendering with a remend preprocessor to manage incomplete blocks
  • Support for code highlighting (Shiki), diagrams (Mermaid), math (KaTeX), and secure content via rehype-harden
  • Use cases include AI chat UIs, live documentation rendering, and dynamic content streaming

Quick Start

Install streamdown and wrap your content with the Streamdown component to render streaming Markdown in your AI UI.

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 an AI chat UI without breaking incomplete syntax?

Rendering streaming Markdown in AI chat UIs requires safely handling incomplete syntax. A remend preprocessor manages partial blocks gracefully, preserving UX quality during real-time content streaming.

What is the best way to display AI-generated Markdown with code highlighting and diagrams?

Streaming Markdown rendering supports code highlighting via Shiki, diagrams via Mermaid, and math via KaTeX. This allows AI chat UIs to display rich content dynamically as it streams.

Does this streaming Markdown approach work with React for live documentation rendering?

Yes, streaming Markdown rendering works with React for live documentation. You wrap your content with the streaming component to render AI-generated Markdown dynamically across web apps.

Why does my Markdown rendering break when streaming AI-generated content?

Markdown rendering breaks during streaming because AI-generated content often contains incomplete syntax blocks. A remend preprocessor intercepts and manages these partial blocks to prevent rendering failures.

Can I configure rendering options and safety plugins for streaming Markdown?

Yes, streaming Markdown rendering supports configurable rendering options and safety plugins. Secure content handling is achieved via rehype-harden, ensuring safe rendering of dynamic AI-generated content.

Do I need YAML frontmatter to use streaming Markdown in my web app?

Yes, implementing streaming Markdown requires YAML frontmatter with name and description in SKILL.md. Optional resources can be included in references, scripts, or assets directories alongside safety plugins.