Typst HTML Export: Inspect the Structure Before Styling the Page

Inspect the generated reading structure separately from a printed page layout.

Your Typst source contains headings, a short list and an emphasized instruction. You need an HTML reading copy, but changing the output extension is not a promise that the printed page layout will follow it. Compile a small source with the HTML feature enabled, inspect its actual structure, then add the presentation your reading page needs.

Treat this as an experimental HTML reproduction, not a replacement for a required production PDF. The Typst HTML reference describes the export as experimental and distinguishes document structure from fully laid-out visual output. Keep that limitation with the example rather than silently promising a matching printed page.

Actual Typst HTML: source note, three packet items and preserved emphasis
Actual Typst HTML: source note, three packet items and preserved emphasis
Open the full example ↗

Open the complete example · Download the full HTML source

Give the compiler one complete reading note

Save the following original fictional note as cabinet-note.typ:

#set document(title: "Cabinet reading note")

= Cabinet reading note

Original fictional archive exercise. No collection record is changed.

== Packet contents

- The current source note
- The generated reading copy
- The recorded compiler command

*Keep the source beside the reading copy.*

The list contains three packet items. Its first item refers to the maintained source, not a file the reader has supposedly uploaded or saved. The final sentence is an authored instruction for this exercise.

Keep this first source free of a theme, remote assets and page-positioning tricks. If the basic document cannot compile, diagnose that source and command before adding the rest of a real template.

Enable the selected HTML target explicitly

The selected local reproduction uses Typst 0.14.2. Record the executable version and compile this source with the experimental feature flag:

typst compile cabinet-note.typ cabinet-note.html --features html

The official reference documents an .html destination or --format html together with --features html. Use a separate output path for a comparison that omits the feature flag. Keep its exit result and diagnostic instead of treating the mere presence of an older HTML file as evidence of a successful new run.

This article uses a portable command-line executable and retains its actual output. It does not claim that a web-app export button was used or that the compiler version installed on another computer matches the selected release.

Inspect the reading structure before applying CSS

Open the generated HTML and locate Cabinet reading note, Packet contents, the three list items and the emphasized source instruction. Check both the text and its containing elements. A bold-looking sentence in an image would not establish that the original emphasis became reading markup.

Check the three-item inventory independently of the compiler's exit code. In this fixture the source note, reading copy and command record must all remain present. A successful compilation cannot tell you whether you accidentally deleted one of your intended items before running it.

The reference explains that Typst focuses on semantic HTML rather than automatically reproducing CSS from all existing layout rules. Keep the untouched generated HTML as one download. If you put its content in a styled shell, label that shell as an independently prepared reading copy and retain the compiler output separately.

The existing mdBook print guide packages a generated book and its resource folder. This exercise starts from one .typ source and a selected experimental HTML target; it does not collect chapters into a printable book.

When adding a styled shell, use the self-contained HTML checklist to inspect the shell’s stylesheet, script and image references. This packaging check is separate from the compiler’s semantic output: keep the untouched generated file so a reviewer can distinguish your added presentation from what Typst actually produced.

Hand over the source, command and generated file together

Keep the .typ source with the exact command and original generated HTML. A requested wording change belongs in that source, followed by another compile and a comparison of the headings and packet items.

For a prepared reading page in NOS, keep the three packet items and source instruction visible beside the example. Preserve a separately required PDF as its own deliverable. Finish the HTML review by matching the reading structure to the maintained source, rather than judging it by a remembered page layout.

Maintained source · Untouched native output

Keep reading