typstage

0.2.0

Animated HTML presentations from a single Typst file, and a PDF handout from the same source. Typst typesets, the browser moves: magic-move morphing, step-by-step reveals, slide transitions, media and a speaker view in the same file.

Handing it on#

Getting the talk to where it will be given.

One file#

assets: "inline" is the default and writes the runtime into the HTML. The result is one file that runs from a memory stick, from a download folder, from an email attachment. No server, no network, nothing loaded afterwards. The runtime adds about 330 KB to every deck.

Beside the file#

assets: "split" refers to two files next to the HTML instead, and runtime-files gives you their names and contents so you can write them out:

#for f in runtime-files {
  // f.name and f.content
}

That is worth it where many decks are published together: the browser caches the runtime once, and every deck after the first pays nothing for it. On short decks that is about half of what visitors load.

assets: (cdn: "https://…") points at a directory on a server or a CDN. It takes a dictionary, not a bare string: a string falls through unread, and the page then links names that are not there.

The address of a step#

The address bar says where the talk stands – not only which slide, but which step on it:

// talk.html#slide-3      slide 3, its first step
// talk.html#slide-3-2    slide 3, second step
// talk.html#speaker      the speaker view

The link can be copied and passed on; whoever opens it stands exactly there. The numbers are the slide numbers, counted from one, and a step that does not (or no longer) exist leads to the last one of its slide rather than nowhere.

Note
Until 0.1.2 the running step over the whole deck stood there (#7). Such a link held only until the next slide was inserted: everything behind it moved on. It is still read, so old bookmarks keep working, but no longer written.

Hosting#

The HTML file is static. Anything that serves files serves it: GitHub Pages, a university web space, an S3 bucket.

Media travels beside the file. video("clip.mp4") refers to a file that has to lie next to the HTML; without it an uploaded deck shows an empty frame where it worked locally.

A deck opened from file:// behaves like one from a server, speaker view included.