KaTeX

KaTeX is a JavaScript library for TeX math rendering that produces print-quality typesetting directly in the browser, with no page reflow and no external dependencies. It ships two entry points — a DOM renderer (katex.render) and a string renderer (katex.renderToString) — so the same parsing and layout engine can be used client-side or in Node.js for server-side rendering of pre-built HTML/MathML. Because it lays out math synchronously against its own font-metrics tables rather than iteratively reflowing the page like MathJax, it renders large documents dramatically faster while remaining consistent across browsers and environments.

What You Get

• A synchronous DOM renderer (katex.render) and a markup-string renderer (katex.renderToString) for both browser and server-side use
• An auto-render contrib extension that scans arbitrary page text for math delimiters and renders them in place
• Extension modules (mhchem for chemistry notation, copy-tex for copy/paste of source LaTeX, render-a11y-string for screen-reader-friendly output)
• Pre-built font files and CSS so rendered math matches TeX’s print-quality metrics without extra font licensing steps
• A CLI (katex binary via cli.js) for rendering expressions from the command line or build scripts
• Both HTML and MathML output in the same render pass, improving accessibility and copy/paste fidelity

Common Use Cases

• Rendering mathematical notation in documentation sites, blogs, and educational content (e.g. via remark/rehype or MDX plugins)
• Server-side pre-rendering of math-heavy pages so no client-side JavaScript or reflow is needed at request time
• Embedding formula input/preview in note-taking apps, textbook platforms, and online course tools
• Chemical equation rendering via the mhchem contrib module in STEM education tooling

Under The Hood

Architecture — KaTeX’s pipeline is a classic three-stage compiler: src/Lexer.ts tokenizes the input string, src/MacroExpander.ts expands macros against a large built-in macro table (src/macros.ts) plus symbol/function definitions registered via defineFunction/defineSymbol, and src/Parser.ts (~1000 lines) turns the expanded token stream into an AnyParseNode[] parse tree (src/parseTree.ts). From there, src/buildHTML.ts and src/buildMathML.ts independently walk the same parse tree to produce an HTML Span/Anchor DOM-like tree (src/domTree.ts) and a parallel MathML tree, which src/buildTree.ts combines; katex.ts at the repo root is the thin public-facing entry point wiring render/renderToString/generateParseTree around this pipeline and also exposing low-level extension hooks (__defineFunction, __defineMacro, __defineSymbol, __setFontMetrics) for advanced consumers. Tech Stack — Written entirely in TypeScript (66% of the codebase) with a Rollup + Webpack dual build (rollup.config.js, webpack.config.js) producing both CJS and ESM bundles per package.json’s exports map, plus separate bundles for contrib extensions (auto-render, mhchem, copy-tex, mathtex-script-type, render-a11y-string). Runtime dependencies are minimal — only commander for the CLI — keeping the core renderer dependency-free as the README claims; fonts are built via a Perl/Python toolchain in dockers/fonts from TeX’s original metric data. Code Quality — Tests live under test/*-spec.ts (Jest, six top-level spec files covering parsing, MathML, Unicode, error handling, and duplicate-detection, plus a Selenium-driven visual screenshotter suite in test/screenshotter), run via pnpm test:jest, alongside tsc --noEmit type-checking and combined ESLint/Stylelint linting wired into pnpm test. The src/functions/ directory (46 files) cleanly isolates one TeX command family per file with a consistent defineFunction registration pattern, and Husky pre-commit hooks plus semantic-release enforce consistency on every merge. API Design — The public surface is deliberately small (render, renderToString, ParseError, plus underscore-prefixed advanced hooks marked unstable in JSDoc comments), which keeps the common path — call render/renderToString with an expression string and a SettingsOptions object — nearly boilerplate-free, while throwOnError/errorColor settings give callers explicit, well-documented control over invalid-input behavior instead of silent failures.