HTML slide decks · built on web standards

Easy to edit.
Easy to share.

HTML + Web Components · ~14 KB gzip · zero build · MIT

It's one HTML file. Open it in any editor, change a word, save. Drop the folder on any static host and send the link. No build, no export, no toolchain to keep happy.

Get started Watch the 17-slide tour →

~14 KB gzip · framework
30 components
0 build steps for deck authors
MIT

examples/rikiki-tour Open ↗

01 Why

Three constraints, on purpose

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.

~14 KB gzip

Lit and 30 components. Anything bigger, you opt in.

02 Two products, one folder

Add three attributes. The deck becomes a carousel.

Same components. Same theming. Same ~14 KB bundle. This wasn't planned. It falls out of building the engine on Web Components and CSS custom properties, so you get it for free.

A slide deck A carousel

<deck-root autoplay="4000" loop swipe transition="slide">
  <deck-cover>...</deck-cover>
  <deck-feature>...</deck-feature>
  <deck-feature>...</deck-feature>
</deck-root>

Three attributes. That's the whole change. Same markup as any other deck. The engine stops waiting on you and starts auto-advancing, with touch swipe.

As a slide deck

Leave the three off. Keep 2D nav, the presenter window, speaker notes, step-reveal.

P presenter
O overview
. blank

As a carousel

Add the three. Get touch swipe, autoplay that pauses on hover, an end that wraps to the start.

60 px swipe
Hover-pause
Loop

03 Anatomy

A slide is just HTML

Source · index.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 give you structure. Title, lead, body.

Slots

Drop content where it goes. slot="title", slot="lead", slot="left", slot="right".

Atoms

The pieces inside. <deck-code>, <deck-md>, <deck-callout>, <deck-card>, <deck-mermaid>.

04 Library

Layouts, one job each

<deck-cover>

The opener. XL title on dark, brand mark if you want one, meta block.
<deck-section>

A chapter break. Number and centered title on dark.
<deck-feature>

One thing in focus. Code, a table, a mermaid diagram, a big stat.
<deck-split>

Two columns or three. cols="1-1", "1-2", "3".
<deck-feature-cards>

Hero up top, two detail cards under it.
<deck-takeaway>

The line they remember. Centered, on dark.

And there's more. <deck-photo> for full-bleed images, plus ~23 other building blocks · md, code, callout, card, mermaid, stat, badge, metric, tier-list, step-list, kicker, stack, grid, punch, shortcut, kbd · and the rest.

05 Two themes

Pick a look. One link, one swap.

Live preview Click a theme above · the slide below re-renders.

Every component reads its colors, type and spacing from CSS custom properties. Want a third theme? Copy themes/rikiki.css, change the values, ship it.

06 60 seconds, no install

A deck, end to end

my-talk/index.html

<!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 &lt;deck-*&gt; blocks, navigate with arrows.</deck-md>
    </deck-feature>
  </deck-root>
</body>
</html>

Drop this file on any static host. GitHub Pages, S3, Netlify, your local python -m http.server. No build, no environment to set up.

Want the guided version? → Your first deck in 5 components.

07 Plugin shelf

Five opt-in modules. Nothing else loads.

The ~14 KB core ships none of these. Each one fetches on first use. A deck that never asks for a feature never pays for it.

Total if you enable everything · ~6.4 KB gzip on top of core

DX Livereload

Edit a slide. The deck reloads itself.

A tiny built-in poller watches your deck files and reloads the page the moment one changes · landing you right back on the slide you were editing. Zero config, authoring-only, never shipped to the audience. Try it live below.

Edit · slide source

Preview · reloads on edit

livereload on

Enable it on any deck by appending ?live to the URL · the core lazy-imports the poller on demand. Prefer it always on while authoring? Load dist/livereload.js directly and it auto-starts on import.

08 Comparison

Where Rikiki sits

Read this fairly. Slidev, reveal.js, Marp and Spectacle are all good. Rikiki is for one case. You want to open a folder five years from now and still give the talk. Or drop a touch-friendly carousel on a landing page. That one constraint explains every column below.

	Rikiki our case	Slidev	reveal.js	Marp	Spectacle
Source format	HTML	Markdown + Vue	HTML + JS	Markdown	JSX
Build step	✓ no	× yes (Vite)	~ optional	× yes (CLI)	× yes (webpack)
Runtime bundle (gz)	~14 KB	~600 KB	~80 KB	~50 KB	~250 KB
Per-deck deps	1 CSS + 1 JS	package.json	reveal.js dir	marp-cli	package.json
Works in 5 years	✓ yes	~ depends on Vue	✓ yes	~ depends on CLI	~ depends on JSX

Convinced? Try it in 60 seconds.

No build, no install. Drop one HTML file on a static host.

Read the 5-min start →

Honest limits

Not the right tool when…

Rikiki is opinionated. Here's what it deliberately doesn't do, so you can rule it out fast.

You want a WYSIWYG editor. Rikiki is write HTML, open in a browser. There's no builder UI, and there won't be one.
You need PowerPoint-style animation on shapes. Per-element timelines live in Keynote and Slidev, not here. You get slide-level transitions (fade, slide, zoom, flip). That's the lot.
You want a hosted SaaS. There isn't one. You host the static files yourself. S3, GitHub Pages, an nginx alias, whatever you've got.
You need PowerPoint export. Rikiki gives you HTML. .pptx output isn't on the roadmap. Print to PDF from the browser instead (Chromium, print backgrounds on).
You're allergic to Web Components. Custom Elements and Shadow DOM are the core. If your team policy bans them, walk away.

FAQ

Common questions

Why Lit Web Components and not React, Vue or Svelte?

Lit compiles to standard Web Components, which the browser runs natively. The runtime is ~14 KB gz, against ~50 KB for React plus ReactDOM, and it needs no build step on your side. A deck stays a folder. Open it in 2031, it still runs.

Do I need to know Lit to write a deck?

No. You write HTML tags. Lit is what built the components under the hood. What you touch is plain HTML and CSS custom properties. No decorators, no template literals, no extending classes.

Can I print my deck to PDF?

Yes, from the browser. Chromium with print-backgrounds on gives the cleanest result. There is no separate CLI. Slides are plain HTML, so the browser print pipeline handles it.

Is there a presenter mode with notes?

Yes. Wrap notes in <deck-notes> inside any slide, then press P during the talk. A popup opens with the current and next slide, the notes, a timer and a slide counter. Sync runs over BroadcastChannel. No network call.

How do I theme a deck for my brand?

Copy themes/rikiki.css, change the values, link it instead of the default. ~140 CSS custom properties, in two layers (palette, then semantic). For a one-off, override the --deck-*-* tokens inline on the element.

What if I want an animation that is not in the box?

Drop a <script> inside any slide and run whatever JS you like. The slide is just an HTML host. Most of the time the four built-in transitions (slide, fade, zoom, flip) cover it. For one-off effects, GSAP and friends are a script tag away.

Why also pitch carousels?

Because autoplay loop swipe on <deck-root> turns the same engine into a touch-friendly carousel. Same components, same theming, same ~14 KB bundle. The dual use falls out of building on web standards.

Documentation

Browse the docs

Six entry points into the full reference. Pick the one that matches what you came for.

The whole point

Source = output.

A deck is a folder. Open it in 2031, change one character, give the talk again.

Easy to edit.
Easy to share.

Three constraints, on purpose

Open `index.html`

Alive in 2031

~14 KB gzip

Add three attributes. The deck becomes a carousel.

As a slide deck

As a carousel

A slide is just HTML

Layouts

Slots

Atoms

Layouts, one job each

<deck-cover>

<deck-section>

<deck-feature>

<deck-split>

<deck-feature-cards>

<deck-takeaway>

Pick a look. One link, one swap.

A deck, end to end

Five opt-in modules. Nothing else loads.

transitions `deck-transition.js`

presenter mode `deck-presenter.js`

syntax `shiki.js`

click reveals `click-stages.js`

speaker notes `deck-notes`

Edit a slide. The deck reloads itself.

Where Rikiki sits

Not the right tool when…

Common questions

Browse the docs

Install · Quickstart

Anatomy of a slide

Component library

Navigation & overview

Theming · design tokens

Recipes

Easy to edit. Easy to share.

Three constraints, on purpose

Open index.html

Alive in 2031

~14 KB gzip

Add three attributes. The deck becomes a carousel.

A slide is just HTML

Layouts

Slots

Atoms

Layouts, one job each

<deck-cover>

<deck-section>

<deck-feature>

<deck-split>

<deck-feature-cards>

<deck-takeaway>

Pick a look. One link, one swap.

A deck, end to end

Where Rikiki sits

Not the right tool when…

Common questions

Browse the docs

Install · Quickstart

Anatomy of a slide

Component library

Navigation & overview

Theming · design tokens

Recipes

Easy to edit.
Easy to share.

Open `index.html`