Is it possible to render typst formula in html?

[Guest-1013]

Description

I am using katex as the rendering engine for formula in my quarto website project, and want to change to typst for better source code readability. However, as what I have read in the documents, it seems to be only possible to use typst when the output file is .typ/.pdf . Is there a way to integrate typst rendering engine into a website project, something like

html-math-method:
    method: typst

?

[mcanouil]

No there isn't a native approach that will get you to have similar output as actual HTML JavaScript plugins such as MathJax and KaTeX.

This being said, there is a Quarto extension to render any Typst content to any formats as images:

• https://github.com/mcanouil/quarto-typst-render

[mkorje]

Typst 0.15 (currently a release candidate is out) adds support for automatically exporting equations as MathML in HTML (as well as many other HTML export improvements). I know nothing about Quarto though, so I'm not sure how exactly (or whether) Quarto uses Typst for HTML output.

[mcanouil]

Thanks, indeed MathML will bridge the gap when using Typst to HTML.

Quarto uses Typst for HTML output.

It does not. Typst is only used for PDF. All the HTML machinery is independent and relies mostly on Pandoc.

Note that the main issue with equations in Typst is that it does not use the LaTeX syntax for several operand and symbols. Pandoc does some conversion, there are Typst packages as well.
This means that if you are writing Typst equations in your Quarto document, then you are restricting yourself to PDF format (no docx, HTML, etc.)

Finally, Quarto allows to choose how maths are rendered in HTML, MathML is an option: https://quarto.org/docs/output-formats/html-basics.html#latex-equations
To sum up, as I was saying, here the real issue is the math equation syntax (the text within the dollars), i.e., LaTeX vs Typst. In my opinion, it's very unlikely that Quarto CLI will support two syntaxes to write maths internally, so this is a job for an extension. (I'll start experimenting)

[mcanouil]

Typst 0.15 has been released. It won't be natively supported in Quarto for some time, but I'll update my extension to try using HTML rendering in the next few days/weeks.

• https://typst.app/blog/2026/typst-0.15/

[maucejo]

Just a naive question. Is it possible to use kern as an alternative ?

[mcanouil]

probably.

[cderv]

@Guest-1013 I am curious of your suggestion. How do you envision being able to use typst for equation ?

You would like to write typst syntax (https://typst.app/docs/reference/math/) because KaTeX syntax is not enough ? I don't know the full difference.

If your output in HTML then you need in all case a render to HTML. KaTeX and Mathjax are such tool.

Maybe something could become possible considering Typst experimental HTML export (https://typst.app/docs/reference/html/) but they do not yet handle Math element (typst/typst#5512)

So using a tool like quarto-typst-render above seems to be the best solution today. It uses images like some other html math method like webtex.

Also for context, all html math method in quarto as of today are inherited from pandoc supports: https://pandoc.org/MANUAL.html#math-rendering-in-html

Thanks.

[Guest-1013]

I'd say it would be really convenient to be able to use $ ... $ and $$ ... $$ for rendering typst equations in HTML, just like using KaTeX but with a different syntax. I understand that official support for HTML in typst is still in development, maybe I will wait for it to be stable then. Thanks for answering!

[mcanouil]

FYI, my extension will be able to do that once Typst can.
HTML output is on the roadmap, but that's not for quite some time.

[cderv]

I would be interesting to know the specific of Typst Math syntax in input compared to what KaTeX offers.
It would be an option also for KaTeX to support such syntax, or missing part at least:

• Support for Typst syntax KaTeX/KaTeX#4069

[mcanouil]

Typst Render extension v0.21.0 is now able to use Typst 0.15 (Quarto 1.10) to produce HTML for regular text and equations.
It also allows (opt-in) to take over math rendering.

• https://m.canouil.dev/quarto-typst-render/

quarto render ...

Caution

Do not use in production yet:

• Typst HTML export is experimental and not yet stable.

---
format:
  html: default
  typst: default
engine: markdown
filters:
  - typst-render
extensions:
  typst-render:
    math: typst
---

```{typst}
//| echo: fenced
//| format: html
#set text(size: 14pt)
A *Typst* paragraph with maths $f(x) = sum_(i=0)^n x_i$ rendered as MathML.
```

Inline $f(x) = sum_(i=0)^n x_i$ sits in the text, and a numbered display equation follows:

$$
e^(i pi) + 1 = 0
$$ {#eq-euler}

See @eq-euler for Euler's identity.