The whole framework,
in 14 slides.

Web Components for technical presentations · zero build, archivable in 2031.

Why
Rikiki

Three on-purpose constraints

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 thin layers

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 just HTML

<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, six jobs

<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-shortcut>`, `<deck-badge>`, `<deck-metric>`, `<deck-tier-list>`, `<deck-step-list>`, `<deck-kicker>`, `<deck-stack>`, `<deck-grid>`, `<deck-punch>`, `<deck-root>`.

Navigation

Sections go right · slides go down

Cover
Sec 1
·
·
Sec 2
·
·
·
Hook
Each column is a chapter (opened by a <deck-section>); rows below are sub-slides inside it. The highlighted cell is the current slide. ← / → jump between columns · sections. ↑ / ↓ walk the rows · sub-slides. Space · linear next. Doesn't care about axes.

Every key, on one page

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. <link rel="stylesheet" href="rikiki/tokens.css">

siliceum · warm paper

Warm paper palette · `#F7CB44` yellow accent, Source Sans Pro + JetBrains Mono, self-hosted woff2. <link rel="stylesheet" href="rikiki/themes/siliceum.css">

Quickstart

A deck, end to end

<!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> Source = output.

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