TikZ Demo (tikzjax)
April 28, 2026
TikZJax is a small browser runtime that converts <script> tags containing TikZ into SVGs.
Important detail: compilation happens in the browser, and the <script> node is replaced by the rendered SVG. What happens in the background is genius: Tikzjax uses a Pascal interpreter written in WASM (Web-Assembly) to run Tex. Tex packages (especcially Tikz and extensions) can be loaded dynamically from the webserver. Tex produces a DVI. Then, a DVI interpreter (dvi2html) written in JS is used to create a SVG.
On this blog I ship a custom fork of TikZJax (bundled as /tikzjax.js) and I load it only on posts that actually contain a TikZ block.
How this is integrated
This blog uses markdown based posts.
Write TikZ inside a fenced code block with language tikz. You do not need to add \usepackage{...} or a document preamble.
Under the hood, the markdown renderer turns that into a TikZJax script tag with a preconfigured package set, so you don’t have to import anything yourself:
001<script type="text/tikz" data-show-console="true" data-tex-packages='{"tikz-cd":"","amssymb":""}'>002\begin{tikzcd}003\alpha \arrow[r] & \beta \arrow[r] & \gamma \arrow[r] & \delta \arrow[r] & \epsilon004\end{tikzcd}005</script>
If you open this post, the page will include styles.css and tikzjax.js automatically (and only for posts that contain a TikZ fence).
Another example
This uses custom fonts specific to my fork (1).
Official examples
Some cool stuff.