KaTeX Reference

Render mathematical equations and formulas using LaTeX syntax. Provides InlineMath for equations within text and BlockMath for standalone display equations.

KaTeX is loaded from CDN on first use — no bundle size impact for apps that don't use math.

Import

import { InlineMath, BlockMath } from '@/components/ui/katex'

InlineMath

Renders a math expression inline within text.

<p>
  The quadratic formula is <InlineMath math="x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}" />.
</p>

Props

math (string, required): LaTeX math expression to render
All standard <span> HTML attributes (className, style, etc.)

BlockMath

Renders a math expression as a centered display block.

<BlockMath math="\\int_{a}^{b} f(x) \\, dx = F(b) - F(a)" />

Props

math (string, required): LaTeX math expression to render
All standard <div> HTML attributes (className, style, etc.)

Important: Escaping Backslashes

In JavaScript/TypeScript strings, backslashes must be doubled:

// Correct — double backslashes in JS strings
<InlineMath math="\\alpha + \\beta = \\gamma" />
<BlockMath math="\\sum_{i=1}^{n} i = \\frac{n(n+1)}{2}" />

// Wrong — single backslashes will be interpreted as escape sequences
<InlineMath math="\alpha + \beta = \gamma" />

Complete Example: Math Study Tool

import * as React from "react";

export default function App() {
  return (
    <div>
      <h1 className="text-2xl font-bold">Calculus Reference</h1>

      <div>
        <div>
          <h3>Derivatives</h3>
        </div>
        <div className="space-y-4">
          <p>
            The derivative of <InlineMath math="f(x) = x^n" /> is{" "}
            <InlineMath math="f'(x) = nx^{n-1}" />.
          </p>
          <BlockMath math="\\frac{d}{dx} [f(g(x))] = f'(g(x)) \\cdot g'(x)" />
        </div>
      </div>

      <div>
        <div>
          <h3>Integrals</h3>
        </div>
        <div className="space-y-4">
          <p>
            The definite integral from <InlineMath math="a" /> to{" "}
            <InlineMath math="b" />:
          </p>
          <BlockMath math="\\int_{a}^{b} f(x) \\, dx = F(b) - F(a)" />
          <p>Common integrals:</p>
          <BlockMath math="\\int x^n \\, dx = \\frac{x^{n+1}}{n+1} + C \\quad (n \\neq -1)" />
          <BlockMath math="\\int e^x \\, dx = e^x + C" />
        </div>
      </div>
    </div>
  );
}

Common LaTeX Expressions

Fractions and Roots

<InlineMath math="\\frac{a}{b}" />           // fraction
<InlineMath math="\\sqrt{x}" />              // square root
<InlineMath math="\\sqrt[3]{x}" />           // cube root

Superscripts and Subscripts

<InlineMath math="x^2" />                    // superscript
<InlineMath math="x_i" />                    // subscript
<InlineMath math="x_i^2" />                  // both

Greek Letters

<InlineMath math="\\alpha \\beta \\gamma \\delta \\epsilon" />
<InlineMath math="\\pi \\theta \\sigma \\omega \\lambda" />
<InlineMath math="\\Sigma \\Pi \\Omega \\Delta" />   // uppercase

Operators and Relations

<InlineMath math="\\sum_{i=1}^{n} x_i" />   // summation
<InlineMath math="\\prod_{i=1}^{n} x_i" />  // product
<InlineMath math="\\lim_{x \\to 0}" />       // limit
<InlineMath math="a \\leq b" />              // less than or equal
<InlineMath math="a \\geq b" />              // greater than or equal
<InlineMath math="a \\neq b" />              // not equal
<InlineMath math="a \\approx b" />           // approximately

Calculus

<BlockMath math="\\frac{dy}{dx}" />                              // derivative
<BlockMath math="\\frac{\\partial f}{\\partial x}" />            // partial derivative
<BlockMath math="\\int_{a}^{b} f(x) \\, dx" />                  // definite integral
<BlockMath math="\\oint_C \\vec{F} \\cdot d\\vec{r}" />         // line integral

Linear Algebra

<BlockMath math="\\begin{pmatrix} a & b \\\\ c & d \\end{pmatrix}" />   // matrix
<BlockMath math="\\vec{v} = \\begin{pmatrix} x \\\\ y \\\\ z \\end{pmatrix}" />  // vector
<BlockMath math="\\det(A) = ad - bc" />                                    // determinant

Sets and Logic

<InlineMath math="A \\cup B" />              // union
<InlineMath math="A \\cap B" />              // intersection
<InlineMath math="x \\in A" />               // element of
<InlineMath math="A \\subset B" />           // subset
<InlineMath math="\\forall x \\exists y" />  // for all, there exists

Key Points

CDN loaded — KaTeX JS and CSS load from CDN on first use, so there is zero bundle impact for apps that don't use math
Loading state — Shows a spinner while KaTeX loads; subsequent renders are instant
Error handling — Invalid LaTeX renders an error message instead of crashing
Accessibility — Math elements have role="math" and aria-label with the LaTeX source
Double backslashes — Always use \\ in JS strings for LaTeX commands (e.g., "\\frac{a}{b}")