Typlet

Typlet

Typlet renders Typst math in the browser and in Node, like KaTeX does for LaTeX: one JavaScript file and web fonts, with a synchronous API, no WebAssembly and no compiler.

โˆ‘๐‘–=1๐‘›๐‘–=๐‘›(๐‘›+1)2 sum_(i=1)^n i = (n(n+1))/2

Its layout is a port of Typst's own math layout, and it is checked against the Typst compiler: of the formulas Typlet lays out, every frame matches Typst's to a thousandth of a point. Formulas can use the code Typst formulas use, such as #h(-1em/6) and mat(delim: "[", 1, 2; 3, 4), styled text, boxes, definitions and set rules.

Install

npm install typlet

Typlet is an independent project and is not affiliated with Typst GmbH.

Render a formula

import { render, renderToString } from 'typlet';

const html = renderToString('x^2 + y^2 = r^2');
render('sum_(i=1)^n i', element, { displayMode: true });

renderToResult(source, options) returns the markup with what drew the formula, the warnings and the equation number, for pages that need to know, such as an editor's preview.

Pages need Typlet's stylesheet, which loads its fonts as the page's formulas need them:

<link rel="stylesheet" href="node_modules/typlet/fonts/typlet.css">

Or render every formula in a page's text, with Typst's syntax: $x$ is inline, and $ x $, with spaces inside both dollar signs, is a display formula.

<script src="typlet/dist/typlet.min.js"></script>
<script src="typlet/dist/contrib/auto-render.min.js"></script>
<script>renderMathInElement(document.body);</script>

Outputs

The output option picks what Typlet emits, as in KaTeX:

output Drawn by Screen readers get
htmlAndMathml (the default) Typlet's HTML: glyphs and rules where Typst places them The MathML, visually hidden
html Typlet's HTML An aria-label with the source
mathml The browser, from MathML like Typst's own export The MathML

Formulas follow the text's color, so they work in dark mode, and they scale with the font size. Inline formulas wrap where Typst breaks lines, after relations and binary operators.

Learn more