TikZJax TikZJax converts script tags (containing TikZ code) into SVGs. See a live demo at https://tikzjax.com/. Example In the <head> of your HTML, include <link rel="stylesheet" type="text/css" href="https://tikzjax.com/v1/fonts.css"> <script src="https://tikzjax.com/v1/tikzjax.js"></script> Then in the <body>, include TikZ code such as <script type="text/tikz"> \begin{tikzpicture} \draw (0,0) circle (1in); \end{tikzpicture} </script> Your TikZ will be compiled into SVGs; the <script> element will be replaced with the corresponding SVG. For instance, the above code generates You can also use this for commutative diagrams. For example, this code <script type="text/tikz"> \begin{tikzcd} A \arrow[r, "\phi"] \arrow[d, red] & B \arrow[d, "\psi" red] \\ C \arrow[r, red, "\eta" blue] & |[blue, rotate=-15]| D \end{tikzcd} </script> will be rendered as How does this work? Using web2js, the Pascal source of tex is compiled to WebAssembly; the latex format is loaded (without all the hyphenation data), and \documentclass[margin=0pt]{standalone} \def\pgfsysdriver{pgfsys-ximera.def} \usepackage{tikz} is executed. Then core is dumped; the resulting core is compressed, and by reloading the dumped core in the browser, it is possible to very quickly get to a point where TikZ can be executed. By using an SVG driver for PGF along with dvi2html, the DVI output is converted to an SVG. To emphasize this: all of this happens in the browser.
First seen: 2025-04-20 23:29
Last seen: 2025-04-21 17:36