Browser-optimized paged export for Typst with videos, speaker notes, and custom elements.
#import "@preview/yap:0.1.0": video, notes
#video("example.mp4")
#notes[Speaker notes]If you're using the Typst web app,
export as SVG, you'll get a zip.
If you're using the local compiler,
run typst watch main.typ main{p}.svg.
Go to the yap webapp and select the exported zip or the project folder (folders are auto-reloaded when the content changes). You can also find more usage examples and the full API spec there.
When you're done, press enter in the viewer to save the document to disk.
There are 2 files to play with:
theme.cssif you want to change how the viewer looksextend.jsif you need custom behavior
You can create boxes or blocks with <labels> from within typst
and then get them as though they are HTML divs using the getTypstLabel("label")
function in extend.js.
YapTyp was initially built for a talk at my uni because different versions of PowerPoint and LibreOffice handle videos and speaker notes differently and don't play together, but the browser is the same-ish everywhere.
Then someone I know (non-programmer) needed a way to make something like a PDF but with embedded videos. Typst looks like a perfect fit for that, except... No video support.