A tour of Typst and typost

2026-02-14T00:00:00Z

A tour of Typst and typost

Every block below shows the source, then the actual result.

Headings

=== A section

A section

==== A subsection

A subsection

Emphasis and inline styles

*bold*, _italic_, `code`, #strike[struck], #underline[underlined],
#highlight[highlighted], #sub[sub], #super[super]

bold, italic, code, ~~struck~~, underlined, highlighted, _sub, ^super

Lists

- one
- two
  - nested

+ first
+ second

/ term: its description

one
two
- nested

first
second

term: its description

Code

```rust
fn main() {
    println!("hello from typost");
}
```

fn main() {
    println!("hello from typost");
}

Math

Euler's identity: $e^(i pi) + 1 = 0$.

Euler’s identity: $𝑒^{𝑖 𝜋} + 1 = 0$ .

$ integral_0^infinity e^(-x^2) dif x = sqrt(pi) / 2 $

\int_{0}^{\infty} 𝑒^{- 𝑥^{2}} d 𝑥 = \frac{\sqrt{𝜋}}{2}

Tables

#table(
  columns: 3,
  [*Feature*], [*Typst*], [*Markdown*],
  [Math], [yes], [partial],
  [Functions], [yes], [no],
)

Feature	Typst	Markdown
Math	yes	partial
Functions	yes	no

Quotes and footnotes

#quote(block: true)[
  Typst is a new markup-based typesetting system that is designed to be as
  powerful as LaTeX while being much easier to learn and use.
]

A footnote#footnote[At the bottom of the page.].

Typst is a new markup-based typesetting system that is designed to be as powerful as LaTeX while being much easier to learn and use.

A footnote¹.

typost extras

A spoiler hides an inline run until you hover it:

The butler did it #spoiler[with the candlestick, in the library].

The butler did it with the candlestick, in the library.

A block spoiler stays blurred until you click it, then stays revealed:

#spoiler(block: true)[
  This block stays blurred behind a "click to reveal" pill until you click it,
  and then it stays revealed.
]

click to reveal

This block stays blurred behind a “click to reveal” pill until you click it, and then it stays revealed.

A region can be encrypted at build time — the plaintext never reaches the page:

#encrypted(password: "hunter2")[
  Only readers who know the password see this.
  The plaintext is not in the page source.
]

¹At the bottom of the page.

The design of typost

2026-02-10T00:00:00Z

The design of typost

typost turns a Typst program into a website. Typst is the authoring and structure language: there is no config DSL, no front-matter format, and no content convention.

The entry is the site

The entry file is a Typst program. It declares the site’s metadata and #includes every page — nothing is discovered from filenames:

#import "lib/typost.typ": site

#site(title: "typost demo")

#include "pages/home.typ"
#include "pages/about.typ"
#include "pages/blog.typ"

A page is a show rule

Each page is its own Typst file. It starts with a selectorless show rule that picks a layout; the rest of the file is the body, and named arguments other than route, layout, title, and tags become its front matter:

#import "lib/typost.typ": page

#show: page.with(route: "about/index.html", title: "About")

= About
...

A layout is called as layout(route, data, content), so the theme can render the nav, title, and byline around the body.

One render, many documents

typost compiles the entry in Typst’s experimental bundle target: a single compilation emits every document and asset. Because the pages share that bundle, they can query each other. The lists on the home and blog pages are not maintained by hand:

#context {
  for m in query(metadata).filter(m => /* …section == "blog"… */) [
    #link(m.value.typost.data.url, m.value.typost.data.title)
  ]
}

Plugins and the pipeline

Everything optional is a plugin. A plugin can contribute Typst modules, mutate the site manifest before render, and rewrite the exported files. They run at fixed stages:

config → typst(plugins) → eval-only → prepare(plugins) → render → post(plugins) → emit

This demo uses five:

sitemap — writes sitemap.xml;
feed — writes an Atom feed and links it from every page;
encrypt — encrypts a content region at build time;
taxonomies — generates a page per tag/category;
spoiler — hover- and click-to-reveal regions.

Sites and plugins communicate through a metadata((typost: …)) channel that is lifted into the manifest before rendering, so the core stays free of any plugin’s concepts.