gen-streamdown

A customized fork of streamdown - a drop-in replacement for react-markdown, designed for AI-powered streaming.

Overview

Formatting Markdown is easy, but when you tokenize and stream it, new challenges arise. This package is a customized fork of Streamdown, built specifically to handle the unique requirements of streaming Markdown content from AI models, providing seamless formatting even with incomplete or unterminated Markdown blocks.

This fork maintains all the features of the original streamdown package while allowing for customizations and extensions.

Features

• 🚀 Drop-in replacement for react-markdown
• 🔄 Streaming-optimized - Handles incomplete Markdown gracefully
• 🎨 Unterminated block parsing - Build with remend for better streaming quality
• 📊 GitHub Flavored Markdown - Tables, task lists, and strikethrough support
• 🔢 Math rendering - LaTeX equations via KaTeX
• 📈 Mermaid diagrams - Render Mermaid diagrams as code blocks with a button to render them
• 📊 Vega-Lite charts - Render interactive Vega-Lite charts from JSON specs
• 🎯 Code syntax highlighting - Beautiful code blocks with Shiki
• 🛡️ Security-first - Built with rehype-harden for safe rendering
• ⚡ Performance optimized - Memoized rendering for efficient updates
• 🎨 Customizable - Fork allows for custom components and styling

Installation

Install using your preferred package manager:

# npm
npm install gen-streamdown

# pnpm
pnpm add gen-streamdown

# yarn
yarn add gen-streamdown

# bun
bun add gen-streamdown

Peer Dependencies

Make sure you have React installed (required peer dependency):

# npm
npm install react

# pnpm
pnpm add react

# yarn
yarn add react

# bun
bun add react

Optional Dependencies

For full functionality, you may also want to install optional plugins:

# npm
npm install @streamdown/code @streamdown/math @streamdown/mermaid @streamdown/cjk

# pnpm
pnpm add @streamdown/code @streamdown/math @streamdown/mermaid @streamdown/cjk

# yarn
yarn add @streamdown/code @streamdown/math @streamdown/mermaid @streamdown/cjk

# bun
bun add @streamdown/code @streamdown/math @streamdown/mermaid @streamdown/cjk

Then, update your Tailwind globals.css to include the following so that Tailwind can detect the utility classes used by gen-streamdown.

@source "../node_modules/gen-streamdown/dist/*.js";

The path must be relative from your CSS file to the node_modules folder containing gen-streamdown. In a standard Next.js project where globals.css lives in app/, the default path above should work.

Monorepo setup

In a monorepo (npm workspaces, Turbo, pnpm, etc.), dependencies are typically hoisted to the root node_modules. You need to adjust the relative path to point there:

monorepo/
├── node_modules/gen-streamdown/  ← hoisted here
├── apps/
│   └── web/
│       └── app/
│           └── globals.css   ← your CSS file

/* apps/web/app/globals.css → 3 levels up to reach root node_modules */
@source "../../../node_modules/gen-streamdown/dist/*.js";

Adjust the number of ../ segments based on where your CSS file lives relative to the root node_modules.

Usage

Here's how you can use gen-streamdown in your React application:

import { Streamdown } from "gen-streamdown";
import { code } from "@streamdown/code";
import { mermaid } from "@streamdown/mermaid";
import { math } from "@streamdown/math";
import { cjk } from "@streamdown/cjk";
import "katex/dist/katex.min.css";
import "gen-streamdown/styles.css";

export default function Chat() {
  const [content, setContent] = useState("");

  return (
    <div>
      <Streamdown
        animated
        plugins={{ code, mermaid, math, cjk }}
        isAnimating={true}
      >
        {content}
      </Streamdown>
    </div>
  );
}

With AI SDK

import { useChat } from "@ai-sdk/react";
import { Streamdown } from "gen-streamdown";
import { code } from "@streamdown/code";
import { mermaid } from "@streamdown/mermaid";
import { math } from "@streamdown/math";
import { cjk } from "@streamdown/cjk";
import "katex/dist/katex.min.css";
import "gen-streamdown/styles.css";

export default function Chat() {
  const { messages, status } = useChat();

  return (
    <div>
      {messages.map(message => (
        <div key={message.id}>
          {message.role === 'user' ? 'User: ' : 'AI: '}
          {message.parts.map((part, index) =>
            part.type === 'text' ? (
              <Streamdown
                key={index}
                animated
                plugins={{ code, mermaid, math, cjk }}
                isAnimating={status === 'streaming'}
              >
                {part.text}
              </Streamdown>
            ) : null,
          )}
        </div>
      ))}
    </div>
  );
}

Vega-Lite Charts

To render Vega-Lite charts, use a code block with language vega-lite:

```vega-lite
{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple bar chart",
  "data": {
    "values": [
      {"a": "A", "b": 28},
      {"a": "B", "b": 55},
      {"a": "C", "b": 43}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "a", "type": "ordinal"},
    "y": {"field": "b", "type": "quantitative"}
  }
}
```

The code block content should be a valid Vega-Lite JSON specification. The chart will be rendered automatically.

Customization

This fork allows you to customize components and styling. You can:

• Modify components in the lib/ directory
• Extend the component system for your use case
• Customize styling through CSS variables and Tailwind config

Original Package

This is a fork of streamdown by Vercel. For the original package and documentation, visit:

• Original package: streamdown on npm
• Original repository: vercel/streamdown
• Original documentation: streamdown.ai

License

Apache-2.0 (same as the original streamdown package)

Contributing

This is a customized fork. For contributions to the original streamdown project, please visit the original repository.