The @streamdown/math plugin renders mathematical expressions using KaTeX.

• Fast LaTeX rendering (2-3x faster than MathJax)
• Inline and block math support
• MathML output for accessibility
• Configurable error color and single-dollar syntax

Tailwind v4

Add the following @source directive to your globals.css or main CSS file:

@source "../node_modules/@streamdown/math/dist/*.js";

The path must be relative from your CSS file to the node_modules folder containing @streamdown/math. In a monorepo, adjust the number of ../ segments to reach the root node_modules.

Tailwind v3

Add @streamdown/math to your content array in tailwind.config.js:

module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./node_modules/@streamdown/math/dist/*.js",
  ],
  // ... rest of your config
};

In a monorepo, adjust the path to reach the root node_modules:

module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "../../node_modules/@streamdown/math/dist/*.js",
  ],
  // ... rest of your config
};

import { math } from '@streamdown/math';
import 'katex/dist/katex.min.css';

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

Streamdown uses double dollar signs ($$) to delimit mathematical expressions. Unlike traditional LaTeX, single dollar signs ($) are not used by default to avoid conflicts with currency symbols in regular text.

Inline Math

Wrap inline mathematical expressions with $$:

The quadratic formula is $$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$ for solving equations.

Renders as: The quadratic formula is x=−b±b2−4ac2ax = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} for solving equations.

Block Math

For display-style equations, place $$ delimiters on separate lines:

This renders the equation centered and larger:

E=mc2E = mc^2

Fractions

$$\frac{numerator}{denominator}$$

Example: 12\frac{1}{2}, a+bc−d\frac{a + b}{c - d}

Square Roots

$$\sqrt{x}$$ or $$\sqrt[n]{x}$$

Example: 16=4\sqrt{16} = 4, 273=3\sqrt[3]{27} = 3

Exponents and Subscripts

$$x^2$$ or $$x_i$$ or $$x_i^2$$

Example: a2+b2=c2a^2 + b^2 = c^2, x1,x2,…,xnx_1, x_2, \ldots, x_n

Greek Letters

$$\alpha, \beta, \gamma, \delta, \theta, \pi, \sigma, \omega$$
$$\Gamma, \Delta, \Theta, \Pi, \Sigma, \Omega$$

Common letters: α,β,γ,δ,ϵ,π,σ,ϕ,ω\alpha, \beta, \gamma, \delta, \epsilon, \pi, \sigma, \phi, \omega

Summations

$$\sum_{i=1}^{n} i = \frac{n(n+1)}{2}$$

The sum of first nn natural numbers: ∑i=1ni=n(n+1)2\sum_{i=1}^{n} i = \frac{n(n+1)}{2}

Integrals

$$\int_{a}^{b} f(x) \, dx$$

Definite integral: ∫01x2 dx=13\int_{0}^{1} x^2 \, dx = \frac{1}{3}

Limits

$$\lim_{x \to \infty} \frac{1}{x} = 0$$

Example: lim⁡x→0sin⁡xx=1\lim_{x \to 0} \frac{\sin x}{x} = 1

Matrices

$$
\begin{bmatrix}
a & b \\
c & d
\end{bmatrix}
$$

A 2×2 matrix:

[1234]\begin{bmatrix} 1 & 2 \\ 3 & 4 \end{bmatrix}

The Quadratic Formula

$$
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
$$

x=−b±b2−4ac2ax = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

Euler's Identity

eiπ+1=0e^{i\pi} + 1 = 0

Normal Distribution

$$
f(x) = \frac{1}{\sigma\sqrt{2\pi}} e^{-\frac{1}{2}\left(\frac{x-\mu}{\sigma}\right)^2}
$$

The probability density function:

f(x)=1σ2πe−12(x−μσ)2f(x) = \frac{1}{\sigma\sqrt{2\pi}} e^{-\frac{1}{2}\left(\frac{x-\mu}{\sigma}\right)^2}

Taylor Series

$$
e^x = \sum_{n=0}^{\infty} \frac{x^n}{n!} = 1 + x + \frac{x^2}{2!} + \frac{x^3}{3!} + \cdots
$$

ex=∑n=0∞xnn!=1+x+x22!+x33!+⋯e^x = \sum_{n=0}^{\infty} \frac{x^n}{n!} = 1 + x + \frac{x^2}{2!} + \frac{x^3}{3!} + \cdots

Integration by Parts

$$
\int u \, dv = uv - \int v \, du
$$

∫u dv=uv−∫v du\int u \, dv = uv - \int v \, du

Comparison Operators

$$\leq$$ $$\geq$$ $$\neq$$ $$\approx$$ $$\equiv$$

x≤yx \leq y, a≥ba \geq b, x≠0x \neq 0, π≈3.14\pi \approx 3.14, a≡b(modn)a \equiv b \pmod{n}

Set Notation

$$\in$$ $$\notin$$ $$\subset$$ $$\subseteq$$ $$\cup$$ $$\cap$$ $$\emptyset$$

x∈Ax \in A, y∉By \notin B, A⊂BA \subset B, A∪BA \cup B, A∩BA \cap B, ∅\emptyset

Logic Symbols

$$\land$$ $$\lor$$ $$\neg$$ $$\implies$$ $$\iff$$ $$\forall$$ $$\exists$$

p∧qp \land q, p∨qp \lor q, ¬p\neg p, p  ⟹  qp \implies q, p  ⟺  qp \iff q, ∀x\forall x, ∃y\exists y

Calculus Notation

$$\frac{dy}{dx}$$ $$\frac{\partial f}{\partial x}$$ $$\nabla$$ $$\infty$$

Derivative: dydx\frac{dy}{dx}, Partial: ∂f∂x\frac{\partial f}{\partial x}, Gradient: ∇f\nabla f, Infinity: ∞\infty

Custom Error Color

Customize how errors are displayed using createMathPlugin:

import { Streamdown } from 'streamdown';
import { createMathPlugin } from '@streamdown/math';
import 'katex/dist/katex.min.css';

const math = createMathPlugin({
  errorColor: '#dc2626',
});

export default function Page() {
  return (
    <Streamdown plugins={{ math }}>
      {markdown}
    </Streamdown>
  );
}

Complete Configuration Example

import { Streamdown } from 'streamdown';
import { createMathPlugin } from '@streamdown/math';
import 'katex/dist/katex.min.css';

const math = createMathPlugin({
  singleDollarTextMath: true, // Enable $...$ syntax (default: false)
  errorColor: '#dc2626',      // Custom error color (default: "var(--color-muted-foreground)")
});

export default function Page() {
  return (
    <Streamdown plugins={{ math }}>
      {markdown}
    </Streamdown>
  );
}

Get CSS Path

Use getStyles() to get the CSS path programmatically:

import { math } from '@streamdown/math';

const cssPath = math.getStyles?.();
// "katex/dist/katex.min.css"

Incomplete Equations

Streamdown's unterminated block parser handles incomplete equations gracefully:

During streaming, the parser detects the incomplete block-level equation and adds the closing $$ delimiter, ensuring proper rendering even before the equation is complete.

Inline vs Block Detection

The parser distinguishes between inline and block math:

• Inline: E=mc2E = mc^2 (same line)
• Block: Separate lines with newlines

This is inline $$E = mc^2$$ math.

$$
E = mc^2
$$

This is block math.

Escaping Backslashes

In JavaScript/TypeScript strings, backslashes need to be escaped:

// ❌ Wrong
const markdown = "$\frac{1}{2}$";

// ✅ Correct
const markdown = "$$\\frac{1}{2}$$";

// ✅ Or use template literals
const markdown = `$$\frac{1}{2}$$`;

Currency vs Math

Streamdown uses $$ for math to avoid conflicts with currency:

This item costs $5 and that one costs $10. (These are currency symbols)

This equation $$x = 5$$ is mathematical notation. (This is math)

Spacing in Equations

Use \, for thin space, \: for medium space, \; for thick space:

Better spacing: ∫f(x) dx\int f(x) \, dx

Mathematical expressions rendered by KaTeX include:

• MathML - Machine-readable math representation
• Title Attributes - LaTeX source in tooltips
• Semantic HTML - Proper structure for screen readers
• Scalable Typography - Math scales with text size settings

The Math plugin implements the MathPlugin interface:

interface MathPlugin {
  name: "katex";
  type: "math";
  remarkPlugin: Pluggable;  // remark-math for parsing
  rehypePlugin: Pluggable;  // rehype-katex for rendering
  getStyles?: () => string; // Returns "katex/dist/katex.min.css"
}

Keep Equations Readable

Break complex equations into steps:

Start with the equation:

$$
f(x) = ax^2 + bx + c
$$

Complete the square:

$$
f(x) = a\left(x + \frac{b}{2a}\right)^2 + c - \frac{b^2}{4a}
$$

Add Context

Explain your equations:

The Pythagorean theorem states that for a right triangle:

$$
a^2 + b^2 = c^2
$$

where $$a$$ and $$b$$ are the legs and $$c$$ is the hypotenuse.

Use Block Math for Complex Expressions

Reserve inline math for simple expressions:

✅ Good: The slope is $$m = \frac{y_2 - y_1}{x_2 - x_1}$$

❌ Avoid: $$\int_{-\infty}^{\infty} e^{-x^2} \, dx = \sqrt{\pi}$$ in the middle of text

✅ Better:

$$
\int_{-\infty}^{\infty} e^{-x^2} \, dx = \sqrt{\pi}
$$

• KaTeX Documentation - Complete list of supported functions
• KaTeX Support Table - Feature compatibility
• LaTeX Math Symbols - Symbol reference

• Typography - Text styling that complements mathematical content
• Unterminated Block Parsing - How streaming works with equations
• GitHub Flavored Markdown - Extended Markdown features