Skip to main content
The PluginConfig interface is passed to the plugins prop of the <Streamdown> component. Each field activates a specific rendering capability using a pre-built plugin package.

​
Usage

import { Streamdown } from "streamdown";
import { createCodePlugin } from "@streamdown/code";
import { createMathPlugin } from "@streamdown/math";
import { createMermaidPlugin } from "@streamdown/mermaid";
import { createCjkPlugin } from "@streamdown/cjk";

const plugins = {
  code: createCodePlugin(),
  math: createMathPlugin(),
  mermaid: createMermaidPlugin(),
  cjk: createCjkPlugin(),
};

<Streamdown plugins={plugins}>
  {markdown}
</Streamdown>

​
PluginConfig interface

​
code
CodeHighlighterPlugin
Syntax highlighting plugin. When provided, code blocks are highlighted using Shiki. See CodeHighlighterPlugin.
​
math
MathPlugin
Math rendering plugin. When provided, $...$ inline math and $$...$$ block math are rendered using KaTeX. See MathPlugin.
​
mermaid
DiagramPlugin
Diagram rendering plugin. When provided, fenced code blocks with the mermaid language identifier are rendered as SVG diagrams. See DiagramPlugin.
​
cjk
CjkPlugin
CJK text handling plugin. When provided, emphasis detection and autolink parsing are made CJK-aware to prevent garbled output in Chinese, Japanese, and Korean text. See CjkPlugin.
​
renderers
CustomRenderer[]
Array of custom renderers that override code block rendering for specific language identifiers. See CustomRenderer below.

​
CustomRenderer

A CustomRenderer maps one or more language identifiers to a React component. When a fenced code block’s language matches, the component receives the code content and renders it instead of the default CodeBlock. 
import type { CustomRenderer, CustomRendererProps } from "streamdown";

const SqlRenderer = ({ code, language, isIncomplete, meta }: CustomRendererProps) => {
  return <MySqlEditor code={code} />;
};

const renderers: CustomRenderer[] = [
  { language: "sql", component: SqlRenderer },
  { language: ["shell", "bash"], component: TerminalRenderer },
];

<Streamdown plugins={{ renderers }}>
  {markdown}
</Streamdown>
​
component
React.ComponentType<CustomRendererProps>
required
The React component used to render matching code blocks.
​
language
string | string[]
required
The language identifier (or array of identifiers) that trigger this renderer. This is matched against the language specified after the opening triple backticks.

​
CustomRendererProps

Props passed to every custom renderer component.
​
code
string
required
The raw text content of the code block, excluding the fence delimiters.
​
isIncomplete
boolean
required
true when the code block is the last block in a streaming response and its closing fence has not yet arrived. Use this to defer expensive rendering until the block is complete.
​
language
string
required
The language identifier from the opening fence (e.g. "sql", "python").
​
meta
string
The raw metastring — everything after the language identifier on the opening fence line. For example, the fence ```rust {1} title="foo" produces meta = '{1} title="foo"'. undefined when no metastring is present.

​
StreamdownPlugin union type

StreamdownPlugin is a union of all four plugin interface types. It can be used when you need to accept or pass around any Streamdown plugin generically. 
export type StreamdownPlugin =
  | CodeHighlighterPlugin
  | DiagramPlugin
  | MathPlugin
  | CjkPlugin;
Each variant can be identified by its type discriminant:
typeInterface
"code-highlighter"CodeHighlighterPlugin
"diagram"DiagramPlugin
"math"MathPlugin
"cjk"CjkPlugin

Build docs developers (and LLMs) love

Get started for freeTalk to us