Example deck

deckfile

A presentation as one HTML file. No build step, no dependencies, and it works offline.

Press → to continue

These are speaker notes. The presenter view and the edit view show them, and no slide does.

Overview

Everything is in one file

<style data-deck="engine">Places, scales and prints the slidesReplaced on update
<style data-deck="theme">Colours, fonts and slide layoutsYours to change
<section class="slide">One per slide, with its speaker notesYours to write
<script data-deck="engine">Keys, builds, presenter view, edit viewReplaced on update

Open this file in a text editor and you will find these four parts, in this order, with one more style block after the theme for CSS of your own. Each press of → shows the next one.

01

Write

How a slide is written: its markup, classes, builds, speaker notes and theme.

01 · Write

A slide is a section

Markup

<section class="slide"> <h2>One idea per slide</h2> <ul> <li>Say one thing</li> <li>Show it large</li> </ul> </section>

Result

One idea per slide

  • Say one thing
  • Show it large

The markup on the left renders as the slide on the right. The engine shows one section at a time and scales it to the window.

01 · Write

Classes lay it out

The theme has a class for each kind of slide and each block on it.

On the section

title opens the deck
divider starts a part
closing ends it
dark turns any of them dark

Blocks

cols for columns
stats for figures
keys for a table
term for code

Text

kicker says where you are
sub leads in
small for a source
build waits for a press

This slide is three columns with a label over each. The components reference lists every class with its markup.

01 · Write

A build waits for a press

Add class="build" to any element. Press → now.

The items reveal in document order. ↓ skips to the next slide with every item shown, and printing to PDF shows them all.

01 · Write

data-auto reveals them on a timer

Add data-auto="600" to the section. Each item follows 600 ms after the last.

0.6 sFirst item
1.2 sSecond item
1.8 sThird item

The timer starts when you arrive with →. ↓ and ↑ show every item at once. Pressing → or ← takes over from the timer.

01 · Write

Speaker notes live inside the slide

What the room sees

Nothing. Notes show in the presenter view and the edit view, never on the slide or in the PDF.

Press S to read this slide's notes.

Markup

<section class="slide"> <h2>…</h2> <div class="s-notes"> <p>What to say here.</p> </div> </section>

These are this slide's notes. The presenter view and the edit view show them.

01 · Write

A theme is a set of CSS tokens

To brand a deck

Set your colours, fonts and logo in the theme block, and every slide follows.

CSS for one deck goes in the last <style> block.

Theme block

:root{ --primary:#111110; --white:#F7F6F2; --action:#C2310A; --font-display:"Geist",…; --font-mono:"Geist Mono",…; --logo:none; }

These are real tokens from this file's theme block. The full list is in the theming reference.

02

Present

What you get in front of a room: the presenter view, the keys and a PDF.

02 · Present

S opens the presenter view

A second window shows the current slide, what the next press brings, your notes, a timer and the clock.

Steer from either window. They stay in step.

08:42 10:24 01 · WRITE One idea per slide SLIDE 11 OF 18 NEXT SLIDE SPEAKER NOTES A− A+ Open with the question,then wait for a handto go up.

Press S to open it. If nothing opens, allow pop-ups for this page. Drag the deck window to the projector and press F there.

02 · Present

The keyboard steers the deck

→SpaceNext item, then next slide
←Back one item, then previous slide
↓↑Next or previous slide, with every item shown
FFullscreen
SEPresenter view, edit view

Move the pointer to the bottom-left corner for buttons and the full list.

Clicking also works: the left 30 % of the screen goes back and the rest goes forward. On a touch screen, swipe.

02 · Present

P prints the deck to PDF

Press P and choose Save as PDF in the print dialog.

The PDF is the hand-out. Backgrounds print as they show, so a dark slide stays dark.

03

Change

How a deck changes after it is written: edits in the browser, suggestions for a coding agent, and updates to the engine.

03 · Change

E opens the edit view

In Edit, double-click text to change it, or click an element to move, copy or delete it. Save writes the file.

In Suggest, click an element and type what should change, for a coding agent.

my-talk EditSuggest Save 1 01 · WRITE A heading that says the point 01 Slide 8 › h2 "A heading that says…" Make this one line shorter SPEAKER NOTES SUGGESTIONS Slide 8 · A heading… 01 Make this one lineshorter Copy prompt Clear Slide 8 of 18

Press E to try it on this slide. Changes stay in this window until you save them; suggestions are kept in this browser, per deck. Press E again to come back.

03 · Change

Copy prompt collects every suggestion

Paste it into Claude Code or another coding agent. It names the file, the slide and the element.

## 1. Slide 8: Speaker notes live inside the slide Where: box x 120-1520, y 176-255, on `h2` "Speaker notes live inside the slide" Element: `#stage > section:nth-child(8) > h2:nth-child(2)` Suggestion: Make this heading shorter

This is one suggestion from a prompt, which starts by naming the deck file. The selector and the text tell the agent where to look.

03 · Change

Updating replaces only the engine

Your slides and theme stay as they are.

$ npx github:roaldnefs/deckfile update my-talk/index.html my-talk/index.html: updated $ npx github:roaldnefs/deckfile update --check my-talk/index.html my-talk/index.html: up to date

With --check, nothing is written, and the command exits 1 if the deck is out of date.

Start

Start from template.html

  1. Copy it to my-talk/index.html
  2. Replace the slides with your own
  3. Open it in a browser
deckfile on GitHub

deckfile is MIT licensed, by Roald Nefs. Delete these slides from your copy and keep the rest of the file.