Quickstart

Getting started

From zero to a live deck in three steps. No build, no toolchain.

1 · Install

Pick the install style that fits your workflow.

Via CDN (no install)

Add two lines to any HTML page. Zero tooling, zero dependencies.

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

Via npm (versioned, offline-friendly)

terminal
npm install rikiki

Then reference the files relative to node_modules/rikiki/ · or copy node_modules/rikiki next to your deck and commit it.

Via git clone (contributors)

Clone the repo, the rikiki/ folder is what you ship. Run npm install inside it only if you plan to rebuild from sources.

2 · Your first deck

Create a single HTML file. That's the whole project.

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>

3 · Serve it

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

terminal
# Any static server works · pick one you already have:
python3 -m http.server 7799
# or
npx serve .
# or just open the file directly in Chrome (modules need http:// though)

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

Where to go next

  • Anatomy of a slide · how a <deck-*> element maps to what you see.
  • The component library · all 23 elements with their attributes and slots.
  • Navigation · ←/→, ↑/↓, Space, O, ? · and the 2D model behind them.
  • Theming · how the design tokens work and how to write a new theme.