type.tex

Type LaTeX and Typst by hand — and watch them render.

_{practice · learn · progress in localStorage · zero build step}

---

A Monkeytype-style trainer for markup languages. You see a typeset example — you type it character by character — a strict engine renders your result and catches errors.

Practice

Two languages, 10 lessons each:

LaTeX	Typst
$...$ math mode	$...$ math mode
^ _ scripts, \frac, \sqrt	^ _ with (…) groups, frac, sqrt
\alpha \pi \theta, \sum \int \lim	alpha pi theta, sum integral lim
\left( \right), pmatrix, \text	lr, mat, #functions[]
circuits: \frac, \sqrt, \omega	circuits: frac, sqrt, omega

• LaTeX renders via KaTeX with strict: "error" — unsupported commands fail loudly, never silently
• Typst renders via typst.ts (WASM in the browser, wrapped in an auto-page so the SVG fits the content)
• typing is strict: no paste, input truncated to the target, wrong keys highlighted inverted

Keys

key	action
tab	show next expected character
esc	restart task
enter	next task (when done)

Stats appear once, on completion: done · 12.4s · 41 wpm.

Learn

Topic tabs per language — every task shows the source next to its rendered preview.

Run

git clone https://github.com/zaveshaa/type.tex.git
cd type.tex
python3 -m http.server 8000
# http://localhost:8000

Internet needed: KaTeX CDN; typst.ts WASM (~30 MB, once per session).

Structure

index.html
css/styles.css
js/main.js          UI, state, hotkeys
js/typer.js         completeness / mismatch / wpm
js/langs/latex/     lessons + KaTeX renderer
js/langs/typst/     lessons + typst.ts renderer
favicon.svg         TeX logo

Adding a language = one module in js/langs/ exposing lessons and render(el, src), plus an entry in LANGS in main.js.