Getting Started

This page takes you from nothing to a deck you can present. You will:

1. Create a project and a first deck, and install dek into it
2. Write a script and step through the generated slides in a browser
3. Export a single HTML file for the venue

You will not write HTML, and you will not touch voice or video. The goal is a presentable deck of skeleton slides in the bundled theme.

Prerequisites

Bun 1.4 or later. dek runs on Bun only, so use bunx, not npx.

Create a project

Create the project somewhere outside the dek repository.

bunx @hajimism/dek init my-talks --deck 2026-04-vite

init lists the files it wrote and ends with the commands to run next:

next:
  cd my-talks
  bun add -d @hajimism/dek
  cd decks/2026-04-vite
  $EDITOR script.md
  bunx dekc

Run them in order. bun add -d installs dek into the project, and from then on bunx dekc runs that copy. It only fixes the CLI version; deck HTML never looks inside node_modules.

The command is dekc, not dek

The package is @hajimism/dek; the command it installs is dekc, not dek. dek on npm is an unrelated package, and bunx dek downloads and runs it. Inside a project, bunx dekc runs the dek installed there; outside one, use bunx @hajimism/dek.

You create a project once. The first deck comes with it; add more with dekc new <name>. Running init again is safe: it writes only what is missing and keeps every file that is there, marking the ones that differ from its own as (kept). Inside a project it refuses to make a second one and points at dekc new instead.

What you have

my-talks/
├── package.json        # from `bun add`, which pins dek
├── dek.toml            # project settings; empty until you change a default
├── AGENTS.md           # conventions for AI agents, regenerated by sync
├── .gitignore          # dist/, .cache/, .dek/server.json, node_modules/, refs/
├── .rumdl.toml         # Markdown rules for script.md
├── theme.css           # the starting point for every new deck
├── tsconfig.json       # editor types for slide scripts
├── assets/             # shared source material; decks copy what they use
├── decks/
│   └── 2026-04-vite/
│       ├── script.md   # the single source of truth
│       ├── theme.css   # this deck's own copy
│       ├── slides/     # one HTML file per slide, skeletons to start
│       └── assets/
└── .dek/
    ├── schema.json     # frontmatter schema for your editor
    └── slide.d.ts      # the DekSlide type for slide scripts

There is always a decks/ directory, even with a single deck. The theme.css at the project root is a template: dekc init and dekc new copy it into each new deck.

Write the script

Open script.md. init wrote a short starter script that explains itself: its sections are slides, its ### headings are beats, and its one-minute duration is the budget, so bunx dekc ls already shows an estimate against it. Replace it with your own talk. Each ## heading becomes one slide.

---
# yaml-language-server: $schema=../../.dek/schema.json
title: How I Built an HTML Slide Tool
event: Tokyo Frontend Meetup #42
date: 2026-04-18
duration: 20m
---

## intro

Hi. Today I want to talk about building my own slide tool.

> Keep the introduction short. Do not look at the clock.

## The one thing to take home {#architecture}

This is the one thing I want you to take home.

### The script is the parent {#script-parent}

First there is the script.

### Slides hang off it {#slides-hang}

The slides hang off it. Never the other way around.

The rules are few. A ## heading is a slide. A ### heading is a beat: a pause in the speaking, and a moment where the screen may advance. Paragraphs are what you say. A > blockquote is a stage direction; it is neither spoken nor counted toward timing.

A heading is display text, and {#id} names the slide's file. ## intro is only an id: it names slides/intro.html but gives the slide no title of its own. The first section takes the deck title instead; a later heading that is only an id leaves its slide untitled. Give such a heading text and an id, as ## The one thing to take home {#architecture} does.

Start the dev server

From inside the deck:

bunx dekc

The server generates a skeleton slide for every heading. The first section takes the deck title as its heading; "The one thing to take home" becomes a slide with its beats listed one by one. Every save re-renders, re-syncs, and lints. Open the printed URL, press the right arrow, and watch the beats appear in order.

You never need to run dekc sync or dekc lint by hand while the server is up.

Export for the venue

bunx dekc build

This writes decks/2026-04-vite/dist/2026-04-vite.html. Open that one file in a browser and give the talk. Pass --root-dist to collect builds under the project's own dist/ instead.

Next

• Build a real deck from start to finish: Tutorial
• Learn the script rules in depth: The Script
• Style a slide: Slides
• Hand the deck to an agent: Working with AI Agents