Slide Deck Application Demonstration

This is an application that allows authoring slide decks in markdown. It uses Web Origami to process a single document into multiple HTML documents, and then standard features of the web to make it all work nicely.

How it Works

Web Origami transforms this single markdown file into an entirely virtual tree of HTML pages.

Because of the attribute block on the divider above, moving to this slide triggers the sliding View Transition API.

Writing Slides

Slides are plain Markdown, so all the usual things work:

• Headings, bold, italic, and inline code
• Ordered and unordered lists
• Links and images
• Fenced code blocks, tables, and blockquotes

Each slide is separated by a horizontal rule with an optional attribute block.

Slide Attributes

Per-slide attributes go in braces on the divider:

--- { background: #fff, color: #111 }
			

Defaults for many of these can be set once in the frontmatter.

Layout Presets

The class attribute applies layout helpers: layout-center centres the content (like this slide), and layout-title centres and enlarges a title.

Speaker Notes

Add notes with an HTML comment: a one-liner that starts with notes:, or a notes block for something longer. They’re stripped from the slide and shown in the notes panel, the presenter window, and the printable view.

Par Times

A par time is the target duration for a slide. Set one per slide on the divider, or a default for the whole deck in the frontmatter. This deck uses par: 1m, and the “How it Works” slide overrides it with par: 1:30.

The Presenter window turns the slide timer red once you pass par, and compares the Total timer against the cumulative par for the slides so far.

Presenter Window

Open it with the Presenter button. It shows:

• The current slide and speaker notes.
• Elapsed and par timers, with separate resets.
• A live preview of the next slide.
• Navigation synced with the main window.

Print, Overview & Blackout

• Print opens a printable view of every slide, with an optional speaker-notes toggle.
• o opens the slide overview to jump anywhere.
• b blanks the screen if something goes wrong — any key brings it back.
• ? lists every shortcut.

Test Pattern

Every deck opens with a broadcast test pattern on slide 1, for checking colour, focus, and framing before presenting. Idea taken from Terence Eden’s post, Put an AV test at the start of your slides .

It isn’t counted in the deck’s slide total or included in the print view, and test-slide: false in the overal document frontmatter turns it off.

Thanks for Watching

The whole deck is one Markdown file. Edit it, run bun run dev, and you’re off to the races.