Simple tool: local typst equation renderer for static websites

Showcase
, ,
1

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:

  1. Scans your HTML for comments like <!-- $E=mc^2$<energy> -->
  2. Renders them to SVG using Typst
  3. 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.

3 Likes
2

This looks cool. It does leave me with one concern regarding accessibility. I don’t know how HTML handles MathJax equations with regards to alt text, but I know Typst does have plans to automate that with HTML and PDF 2.0 support (Math – Typst Documentation). With the conversion to SVG files, is that automation going to remain feasible in the future?

3

Thank you!
Concerning your question:
a) Yes, MathJax has automatic text alt.
b) I have plans to add a non-automatic alt option very soon.
c) My understanding of how typst will insert equations into html is rather poor, because now there is simply no equations to html export supported and I am not much of a developer tbh. Won’t it be through svg’s?
d) Since the start I viewed this tool as temporary, but now I actually think it may be feasible even later for the ones who don’t want to render the whole website with typst and just want the equations. Just like with MathJax

Hope I answered your question.

4

I could have sworn I saw this somewhere, but I cannot find it now, but I remember a post indicating that the method that Typst would use for auto testing adding alt text to math equations in HTML and PDF 2.0 is via MathML, and XML-based markup language.

I cannot say for how the rendering is being handled.