For developers and their coding agents

Write the deck or brief your agent.
Check it. Ship it.

Readable HTML · no build step · automated deck checks · offline delivery · MIT

A deck is a folder of readable HTML on Web standards: no build step for the author, a clean diff in Git, and the runtime sits in the folder, so nothing needs reinstalling when you reopen it. You or your coding agent write the slides; Rikiki checks every slide in a browser and exports standalone HTML or PDF.

Create your first deckSee a finished deck

Interactive example

Write. Inspect. Deliver.

Edit the HTML and watch the slide respond. The panel below runs three sample rules of its own, so you can see the loop from edit to diagnostic; the real rikiki check command loads every slide in Chromium and reports structural, runtime, timing and visual-layout diagnostics.

What you write

index.htmlEditable
Sample checks · not the CLIinteractive example

What Rikiki renders

Module

Side effects

A module can act on import.

import './polyfill';
  1. Layout<deck-feature> sets the composition.
  2. Content fieldstitle and lead place the copy.
  3. Content component<deck-code> renders the code.
  1. Startnpx rikiki init index.htmlstarter deck
  2. Inspectnpx rikiki check index.htmldiagnostic report
  3. Reviewnpx rikiki render index.htmlPNGs + gallery
  4. Packagenpx rikiki bundle index.htmlstandalone HTML
  5. Delivernpx rikiki export index.htmlPDF
Create your first deckInstall the package and Playwright once (npm i -D playwright && npx playwright install chromium); bundle also needs the rolldown bundler.

Example decks

See finished decks

These are the example decks shipped in the repository, under examples/. The docs tour is the reference: it is the deck the documentation itself runs on.

Thumbnails rendered by npx rikiki render, one picture per first slide.

Coding-agent workflow

Brief your agent, then check its deck

Rikiki ships a component reference and an authoring workflow for coding agents. Hand your own agent a brief plus llms.txt, the packaged component reference; it writes the same HTML you would review by hand, and rikiki check returns diagnostics for the next revision. Rikiki supplies the reference and the checks, not an AI service.

Agent workflowBrief → HTML → diagnostics → files
  1. 01Briefyour brief
  2. 02Referencellms.txt
  3. 03Deckindex.html
  4. 04Deck checksrikiki check
  5. 05DeliveryHTML · PDF · PNGs
Open the complete agent workflow (Markdown)

Reusable parts

Compose with purpose-built layouts

  • Open the deck <deck-cover>

    An XL title on a dark surface, with an optional brand mark and a meta block for the speaker, company and talk duration.

  • Focus one idea <deck-feature>

    One idea per slide, backed by code, a Markdown table, a mermaid diagram or a single large stat.

  • Compare columns <deck-split>

    Lay content side by side in two or three columns, with ratios like cols="1-1", "1-2" or "3".

  • Give each idea its own cell <deck-bento>

    Arrange several ideas on one slide with explicit rows, columns and spans, so each keeps the space it deserves.

  • Present evidence <deck-kpi-grid> optional module

    Align a small set of metrics so the result reads in one glance. Loads from dist/deck-kpi-grid.js when a deck imports it.

  • Land the message <deck-takeaway>

    A single line, centered on a dark background, for the point the audience should remember.

Swipe to browse · 6 layouts

Mediaphoto · mermaid · code

Datastat · metric · tier list

Structuregrid · stack · cards

Browse all components

Design system

Brand the same source with tokens

Live tokenChange the accent in the rendered deck
Customize every token
Live previewClick a theme above · the slide below re-renders.

Theme tokens control the main colors, type and spacing of deck components. Copy themes/rikiki.css, keep its structure and adjust the values for your brand.

Embedded learning

Put the deck inside the page.

A Rikiki deck is a Web Component, so the same material can live inside a training course, an onboarding guide, or product documentation. The slide canvas scales to its container; keyboard navigation starts when the embedded deck has focus.

Live carouselSwipe or use the arrows
1 / 3

The integration

<deck-root
  autoplay="4000"
  loop
  swipe>
  …your slides
</deck-root>

Add three attributes to the existing deck. Autoplay pauses on hover, touch gestures work on mobile, and loop returns to the first slide.

Open the example

Optional modules

Bring only the pieces the deck needs.

The ~43 KB initial load excludes these modules. In a source deck, imported modules load when their feature starts. A standalone bundle packages them locally.

Sizes below are measured from the current gzip-compressed build artifacts.

  1. 1.7KB gzip

    transitionsdeck-transition.js

    Add slide, fade, zoom or flip transitions only when a deck asks for them.

    Activatetransition="slide"

  2. 6KB gzip

    presenter modedeck-presenter.js

    Open the current slide, next slide, notes and timer in a synchronized presenter window.

    Activatepress P

  3. 0.4 + 113KB gzip, loader + engine

    syntax highlightingshiki.js

    Load TextMate syntax highlighting and its vendored engine on first use, with no CDN request.

    ActivateinstallShiki()

Optional component modules

<deck-agenda> · <deck-flow> · <deck-graph> · <deck-kpi-grid> · <deck-timeline> · <deck-versus> · and more

A deck is plain HTML, so your own custom elements or a stylesheet can sit next to it and load with a <script type="module"> tag, with no build step. Read the API reference

Read the optional-module reference

Fit check

Know when Rikiki fits.

Rikiki is a small tool with a definite shape. Both lists are short on purpose.

Choose it for

  • Versioned HTML.A deck is a source file. Diff it, review it in a merge request, tag it with the release it belongs to.
  • Technical presentations.Code, diagrams, KPIs and diagnostics are components, not screenshots pasted into a slide.
  • Files you deliver yourself.One standalone HTML, a PDF and slide images, hosted or attached wherever you already ship.

Look elsewhere if

  • You want a WYSIWYG editor.Rikiki uses HTML source and a browser preview. It has no visual builder.
  • You need PowerPoint-style animation on shapes.It supports slide-level fade, slide, zoom and flip transitions, not free-form timelines.
  • You want a hosted SaaS.Rikiki creates static files that you host with your existing web infrastructure.
  • You need PowerPoint export.Rikiki exports standalone HTML and PDF. It does not export .pptx files.
  • Your environment forbids Web Components.Custom Elements and Shadow DOM are part of the runtime.

FAQ

Check the requirements before you start.

What do I need to know to create a deck?
HTML and CSS are enough. Write the supplied custom elements, then change CSS variables for your brand. Lit, a small Web Components library, is an implementation detail; deck authors do not write Lit classes or templates.
Can I write my slides in Markdown?
Not as a deck format, and that is a design choice: a slide is an HTML custom element, so the file you write is the file the browser runs, with no custom syntax or --- separator to learn. Inside a slide, the core <deck-md> component renders standard GitHub-flavoured Markdown, including headings, lists, links, tables, code blocks and images, plus one ::: cards fence that expands into a card grid. A deck can mix HTML slides and Markdown bodies freely.
Can I print my deck to PDF?
Yes, two ways. From the browser, print with backgrounds on: the deck carries its own print stylesheet, so every slide becomes one page at the deck’s canvas size, chrome hidden. Or run rikiki export deck.html --output deck.pdf, which drives a headless Chromium and waits for fonts and diagrams first. The CLI needs Playwright, an optional peer dependency.
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. The two windows synchronize locally through BroadcastChannel; no external service is involved.
How do I theme a deck for my brand?
Copy themes/rikiki.css, change the palette and semantic CSS variables, then link your file instead of the default theme. For one component instance, override its documented --deck-* variables directly.
Can I embed a deck in documentation or training?
Yes. Put <deck-root> in a page and add autoplay loop swipe for a touch-friendly carousel with the same ~43 KB initial load. Keyboard input stays scoped to the deck while it has focus.
What does rikiki check report?
rikiki check loads every slide in Chromium and reports structural, runtime, timing and visual-layout risks. It does not test contrast, focus order or screen-reader output, so keep an accessibility review in your release process.
Is a deck accessible?
The example decks are tested with axe in Chromium, Firefox and WebKit, and a serious or critical violation fails the suite. The overview opens, moves and picks a slide with the keyboard alone, every on-screen control is a real focusable button, a slide change is announced to assistive technology through a live region, and no slide animates under prefers-reduced-motion. rikiki export writes a tagged PDF with one bookmark per slide. Those tests cover the shipped examples and the runtime, not the contrast or the reading order of the content you write.
What requires Node.js?
The deck runs in a browser. Node.js ^20.19.0 || >=22.12.0 is required for the CLI commands that initialize, inspect, render, bundle or export it. The commands that drive a browser, namely check, render and export, also need the optional Playwright peer dependency: npm i -D playwright && npx playwright install chromium. bundle and init --standalone need the optional rolldown peer dependency instead.
Which browsers are tested?
The base rendering, navigation, scaling and offline-bundle contract is tested in Chromium, Firefox and WebKit. PDF export and multi-screen presenter features are Chromium-specific.
Why is there no build step and no custom syntax?
There is no build step on the author side: the served folder contains the runtime, so you open index.html from any static HTTP server and it runs. Everything rests on Web standards, namely Custom Elements, Shadow DOM, ES Modules and CSS custom properties, with a thin component library rather than an application framework underneath. The source is readable HTML, so a slide reads the same in your editor and in the browser. Features beyond the core, such as presenter mode, transitions or syntax highlighting, are opt-in modules you import only when a deck needs them.
Who maintains it, and what is the release status?
The project is developed by Cédric Chariere Fiedler and released under the MIT license; source, issues and merge requests live at gitlab.com/tordu-jardin/rikiki. Version 0.7.1 shipped on 12 September 2026, and from that tag a breaking change means a major version bump. The changelog lists every release.

Ready to try it

Create a checked, standalone deck.

Review the diagnostics and slide images before you deliver the offline HTML and PDF.

Create your first deckOpen the agent reference (plain text)
$ npm install rikiki-deck
$ npx rikiki init index.html