Slides in Typst tend to end one of two ways. The PDF route gives you one page per step and nothing ever moves. Typst’s own HTML export hands the arrangement to the browser, which loses the very thing I use Typst for.
I tried a third route, and a package came out of it.
Every slide is typeset by Typst and written into the HTML as SVG. What you see in the browser is Typst’s layout, to the point, the same one the PDF shows. Only then does anything move: whatever should stir is announced in the source, and a small runtime animates it with the Web Animations API. One source file gives you three things. The talk as a single self-contained .html, a slide set as PDF with one page per slide rather than per step, and a handout with notes or ruled lines beside the slides.
What a deck looks like
#import "@schule/typstage:0.1.0": *
#show: presentation.with(
theme: themes.lesson,
title: [Completing the Square],
transition: "fade",
)
= Why bother
== Two quadratics that look alike
#side-by-side(
card(title: [This one factors])[$x^2 + 5x + 6 = (x+2)(x+3)$],
card(title: [This one does not])[$x^2 + 6x + 2$, and no integer pair works.],
)
#pause
So we stop guessing and rewrite the term instead.
== Step 1: put the missing corner in
#align(center, morph(<term>, $x^2 + 6x + 9 - 9 + 2 = 0$))
== Step 2: now it reads as a square
#align(center, morph(<term>, $(x + 3)^2 - 7 = 0$))
That is a whole deck. = opens a section slide, == a slide, #pause cuts a slide into steps, and nothing carries a step number because steps count themselves.
The one worth explaining is morph. Give the same name to something on two adjacent slides and it flies from the one place to the other, matching glyph to glyph. In the deck above the room sees 9 - 9 fold into the square and the 2 walk out to become the -7. It is the same term rewritten, and the motion says so better than a new line ever could.
You can just click through it
Six decks, and I deliberately wrote them as talks somebody might actually give rather than as feature demos:
- A Tour of typstage, every function once and what it is for
- How GPS Knows Where You Are, four satellites and a clock nobody trusts
- The Shape of a Page, why the four margins of a book are unequal
- Completing the Square, a school lesson
- Deploying to a Fleet at 3 a.m., error budgets and a live status board
- Two treatments, one reversal, Simpson’s paradox
Arrow keys step through, o gives an overview, f full screen, s the speaker notes. Every file there is a single self-contained HTML. Save one and it still works offline.
You can try out these sample decks here:
https://loewe1000.github.io/typstage/beispiele/
Where it lives
Source and README:
MIT, needs Typst 0.15. It is not on Universe yet, so for now you clone it into your local package directory.
What would help me most
Four things, none of them long. All of them are places where I have no data, only guesses.
1. Open the example decks in your browser and tell me if anything is wrong. I have only ever tested Chrome. The runtime leans on the Web Animations API, CSS zoom and inline SVG, and I do not know what Firefox or Safari make of it. If something fails to move, sits at the wrong size, or the overview (o) looks broken, that is worth more to me than any opinion on the design. Please say which browser and version.
2. Put a morph on two adjacent slides in your own writing. morph pairs glyphs by their shape, and I have only ever fed it Latin letters and maths. I have no idea what it does with Greek, Cyrillic, CJK or an Arabic line, and I would rather be told than guess. A screenshot of a glyph landing somewhere it has no business being is exactly the report I want.
3. Build something big. One SVG per slide is the whole design, and it has a cost I cannot judge from my own decks. The largest of them is 23 slides and comes to 1.9 MB with 5581 glyph references. If you have a deck of a hundred slides, I would like three numbers: the size of the HTML file, how long the browser takes to show the first slide, and whether stepping still feels immediate at slide 80.
4. Tell me what the themes look like on your machine. They name fonts that exist on macOS (Iowan Old Style, Optima, Helvetica Neue) and fall back to whatever is there otherwise. I have never seen the five themes on a Linux box.
What I am not really after is whether you like the look. What I cannot find out alone is where it breaks: a browser I do not have, a script I do not write, a deck longer than any I would give.
