Zoomdeck

Zooming presentations written in Markdown and played entirely in the browser.

What Zoomdeck does#

A Zoomdeck presentation is a tree of slides. Each slide has its own logical canvas and a small animation program; child slides sit inside their parent's canvas as viewports. Presenting means visiting the tree in pre-order: the camera zooms into each child, plays its steps and zooms back out, so the audience always sees where a detail belongs.

You write slides in a Markdown dialect: prose, LaTeX formulas, images, video, shapes, arrows, code listings, live web pages, fragments that appear on clicks, and animations such as moves, morphs and effects. When the dialect is not enough, a slide can be a small TypeScript class with the full animation engine at hand. Everything runs live on a WebGL canvas in the browser: a deck loads, records itself once, and then plays forwards and backwards instantly, with an outline, deep links, a pen, a highlighter, a spotlight and configurable keys. The same deck previews while you edit it and exports to a static folder or to a single HTML file that plays from disk.

Requirements#

Nothing else is required: no Python, no LaTeX installation (formulas render through MathJax in the browser), no video encoder, no font installation (the Latin Modern text face is bundled). Exported decks are plain HTML and need no server to be viewed.

cd Zoomdeck
npm install
npm run dev        # opens the guide deck at http://localhost:5173/

Getting started continues from here with a first deck and the command line.

The guide#

The guide deck is Zoomdeck's own demonstration and the companion of this documentation: a presentation in which every chapter shows a feature next to the listing that produces it. Open the guide — it is a single self-contained HTML file next to these pages, exported from examples/guide/ when you run npm install (and again by npm run docs); it runs from disk or from any web server, and npm run dev opens the same deck live. Each chapter has its own link:

The project lives at github.com/puppis/zoomdeck; this site and the guide are published from it at puppis.github.io/zoomdeck. The guide's sources are in examples/guide/: slides.md, deck.json, code-slides.ts and a few generated assets. Copying that folder is a good way to start a deck; exporting your own deck the same way (zoomdeck build <deck> -o <folder> --one-file) gives a file like guide.html.

Documentation#