Plugins

Streamdown uses a plugin architecture to keep the core small while supporting rich features. Each plugin extends rendering capabilities for specific content types.

Plugin architecture

Plugins are passed as an object to the plugins prop. Each key maps to a plugin instance:

tsx

<Streamdown plugins={{ code, math, mermaid, cjk }}>
  {content}
</Streamdown>

@streamdown/code

Provides syntax highlighting using Shiki with support for 100+ languages and multiple themes.

bash

bun add @streamdown/code

Configuration

import { code, createCodePlugin } from "@streamdown/code"

// Use with defaults
<Streamdown plugins={{ code }}>{content}</Streamdown>

// Or customise
const customCode = createCodePlugin({
  themes: ["github-light", "github-dark"],
  defaultLanguage: "typescript",
  showLineNumbers: true,
})

@streamdown/math

Renders LaTeX mathematics using KaTeX. Supports both inline and block equations.

bash

bun add @streamdown/math katex

Configuration

import { math, createMathPlugin } from "@streamdown/math"
import "katex/dist/katex.min.css"

// Use with defaults
<Streamdown plugins={{ math }}>{content}</Streamdown>

// Or customise
const customMath = createMathPlugin({
  singleDollarTextMath: true,
  errorColor: "#dc2626",
  output: "html",
})

CSS import required

You must import katex/dist/katex.min.css for the maths plugin to render correctly. Add it to your layout or the component that uses the plugin.

@streamdown/mermaid

Renders Mermaid diagrams including flowcharts, sequence diagrams, and more.

bash

bun add @streamdown/mermaid

Usage

import { mermaid } from "@streamdown/mermaid"

const content = `
\`\`\`mermaid
graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Do something]
    B -->|No| D[Do something else]
\`\`\`
`

<Streamdown plugins={{ mermaid }}>{content}</Streamdown>

@streamdown/cjk

Improves rendering of Chinese, Japanese, and Korean text by handling line breaks and spacing correctly.

bash

bun add @streamdown/cjk

Usage

import { cjk } from "@streamdown/cjk"

<Streamdown plugins={{ cjk }}>{content}</Streamdown>

Combining plugins

All plugins work together. Simply pass them all at once:

All plugins enabled

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

export function FullRenderer({ content }: { content: string }) {
  return (
    <Streamdown plugins={{ code, math, mermaid, cjk }}>
      {content}
    </Streamdown>
  )
}