In version 0.13 0.13 , Typst added HTML export capabilities, including an html-export mode and two core functions: html.elem html.elem and html.frame html.frame — using these, we can write Typst documents targeting HTML+CSS output.

Inspired by this, I developed a static site generator in Rust called Typsite.

Currently, Typst’s HTML export:

• Has good support for basic rich text
• Requires users to manually write complex styles using the html.elem html.elem function
• Cannot automatically convert all Typst ecosystem content into HTML
• For content with complex Typst styles, html.frame html.frame can be used to convert them into SVG and embed them into HTML
• Only supports single-file HTML output per compilation

For details on supported features and the roadmap, follow this issue: HTML export #5512

Although the official team plans to support automatic typst style → HTML+CSS in the future, this won’t conflict with Typsite. On the contrary, Typst’s development will make Typsite even more useful, because Typsite’s main role is to coordinate interaction between articles and ultimately build a fully functional static website.

Initialize a new Typsite project in the specified directory

Usage: typsite init [OPTIONS]

Options:
  -d, --dir <DIR>  Project root directory [default: ./]
  -h, --help       Print help

Initialize a new Typsite project in the specified directory

Usage: typsite init [OPTIONS]

Options:
  -d, --dir <DIR>  Project root directory [default: ./]
  -h, --help       Print help

Compile or watch the project with specified input and output directories

Usage: typsite compile [OPTIONS]

Options:
      --host <HOST>          Serve host [default: localhost]
      --port <PORT>          Serve port, must be specified to watch mode [default: 0]
      --config <CONFIG>      Project config [default: ./.typsite]
      --cache <CACHE>        Cache dir [default: ./.cache]
  -i, --input <INPUT>        Typst root dir, where your typst files are stored [default: ./root] [aliases: --i]
  -o, --output <OUTPUT>      Output dir [default: ./publish] [aliases: --o]
  -p, --packages <PACKAGES>  Packages dir, will be installed to @local and will be synced to @local in watch mode, skip if empty or not found [default: ] [aliases: --p]
      --no-pretty-url
      --no-short-slug
  -h, --help                 Print help

Compile or watch the project with specified input and output directories

Usage: typsite compile [OPTIONS]

Options:
      --host <HOST>          Serve host [default: localhost]
      --port <PORT>          Serve port, must be specified to watch mode [default: 0]
      --config <CONFIG>      Project config [default: ./.typsite]
      --cache <CACHE>        Cache dir [default: ./.cache]
  -i, --input <INPUT>        Typst root dir, where your typst files are stored [default: ./root] [aliases: --i]
  -o, --output <OUTPUT>      Output dir [default: ./publish] [aliases: --o]
  -p, --packages <PACKAGES>  Packages dir, will be installed to @local and will be synced to @local in watch mode, skip if empty or not found [default: ] [aliases: --p]
      --no-pretty-url
      --no-short-slug
  -h, --help                 Print help

Clear cache and output directories

Usage: typsite clean [OPTIONS]

Options:
  -o, --output <OUTPUT>  Output directory [default: ./publish]
  -c, --cache <CACHE>    Cache directory for typst_html_export content [default: ./.cache]
  -h, --help             Print help

Clear cache and output directories

Usage: typsite clean [OPTIONS]

Options:
  -o, --output <OUTPUT>  Output directory [default: ./publish]
  -c, --cache <CACHE>    Cache directory for typst_html_export content [default: ./.cache]
  -h, --help             Print help

View the list of syntax highlighting and supported languages
Usage: typsite syntect [OPTIONS]

Options:
      --config <CONFIG>  Config path [default: ./.typsite]
  -h, --help             Print help

View the list of syntax highlighting and supported languages
Usage: typsite syntect [OPTIONS]

Options:
      --config <CONFIG>  Config path [default: ./.typsite]
  -h, --help             Print help

The fit-font fit-font parameter semantics of the inline inline function have changed:

• Before 0.1.7: fit-font fit-font was a bool bool type
• After 0.1.7: fit-font fit-font is a 1em 1em type (can be true true , false false , or values like 1em 1em , 2em 2em )

Migration:

• inline(content, fit-font: true) inline(content, fit-font: true) |-> inline(content, fit-font: 1em) inline(content, fit-font: 1em)
• inline(content, fit-font: false) inline(content, fit-font: false) |-> inline(content) inline(content) or inline(content, fit-font: false) inline(content, fit-font: false)

If you’ve customized the inline inline function in your site library, you need to update the call signature:

// Old version
#import "@local/typsite:0.1.0": inline

// New version
#let footnotes = state("footnotes", ())
#let inline(..args) = context {
  import "@local/typsite:0.1.0": inline
  inline(..args, footnotes: footnotes.get())
}

// Old version
#import "@local/typsite:0.1.0": inline

// New version
#let footnotes = state("footnotes", ())
#let inline(..args) = context {
  import "@local/typsite:0.1.0": inline
  inline(..args, footnotes: footnotes.get())
}

The following functions in rule.typ rule.typ now need to receive the footnotes footnotes parameter:

• rule-ref(footnotes) rule-ref(footnotes) instead of the old rule-ref rule-ref
• rule-footnote(footnotes) rule-footnote(footnotes) instead of the old rule-footnote rule-footnote

In the schema schema function, you need to fetch footnotes first and then pass them to the rules:

let _footnotes = query(footnote).map(it => it.at("label", default: none)).filter(it => it != none)
show: rule-footnote(_footnotes)
show: rule-ref(_footnotes)

let _footnotes = query(footnote).map(it => it.at("label", default: none)).filter(it => it != none)
show: rule-footnote(_footnotes)
show: rule-ref(_footnotes)

The inline inline function in @local/typsite:0.1.0 @local/typsite:0.1.0 now requires a footnotes footnotes parameter:

// Old version
inline(content, fit-font: true, scale: 100%)

// New version
inline(content, fit-font: 1em, scale: 100%, footnotes: ())

// Old version
inline(content, fit-font: true, scale: 100%)

// New version
inline(content, fit-font: 1em, scale: 100%, footnotes: ())

The auto-sized-svg auto-sized-svg function now has a fit-font fit-font parameter with more flexible font size control:

• true true : Use CSS font-size inheritance
• false false : Use fixed font-size: 1rem
• 1em 1em : Use relative em value

If you’re using Zed as your editor, you can add the following configuration for a better Typst development experience:

Add to .zed/settings.json .zed/settings.json :

{
  "lsp": {
    "tinymist": {
      "initialization_options": {
        "exportPdf": "never",
        "rootPath": "your/site/root/path",
      },
    },
  },
}

{
  "lsp": {
    "tinymist": {
      "initialization_options": {
        "exportPdf": "never",
        "rootPath": "your/site/root/path",
      },
    },
  },
}

If you were previously using VSCode with tinymist configured, you need to update rootPath rootPath to an absolute path:

In .vscode/settings.json .vscode/settings.json :

{
  "tinymist.rootPath": "/absolute/path/to/your/site/root"
}

{
  "tinymist.rootPath": "/absolute/path/to/your/site/root"
}