What it is

kern renders Typst math syntax to MathML or HTML+CSS in the browser. It is a drop-in alternative to KaTeX for projects that prefer Typst's cleaner syntax.

Writing a / b instead of \frac{a}{b}, or sum_(i=0)^n instead of \sum_{i=0}^{n}, adds up over a long document. The core bundle is under 10 KB gzipped.

Install

npm install kern-typ
# or
pnpm add kern-typ

The npm package is kern-typ because kern was already registered. The UMD global, CSS class prefix, and everything else is still kern.

Quick start:

import { render, renderToString } from 'kern-typ';

render('sum_(i=0)^n i = frac(n(n+1), 2)', document.getElementById('math'));

Or via CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kern-typ/styles/kern.css">
<script src="https://cdn.jsdelivr.net/npm/kern-typ/dist/kern.min.js"></script>
<script>
  kern.render('e^(i pi) + 1 = 0', document.getElementById('math'));
</script>

How it works

A hand-written recursive descent parser produces a typed AST from Typst math source. A renderer walks the AST and emits either native MathML (supported in all major browsers since 2023) or a KaTeX-compatible HTML+CSS fallback.

Source text runs through a lexer and parser into an AST, then the renderer walks the AST and produces a MathML string. Typical expressions render in well under a millisecond.

Status

kern is pre-1.0, but all core Typst math features are already implemented: fractions, roots, sub/superscripts, matrices, cases, style functions (cal, bb, frak), accents (hat, tilde), the full Typst symbol table, and auto-render.

Source on GitHub under MIT.