Quickstart

Getting started

For a first deck: install, write one slide, serve the folder, then check and export it. Four steps, no build, no toolchain.

1 · Install

Pick the install style that fits your workflow.

Via CDN (no install, needs the network)

Add two lines to any HTML page. Zero tooling · but the deck fetches the framework at load time, so it needs a working connection to jsdelivr every time it runs. For an offline or archived deck, install from npm or bundle to a single file instead. Always pin a version, as below.

<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/rikiki-deck@0.7.1/tokens.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/rikiki-deck@0.7.1/dist/index.js"></script>

Via npm (versioned, runs from your own folder)

terminal
mkdir my-talk
cd my-talk
npm init -y
npm install rikiki-deck
npx rikiki init index.html

The command writes index.html and copies its assets intorikiki/ inside my-talk/.

One thing still leaves the machine: the default theme (tokens.css, which imports themes/rikiki.css) pulls its typefaces from Google Fonts. For a deck that must run offline, pass--theme siliceum to init · that theme's woff2 files are copied into rikiki/fonts/ · or accept the system-font fallback, which is what rikiki bundle produces when it strips the remote import.

Via git clone (contributors)

The npm package lives in the rikiki/ folder of the repository. Build it from the TypeScript sources only if you plan to change the framework itself.

terminal
git clone https://gitlab.com/tordu-jardin/rikiki.git
cd rikiki/rikiki
npm install
npm run build

2 · Your first deck

Edit the generated index.html. This minimal example uses the assets copied by init.

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>
Live preview · slide canvas

rikiki/tokens.css is the theme entry point: it importsthemes/rikiki.css, so linking either file loads the same default theme. Pages here use both spellings.

3 · Serve it

Modules need http:// · don't double-click the file. Run any static server from the my-talk/ folder:

terminal
# Any static server works · pick one you already have:
python3 -m http.server 7799
# or
npx serve .
# ES modules require http://; do not double-click the file

Open http://localhost:7799/ and press → to go through the slides. That's the loop.

4 · Check and deliver

Before a deck leaves your machine, measure it and print it. The first command loads the deck in a real browser and reports what is wrong with it, slide by slide; the second turns it into a PDF, one page per slide. Both need the optional playwright peer.

terminal
# measure the deck in a real browser
npx rikiki check index.html

# one PDF page per slide
npx rikiki export index.html

Check and deliver covers the rest: the exit codescheck returns, the JSON report a script can read, the picturesrender writes, and the single-file bundle.

Where to go next