The framework, slide by slide.

Web Components for technical presentations · zero build.

Why
Rikiki

Three constraints were chosen on purpose, and each one costs something

Open `index.html`

No build, no dev server, no toolchain. A deck is a folder.

Alive in 2031

Web standards only · Custom Elements, Shadow DOM, ES Modules, CSS variables.

~25 KB core

Lit + components. Anything bigger is opt-in.

Three layers keep the engine replaceable

graph TB A["Your deck
index.html
slides as <deck-*> elements"]:::deck B["rikiki
~20 Lit components
themes · livereload · overview"]:::pkg C["Web standards
Custom Elements · Shadow DOM
ES Modules · CSS Custom Properties"]:::std A --> B --> C classDef deck fill:#f07020,stroke:#b65820,color:#fff,stroke-width:2px classDef pkg fill:#00c8a0,stroke:#067a64,color:#fff,stroke-width:2px classDef std fill:#161c2e,stroke:#1e2840,color:#e8e4f0,stroke-width:2px

Anatomy

A slide is plain HTML, which is what makes it readable in 2031

<deck-feature eyebrow="Module"> <h1 slot="title">Side effects</h1> <p slot="lead" class="lead"> A module can act on import. </p> <deck-code lang="ts" hero> import './polyfill'; </deck-code> </deck-feature>

Layouts · <deck-feature> and friends provide structure · title, lead, body.

Slots · slot="title", slot="lead", slot="left", slot="right".

Atoms · <deck-code>, <deck-md>, <deck-callout>, <deck-card>, <deck-mermaid>.

The library

Six layouts cover six jobs, and a seventh would overlap one of them

<deck-cover>

<deck-section>

<deck-feature>

<deck-split>

<deck-feature-cards>

<deck-takeaway>

Atoms · the things you slot

<deck-callout> · boxed note · `info` / `warn` / `danger` / `ok`.

<deck-card color="…">

Tinted block · `yellow`, `orange`, `green`, `red`.

const greet = (n) => `Hi, ${n}`;

<deck-md>

**Markdown** body · GFM, tables, lists, `inline code`. Anywhere a paragraph would sit.

<deck-mermaid>

Mermaid diagram loaded **on demand** from CDN · the only opt-in CDN dep.

…plus 11 more

`<deck-stat>`, `<deck-badge>`, `<deck-punch>`, `<deck-grid>` and seven more · all in the reference.

Navigation

Sections go right · slides go down

Cover

Sec 1

Sec 2

Hook

A column is a chapter, opened by a <deck-section>. The rows under it are its sub-slides.

← / → jump between columns · sections.

↑ / ↓ walk the rows · sub-slides.

Space · linear next. Doesn't care about axes.

Every shortcut fits on one page, because there are deliberately few

Themes

Pick a theme · one link, one swap

rikiki · default

Tropical-jungle palette · **mango** primary, **helico** teal, **orchid**, **lime**. Unbounded + Inter + Space Mono via Google Fonts.

siliceum · warm paper

Warm paper palette · `#F7CB44` yellow accent, Source Sans Pro + JetBrains Mono, self-hosted woff2.

Quickstart

A deck goes from one file to a shared bundle without a build step

<!doctype html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="../../rikiki/tokens.css"> <script type="module" src="../../rikiki/dist/index.js"></script> </head> <body> <deck-root> <deck-cover brand="my-talk"><h1>Hello, <span class="accent">world</span>.</h1></deck-cover> <deck-feature eyebrow="One slide"><h1 slot="title">That's all you need.</h1> <deck-md>Write **markdown**, drop `<deck-*>` blocks, navigate with arrows.</deck-md></deck-feature> </deck-root> </body> </html>

The opt-in components stay out of the bundle until a deck asks

Component count, this repo

Every evidence block takes a source line under it

Region; Users; Plan EMEA; 12 040; Pro APAC; 9 310; Pro AMER; 6 220; Free

Internal usage export, September 2026

A record is a table with one row per field

Field	Value	What makes it authoritative
Incident	INC-4471	Assigned by the tracker on file
Detected	2026-09-03 02:14 UTC	Pager timestamp, not a recollection
Root cause	Connection pool exhaustion	Confirmed by the on-call engineer, not guessed
Owner	Platform team	Assignment recorded in the same tracker

Incident tracker, INC-4471

A pointer on a screenshot, still credited like a figure

Subscribing to the event beats polling the registry

Poll the registry

Simple, and always late.

Subscribe to the event

One path, no drift.

Rolls out behind a flag · reversible in one line.

A chain marks the stage you are on

A diagram is markup, not an image

Source = output.

A deck is a folder · open it in 2031, edit one character, give it again.