Presenting and exporting

Open the built dist/<deck>.html (or the dev preview) in a browser. The 1920×1080 canvas scales to any window.

Keys

Action	Key
Next / previous	`→` `←`, `Space`, `PageDown` `PageUp`
First / last slide	`Home` / `End`
Fullscreen	`F`, or the button in the control bar
Overview of all slides	`G`; arrows to select, `Enter` to open, `Esc` to return
Autoplay	`P` start / pause; advances every 8 seconds (including reveal steps) and stops on the last slide
Presenter view	`S` opens a second window
Laser pointer	`L` on / off, `Esc` off
Pen	`D` on / off, `C` clears; drawings clear when you change slides
Zoom	`Z`, then click to zoom 2×; `Z`, `Esc` or changing slides resets
Jump to a slide	Click the progress bar, or open `#/N`

The control bar (previous, play, next, overview, fullscreen) appears bottom-right when you move the mouse and hides after 2.4 seconds, so it never shows on screenshots or the projector.

Presenter view

Press S or open #/presenter. It shows the current slide, the next slide, your notes, a timer and a clock. Navigating in either window keeps both in sync.

Notes are written per slide:

{ id: 'numbers', label: 'Scale', notes: 'Mention the regional split.', render: () => <StatRow … /> }

PDF export

Open #/print and click “Print / Save as PDF”. You get one slide per page with all reveal steps expanded. Glass blur and gradient text are simplified in the PDF.

Step-by-step reveal (`build`)

{ id: 'funnel', label: 'Funnel', build: 'reveal', render: () => <Funnel … /> }

'reveal': items not yet discussed are dimmed; each → reveals the next one.
'focus': discussed items dim again, only the current item is bright. Good for Faq, Cycle, IssueTree, FlowDiagram.

Reveals only happen when you arrive with → or Space. Jumping in via progress bar, overview or #/N shows the full slide, which is also what QA screenshots. The template decides what counts as an item (list entries, cards, table rows, funnel stages, callouts). Dots in the header show progress. Don’t use build on slides with fewer than 3 items, and keep reveal slides to at most a third of the deck.

Tone: dark and accent slides

SlideDef.tone switches a single slide’s whole canvas, header and progress bar included:

tone: 'dark': only on SectionBreak, QuoteHero, Teaser, Closing, Statement (other templates become unreadable). FullBleed requires tone: 'dark'. Keep dark slides under a third of the deck; they work best at the start and end of chapters.
tone: 'accent': fills the slide with the theme colour. The strongest pause, so at most 2 per deck, only on SectionBreak, Statement, Closing. Typical use: a Statement that lands the conclusion of the data slide before it.
tone: 'light': in styles that are dark by default (mono-studio, keynote, warm-dark), switches one slide back to light.

Texture and transition

Deck-wide options on DeckDef:

export const deck: DeckDef = {
  title: '…',
  texture: 'grain',      // none | grain | paper | noise-dark — a faint full-slide texture
  transition: 'slide',   // fade (default) | slide | zoom | wipe | none
  backdrop: 'dots',      // none (default) | dots | mesh | paper | particles | grid — a layer behind the content
  slides: [ … ],
}

backdrop is decoration behind the content, coloured by the theme; animated ones move slowly and stand still for reduced motion and print. Override per slide with SlideDef.backdrop ('none' turns it off, e.g. on full-bleed photos).

Chapter numbers in Agenda fly into the large numeral of the following SectionBreak automatically. For a sentence that appears word by word, use the RevealStatement template.

npx slidehtml build <deck> writes dist/<deck>.html, a single file with fonts and images inlined. It needs no server and no network.