106.9K+Download
Skip to the usage guide
Streamdownby vercel

Streamdown Skill.

Render streaming Markdown with diagrams, code and explicit content controls.

  • Streaming Markdown
  • React
Download OpenDesignView Usage Guide
Source Review · streamdownSKILL.md
Task Render streaming Markdown with diagrams, code and explicit content controls. Produces A Streamdown renderer connected to the application's Markdown content. Before You Start Start with the React application's message format, Tailwind version and required Markdown features. Choose plugins and content controls before wiring the active response's streaming state.
Editorial summary · source reviewed 2026-11-02 · not a generated example

01 What It Does

Render streaming Markdown with diagrams, code and explicit content controls

Configure Streamdown for AI responses, syntax highlighting, Mermaid, math and CJK text, with Tailwind setup and content-safety controls.

Source-based workflowNot an execution benchmark

The Working Approach

Streamdown helps an agent integrate a React Markdown renderer built for content that arrives progressively. It covers streaming and static modes, code highlighting, diagrams, mathematical notation and CJK text. The skill also explains the controls around rendered content, including copy actions, links and custom element handling.

Its practical value is in the integration details that are easy to overlook. The source calls out Tailwind scanning of package files, KaTeX styles for math and the relationship between a streaming caret and the isAnimating flag. Optional plugins are added according to the content the interface actually needs.

Expected Deliverables

  • A Streamdown renderer connected to the application's Markdown content.
  • Plugin and Tailwind configuration matched to the installed packages.
  • Explicit choices for link confirmation, allowed elements and interactive controls.
See the Example Brief

From Brief to Review

  1. 01
    Choose the content capabilities

    Identify whether responses need code, Mermaid, math or CJK support. Select streaming mode for incremental answers or static mode for complete documents.

  2. 02
    Configure rendering and styles

    Install the selected packages and include their distribution files in Tailwind scanning. Tailwind v4 uses @source directives; v3 uses content entries in its configuration. Add paths only for installed plugins. Import KaTeX CSS when using math, then connect the renderer to the current message shape.

  3. 03
    Check streaming and safety behavior

    Set animation state for the active answer and review custom HTML, URL handling and link confirmation. Inspect both incomplete responses and the finished content.

02 When to Use It

When to Use It

Start with the React application's message format, Tailwind version and required Markdown features. Choose plugins and content controls before wiring the active response's streaming state.

A Good Fit

  • Progressive answersAn AI chat view renders formatted answers while tokens arrive.
  • Formatted documentsA React document view needs Markdown plus selectable diagram or math support.

Limits to Check

  • Application-owned backendThe application still owns its AI endpoint and message lifecycle.
  • Version compatibilityThe documented examples require adapting to the application's installed SDK versions.
  • Integration verificationPlugin styles and content controls need verification in the target application.

Bring These Inputs

  • Markdown contentThe stream or complete Markdown string to render.
  • Selected dependenciesThe selected plugins and installed Tailwind version.
  • Content controlsThe project's link, HTML and download-control requirements.

03 Decisions That Matter

Decisions That Matter

  1. Two rendering modes

    Static and streaming modes share one renderer integration.

  2. Selective plugins

    Content capabilities can be selected without enabling every optional plugin.

  3. Concrete setup checks

    Documented setup checks target missing styles, math and streaming-caret problems.

04 Try a Focused Brief

Try a Focused Brief

The example brief below has not been tested. Check the skill’s setup before using it.

Review the Source and Setup

The stream or complete Markdown string to render.

Upstream Source File
https://github.com/vercel/streamdown/blob/7dcabc64df944edce6f3993732667652e6214af0/skills/streamdown/SKILL.md

The reference below opens the upstream instructions. Review the repository setup before using them; it is not an installation command.

Start With One Deliverable

Adapt the scope, source material and constraints in this brief before running the skill.

Example Brief
Use streamdown for the assistant response area in our React application. Inspect the installed AI SDK and Tailwind versions before adapting any example. We need highlighted code and Mermaid diagrams, but no math plugin in this pass. Configure package scanning, preserve the current theme, and make the streaming indicator apply only to the active answer. Keep link confirmation enabled. Preview incomplete Markdown, a finished diagram and a long code block, then report configuration changes and any controls that have not been tested.

Inspect the Result

Check the actual output against these observable criteria.

  • Selected plugin styles are included and uninstalled plugin paths are absent.
  • The caret appears only with the intended animation state.
  • Links, code controls and diagrams behave correctly for completed and partial content.

OpenDesign provides a local design workspace for coding agents. This listing does not mean the skill is bundled or that its external tools, credentials and software dependencies are included.

Download OpenDesignRead the Quickstart

05 Source and License

Source and License

This page describes the pinned source revision linked below. Upstream behavior and requirements can change.

Source Owner
vercel
Repository
vercel/streamdown
Skill File
SKILL.md
License
Apache-2.0
Reviewed Snapshot
2026-11-02 · 7dcabc64df94
Editorial Source Summary
Render streaming Markdown with diagrams, code and explicit content controls.

Original summary by OpenDesign, based on the linked source. Repository stars are a dated popularity signal, not skill usage or a quality score.

06 Questions Before You Start

Questions Before You Start

Can it render ordinary documents?

Yes. The source includes a static mode for complete Markdown such as documentation or blog content.

Why is the caret missing?

The documented configuration requires both a caret style and isAnimating set to true.

Does installing math support finish its setup?

The source also requires the KaTeX stylesheet. Its default math handling uses double-dollar notation to avoid currency conflicts.

Why is the copy button disabled while an answer arrives?

The documented controls disable copying while isAnimating is true. Set that flag only for the active streaming answer and clear it when the response finishes; otherwise completed messages can retain the streaming state.

OpenDesign

Keep Your Brief and Design Work Together.

Keep your brief, source material and design work together in a local workspace. Check the skill’s own setup before adding it to your workflow.

Download OpenDesignBrowse Design Skills
Upstream Source File
https://github.com/vercel/streamdown/blob/7dcabc64df944edce6f3993732667652e6214af0/skills/streamdown/SKILL.md