Getting Started

This page takes you from install to a streaming message with tables and math in a few minutes. New to the problem Streamdown solves? Read the Introduction first.

Requirements

• react and react-dom ^19 (peer dependencies).
• An ESM toolchain: the package ships ESM only.

It includes a 'use client' boundary, so it renders from React Server Component frameworks without extra wiring.

Installation

pnpm add @lobehub/streamdown

Render a stream

Pass the markdown received so far as content and re-render as chunks arrive. There is nothing to reset between chunks: Streamdown keeps finished blocks cached and only re-lexes the open tail.

import { Streamdown } from "@lobehub/streamdown";

export const Message = ({ content }: { content: string }) => (
  <Streamdown content={content} />
);

Add GFM and math

Plugins are passed through to react-markdown. When you render math, enable latexGuard so a half-arrived formula keeps the previous frame instead of flashing raw source.

import { Streamdown } from "@lobehub/streamdown";
import rehypeKatex from "rehype-katex";
import remarkGfm from "remark-gfm";
import remarkMath from "remark-math";
import "katex/dist/katex.min.css";

export const Message = ({ content }: { content: string }) => (
  <Streamdown
    content={content}
    latexGuard
    rehypePlugins={[rehypeKatex]}
    remarkPlugins={[remarkGfm, remarkMath]}
  />
);

Style it

Streamdown ships no stylesheet, so the output inherits your typography. Swap elements such as pre through components; see Components & Plugins.

Next steps

• Usage: connect a real stream, or move over from react-markdown
• Incomplete Markdown, Block Memoization, Smooth Reveal and Animation: what happens to each chunk
• Code Fences and LaTeX: rich content while it streams
• Streamdown API and the Playground
• Streamdown Profiler: measure commit cost in your app