Reference

<deck-root> API

Programmatic surface · navigation methods, lifecycle, and the keyboard event you can intercept.

Reactive properties

Property	Type	What it controls
`current`	`number` (state)	Index of the active slide (0-based).
`step`	`number` (state)	Current step within the active slide (0 = first reveal).
`overview`	`boolean` (reflected)	Toggles the overview mode.
`transition`	`string` (reflected)	Lazy-loads the transition plugin. See Plugins · transitions.
`autoplay`	`number` ms (reflected)	Auto-advance interval. `0` disables. Pauses on hover, resets on user nav.
`loop`	`boolean` (reflected)	Wrap around at the deck edges (carousel mode).
`swipe`	`boolean` (reflected)	Enable pointer-driven horizontal swipe navigation (touch + mouse).
`fluid`	`boolean` (reflected)	Fill the box and reflow instead of the zoom-to-fit canvas. Also honoured per slide (a slide carrying `fluid` escapes the canvas for the real viewport).
`noHint`	`boolean` · attr `no-hint`	Hide the bottom-left key-hint chips.
`noArrows`	`boolean` · attr `no-arrows`	Hide the bottom-right navigation chevrons.
`noZoom`	`boolean` · attr `no-zoom`	Disable slide zoom (Ctrl/⌘+wheel, pinch, `+`/`-`/`0`) · on by default.

Carousel mode

Combine autoplay, loop, swipe and transition to turn a deck into a fully-functional carousel. The four attributes are mutually independent · you can use any subset.

carousel

<!-- Carousel mode · auto-advance every 4 s, wrap at end, swipe enabled -->
<deck-root autoplay="4000" loop swipe transition="slide">
  <deck-feature>
    <h1 slot="title">Slide 1</h1>
  </deck-feature>
  <deck-feature>
    <h1 slot="title">Slide 2</h1>
  </deck-feature>
  <deck-feature>
    <h1 slot="title">Slide 3</h1>
  </deck-feature>
</deck-root>

Behaviour notes:

Autoplay pauses while the pointer is over the deck and while the overview is open.
Any keyboard navigation resets the autoplay countdown so a manual nudge doesn't double-jump.
Swipe threshold is 60 px horizontal and at most 2× the vertical drift · accidental vertical scrolls are ignored.
Swipe is automatically disabled inside links, buttons, inputs, and other interactive children.

Built-in key bindings

Key	Behavior
`←` `→`	Section nav · linear fallback at edges
`↑` `↓`	Sub-slide nav · linear fallback at section boundaries
`Space` `PgDn`	Linear next
`PgUp`	Linear previous
`Home` `End`	First / last slide
`O`	Toggle overview · lazy-loads `deck-overview.js` on first press
`P`	Toggle presenter window · lazy-loads `deck-presenter.js`
`?` `H`	Open help · lazy-loads `deck-help.js` on first press
`B` `.`	Black screen (clicker convention) · any key dismisses
`W` `,`	White screen (clicker convention) · any key dismisses
`Esc`	Close any overlay / blank screen

URL hash

The canonical URL is #N · slide N (1-indexed, flat). Other forms accepted on input only:

#C.N · chapter C, sub-slide N · rewritten to flat.
#N.s · slide N at step s.

Step-reveal in `<deck-code>`

Reveal subsets of lines progressively. step-groups is a JSON array of arrays · each inner array lists the 1-based line numbers to highlight at that step. Step 0 = all lines visible at full opacity.

A 3-step code reveal

<deck-code lang="js" hero step-groups='[[1,2],[3,4],[1,2,3,4,5]]'>
  const a = 1;
  const b = 2;
  function sum() {
    return a + b;
  }
  sum();
</deck-code>

Customization tokens

The deck-root chrome (progress bar, slide counter dots, keyboard hints) is themed via these CSS custom properties · set them on the host or any ancestor.

--deck-root-bg · backdrop colour
--deck-root-progress-color · top progress bar fill
--deck-root-progress-height · default 3px
--deck-root-dot-bg · slide counter dot, inactive state
--deck-root-dot-active-bg · active slide dot
--deck-root-counter-color · "N / total" text colour
--deck-root-kb-hint-color · keyboard-hint footer text colour

Extending

To add a layout or atom, write a class that extends LitElement, decorate it with @customElement('deck-myname'), and import the file from your deck. The new tag is immediately usable inside any slide · no registration step in deck-root.

To extend the deck's behaviour (step counts, reveals, navigation), register a plugin with deckRoot.use(plugin) · a DeckPlugin with optional setup / steps / applyStep / navigate hooks. use() returns an unregister function and is idempotent by the plugin's name. See Plugins · writing a plugin for the full contract and the setDeckCodeHighlighter hook.