HTML

Typst experimentally supports HTML. This means that not all Typst syntax will translate to a meaningful HTML structure. The most common features in everyday prose are all supported, however, such as text markup, links, headings, footnotes, citations, and mathematics. For more information on which features are currently supported in Typst’s HTML export, refer to the HTML export tracking issue.

Math is worth calling out on its own, because it’s one of the areas where Typst’s HTML export is already fully mature rather than experimental. Both inline equations and display blocks compile straight to MathML, so an integral or a matrix keeps its own semantics in the DOM instead of becoming a rasterised image or a pile of hand-positioned <span>s. Rheo does no translation work here itself; it just carries Typst’s MathML through unchanged to both HTML and EPUB output.

From one file to a whole site

Where the Typst CLI produces a single HTML file, Rheo turns your project into a static site. Each Typst source file becomes its own HTML page, and relative links between files are rewritten from .typ to .html so that navigation works in the browser.

Rheo also provides a development server with live reloading when you use the watch command, so you can see changes in the browser as you edit your source files:

rheo watch my-project --html --open

The HTML format supports configurable CSS and JavaScript entrypoints, as well as asset copying for additional files your site needs. These entrypoints are also the mechanism through which reading augmentations can be delivered – the tooltip example, for instance, uses a custom Typst function and a JavaScript entrypoint to provide inline tooltips in the HTML output.⁴

You can customize which files are included in the HTML output using a spine. By default, Rheo compiles every Typst file under content_dir; to exclude certain files from the site, narrow it with [html.spine] exclude:

[html.spine]
exclude = ["drafts/**"]

Rheo sites can also carry a feed — Atom, RSS, or JSON Feed — generated by the @rheo/feeds Typst package rather than a core config key.

Because each source file becomes its own page, Rheo resets the footnote counter to 1 at the start of every HTML page by default, so each page numbers its footnotes independently. Set reset_footnotes = false under [html] to let footnotes accumulate continuously across the whole site instead:

[html]
reset_footnotes = false

HTML Assets

The HTML format plugin extends Rheo’s generic asset system with CSS and JavaScript entrypoints, configurable via [html.assets] in rheo.toml.

CSS

When Rheo generates HTML, it injects a default stylesheet that gives your site a clean, mobile-friendly look out of the box. ‘Screening the subject’ is a website generated with the default Rheo stylesheet for reference.

You can fully customize the stylesheet by adding a style.css at the root of your project directory. Note that if your project contains a custom style.css, none of the styles in the default stylesheet will be applied. If you want to build on the default styles, copy and paste the default stylesheet into the style.css file in your project directory.

You can customize the entrypoint for the CSS included in the HTML build in rheo.toml. Note that this path is relative to the Rheo root (not the content directory):

[html.assets]
css_stylesheet = "./index.css"

Javascript

Rheo also makes it easy to reference JS in your HTML site by ferrying the code in index.js through to your HTML build. Take a look at the tooltip_html example project, which leverages the index.js entrypoint using a modern JS bundling toolchain to provide a package through which you can specify tooltips in the HTML build as a custom function in Typst.

You can customize the entrypoint for the JS included in the HTML build in rheo.toml. Note that this path is relative to the Rheo root (not the content directory):

[html.assets]
js_scripts = "./entrypoint.js"

Multiple asset blocks

[html.assets] can be written as an array of blocks using TOML’s double-bracket syntax ([[html.assets]]). Each block is a distinct asset set with its own js_scripts, css_stylesheets, and copy, and an optional dest subfolder within the HTML build directory.

[[html.assets]]
dest = "tooltip"
js_scripts = "tooltip/index.js"
css_stylesheets = "tooltip/index.css"

[[html.assets]]
dest = "annotations"
js_scripts = "annotations/index.js"

Multiple blocks are what you want when a project pulls in more than one independent set of scripts or stylesheets — say, assets bundled from several packages. Each block’s files are written under its dest subdirectory, or directly into the HTML root if dest is omitted.

For automatic injection of asset blocks from Typst packages, see Packages.