vercel/streamdown
Streamdown
Streamdown is a streaming markdown renderer for React that transforms incoming markdown text into sanitized HTML in real time, handling incomplete blocks as they arrive. It parses GitHub-Flavored Markdown syntax including tables, task lists, and footnotes, and renders LaTeX math expressions using KaTeX, Mermaid diagrams as interactive SVGs, and code blocks with Shiki-based syntax highlighting supporting over 200 languages with dual light and dark themes. The renderer includes an XSS-safe HTML sanitizer that strips dangerous tags and validates URLs to prevent injection attacks.
What distinguishes Streamdown is its streaming-first architecture: it parses markdown into blocks as tokens arrive, detecting and completing unterminated fences and math delimiters so partial content appears styled immediately without waiting for the full document. Deferred diagram rendering delays Mermaid SVG generation until the code block is complete, preventing flicker during streaming, while a memoized block cache updates only changed blocks to avoid full re-renders. The component override system lets developers replace any standard HTML element with a custom React component, and the plugin pipeline supports custom rehype and remark plugins for extended transformations.
The renderer provides interactive controls including hover-activated copy buttons and download menus on code blocks, a blinking caret indicator during active streaming, and a confirmation modal for external links. It supports configurable HTML sanitization with allow and deny lists, URL protocol and domain restrictions, image source restrictions, and trusted domain safelisting. Performance optimizations include lazy-loaded syntax highlighters, internal render memoization, and caching of parsed tokens and highlighter instances.
Features
- Real-Time Streaming Renderers - Transforms incoming markdown text streams into sanitized HTML components with real-time rendering of incomplete blocks.
- Streaming Block Parsers - Parses markdown into blocks as tokens arrive, handling incomplete fences and math delimiters without waiting for the full document.
- HTML Element Filters - Controls which HTML elements appear in the output by whitelisting, blacklisting, or applying custom filter functions.
- Markdown-to-HTML Transpilers - Transforms incoming markdown text into sanitized HTML, handling incomplete blocks and partial content as it arrives.
- GitHub Flavored - Parses GFM syntax including tables, task lists, strikethrough, autolinks, and footnotes from streaming content.
- Markdown Renderers - Renders tables, task lists, strikethrough, autolinks, and footnotes from incoming markdown streams.
- Partial Stream Parsing - Parses incomplete Markdown blocks as they arrive and applies progressive formatting so partial content appears styled immediately.
- Incomplete Code Block Streaming - Displays partially streamed code blocks gracefully, rendering content before closing backticks arrive.
- Incomplete Markdown Syntax Handling - Detects unterminated Markdown tokens and completes them automatically to prevent broken rendering during streaming.
- Mermaid Diagram Renderers - Renders text-based Mermaid diagrams as interactive SVGs with fullscreen, download, and copy controls.
- Deferred Diagram Renderers - Delays Mermaid SVG generation until the code block is complete, preventing flicker during streaming.
- Deferred Diagram Rendering - Defers Mermaid rendering until the code block is complete during streaming, preventing flicker and re-rendering on partial content.
- LaTeX Math Rendering - Renders LaTeX mathematical notation into fast, accessible HTML using KaTeX, supporting both inline and block equations.
- HTML Content Sanitization - Strips dangerous HTML tags and validates URLs to prevent XSS attacks in rendered markdown output.
- XSS Protections - Strips dangerous elements and attributes from rendered output using configurable allow or deny lists.
- Built-in Markdown Plugins - Supports GFM, KaTeX math, raw HTML, and CJK-friendly rendering without extra plugin installations.
- Markdown Plugin Pipelines - Processes markdown through a configurable chain of unified rehype and remark plugins for extensible transformations.
- Component Override Systems - Provides a mechanism to replace standard HTML elements with custom React components via configuration.
- Markdown Renderers - Configures syntax highlighting themes, custom components, and allowed HTML tags for streaming markdown rendering.
- Markdown Table Rendering - Formats tabular data with column alignment options, producing structured HTML tables from pipe-delimited markdown.
- Component Overrides - Allows replacing any of the standard HTML elements rendered from markdown with a custom React component.
- Raw HTML Rendering - Preserves inline HTML tags intact and renders them directly within the markdown output.
- Syntax Highlighters - Applies Shiki-based syntax highlighting to code blocks with 200+ languages and dual light/dark themes.
- Lazy-Loaded - Loads syntax highlighting themes and languages on demand, caching each highlighter instance for reuse across code blocks.
- Shiki - Applies automatic syntax highlighting to code blocks using Shiki with support for 200+ languages and dual themes.
- Parsed Block Caching - Caches parsed and rendered blocks by content hash, updating only changed blocks to avoid full re-renders.
- Streaming Caret Indicators - Displays a blinking visual indicator during active streaming to signal that content is still being generated.
- Interactive Task Lists - Converts checkbox-style markdown lists into clickable todo items that users can check off.
- Code Block Copy and Download Controls - Provides hover-activated copy buttons and download menus on code blocks for easy content reuse.
- Code Block Styling - Configures line numbers, start line offset, dual light/dark themes, and responsive styling for code blocks.
- Markdown Plugin Array Customizations - Allows replacing or extending the default set of processing plugins by supplying a custom plugin array.
- Incomplete Equation Handling - Detects and closes unterminated block-level math delimiters during streaming for correct partial equation rendering.
- HTML Allowlists - Permits specific unknown HTML tags in rendered output while stripping all attributes not explicitly listed.
- Incomplete Code Fence Detection - Provides a hook to check if the current code block is still being streamed, enabling a loading state.
- Unified Plugin Pipelines - Attaches rehype and remark plugins for custom transformations, security hardening, and extended syntax support.
- Custom Block Parsing Overrides - Allows overriding how the markdown stream is split into blocks and how each block is rendered by supplying custom parsing and component logic.
- Streaming State Transitions - Updates rendered output from incomplete to complete states without visual jumps or layout shifts.
- Custom Component Tags - Accepts a list of allowed custom HTML tags so structured data from AI responses renders as interactive components.
- Phrase Line Break Preservers - Preserves single newlines within paragraphs as spaces, combining lines into one paragraph unless forced breaks are used.
- Prose Typography Styling - Applies prebuilt typographic styles to paragraphs, headings, and lists from rendered markdown.
- Interactive Content Controls - Adds hover-activated copy buttons, download menus, and link-confirmation modals to rendered markdown elements.
- Token and Highlighter Caches - Caches tokens, lazy-loads syntax highlighters, and skips animation when not needed to reduce processing overhead.
- Strikethrough Text Decorations - Displays text with a horizontal line through it to indicate deletion or outdated content.
- Memoized Rendering - Caches rendered output to avoid unnecessary re-renders, eliminating the need for manual memoization wrappers.
- Feature Toggles - Enables or disables Mermaid diagrams, animation controls, link safety checks, and UI icons through dedicated configuration props.
- Block-Level Content Caches - Prevents unnecessary re-renders by caching parsed blocks and only updating blocks whose content has changed during streaming.
- Streaming Content Animations - Imports animation CSS to enable the built-in animated prop for streaming markdown rendering.
