0.2.0

What this package is#

typstage turns a single Typst file into an animated presentation for the browser, and a PDF from the same source. Typst typesets, the browser moves. Every slide is set by Typst as SVG, so the arrangement in the browser is the one on paper. Whatever is meant to move is marked in the source, and a small runtime animates it.

A slide therefore stays a slide, not a stack of intermediate states. The PDF has one page per slide, and whatever belongs to the motion alone falls away on paper – or, with pages: "step", one page per step, so the paper turns the way the talk does.

Five words this manual uses#

Slide

One picture, typeset once by Typst. One page of the PDF, one .ts-slide in the HTML.

Step

One press of the arrow key. A slide can hold several; at the last one the next press moves on. The address bar counts steps, the footer counts slides.

Element

A piece of a slide that the runtime may touch. anim, stagger, alternatives, morph, scene, embed, video and flipbook all produce one.

Morph

The same named element twice – on two adjacent slides, or on two steps of one slide. Between them it flies, glyph by glyph where it can.

Speaker view

The same file opened a second time with #speaker on the address. It carries the note, the clock and the next step, and it draws on the slide the room sees.

Where it sits among the others#

touying and polylux are mature, have far more themes, and make PDF. For a normal PDF talk, take one of those. reveal.js, Slidev and Quarto animate in the browser, but their layout is HTML’s, not Typst’s.

Nearest are the Typst packages that write HTML themselves. touying-exporter renders one SVG per slide and packages the sequence with impress.js. slipst follows slipshow and gives up the fixed-size slide altogether: there “slips” scroll from top to bottom. On the PDF side, mosaic is worth a look – it cuts its slides from the same headings this package does, = for the section and == for the slide – and so is slydekit. Three of the seventeen example decks are adaptations of mosaic decks, so that part of the comparison is on the screen rather than in my prose.

What this package does instead: a named piece stands in one place on slide n and elsewhere on slide n+1, and it flies between the two – glyph by glyph, so an equation visibly rewrites itself. Weaker forms cover the rest: a page that turns, a cross-fade, whole slides pushed around by a script. What carries all of it is one SVG per state rather than per slide, so between two states there is something left that can fly.

This manual is ordered by intent rather than by function:

1. Your first presentation — from the empty file to a running HTML
2. One deck, from start to finish — one talk, built to the end
3. Revealing a slide step by step — pause, stagger, anim, alternatives
4. Showing instead of claiming — an applet, a video, a flip book
5. GeoGebra — constructions that follow the steps of the slide
6. Desmos — the same road, a different calculator
7. Developing a calculation — magic move across several slides
8. Giving the talk — keys, touch, the overview, the speaker view
9. Three outputs from one source — talk, slide deck, handout
10. Making it your own — themes, colours, canvas, building blocks
11. Handing it on — one file, assets, hosting
12. What it cannot do — reach, accessibility, size
13. When nothing happens — the traps, in the order they are usually hit
14. API reference — every function, from the source