Hello, Typst community!
My first post here.
I wanted to share a tool I built to solve a problem: embedding beautiful equations in static websites without relying on client-side JavaScript or heavy libraries.
The Problem
I was tired of using MathJax with it’s LaTeX syntax limitations and third-party rendering overhead. For static sites, I wanted:
- Clean, server-side rendered equations
- Typst’s superior math typesetting
- No external dependencies at runtime
- Simple workflow that integrates easily
The Solution
I created html-typst-equation-renderer - a local tool that:
- Scans your HTML for comments like
<!-- $E=mc^2$<energy> --> - Renders them to SVG using Typst
- Embeds the SVGs directly into your HTML
Why This Works Well
- Zero runtime overhead: SVGs are just images - no JavaScript needed
- Typst’s excellent math support: All Typst math syntax works
- Local-first: You control the rendering; no external API calls
- Re-render on demand: Edit equations and regenerate with one command
- CSS-aware: Can extract colors from your site’s CSS for consistent styling
Quick Example
The actual usage is the following. Inside your html you type smth
<p>The Pythagorean theorem:</p>
<!-- $a^2 + b^2 = c^2$<pythagoras> -->
Run the script, and it becomes:
<p>The Pythagorean theorem: </p>
<!-- $a^2 + b^2 = c^2$<pythagoras> -->
<div class="equation">
<img src="assets/svg/pythagoras.svg" alt="a^2 + b^2 = c^2">
</div>
Features
- Configurable colors (features CSS extraction)
- Adjustable text size
- Works with any static site generator
For Static Site Enthusiasts
If you’re using Hugo, Jekyll, 11ty, or plain HTML and want Typst-quality equations without the client-side bloat, this might be useful for you.
The tool is minimal (~200 lines of Python) and easy to extend. I’d love to hear your thoughts!
Check out the GitHub repo for setup instructions and examples.