Every shape a slide
can take

The shapes
you use daily

A slide with one thing on it

The lead sits under the title and carries the sentence the title cannot.

Say one thing, and say it at a size the back row can read.

Two columns of equal weight let a reader compare them directly

A callout carries the aside that would otherwise crowd the prose. Prose lives in **markdown**, with `inline code` and lists. - one point - another - a third export function compose(slide: Slide): Layout { const role = slide.role ?? 'feature'; return LAYOUTS[role] ?? LAYOUTS.feature; }

An asymmetric split gives code the room and its commentary the margin

const deck = document.querySelector('deck-root'); deck.addEventListener('slide-change', (e) => { const { current, previous } = e.detail; track(current.id, previous?.id); }); A 2-1 split is the shape for code with a commentary beside it. The narrow column is for words about the wide one.

Three columns carry three ideas, and stop working at a fourth

What goes in

The input, named before anything else.

What runs

The transformation, in one sentence.

What comes out

The result, and how you know it worked.

One hero, two details under it

<deck-bento cols="3"> <h1 slot="title">Three rules</h1> <deck-point><h3>A format</h3><p>…</p></deck-point> </deck-bento>

The hero takes half

Code, a chart or a diagram · whatever the slide is actually about.

The details take the rest

Two short cards, never a third · the shape stops working at three.

Rows that
line up

A row of points shares one baseline, whatever its titles do

Sized by its words

A point is as tall as what it holds, so nothing paints a hole under its text.

The one that is marked

A tone fills exactly one of them · the eye lands where the speaker is.

Same reading edge

Painted or plain, every point starts its text on the same line down the slide.

Four questions, whatever the titles do

What

may go in

With whom and under which contract

a title of four lines

For how long it is kept

and one of two

How

erasure is proven

A cell takes a share of the slide, not a share of its own content

The wide one holds the number.

Tall and narrow

A cell takes a share of the slide.

Marked

One tone, not four.

Wide and bare

Plain drops the surface, never the gutter.

Numbers, and
what they mean

Several figures read as one family when they share a scale

A proportion is easier to judge drawn than written as a number

Two ways, and the one that wins

A build step

A toolchain to resurrect in 2031 A dist/ that drifts from its source Tree shaking

No build step

Open index.html and it runs The folder is the deliverable Edit a file, reload, see it

A table needs one marked row, or the eye has nowhere to land

FrameworkRuntimeBuildOpens in 2031
Reveal.js~80 KBoptionalProbably
rikiki~42 KBnoneYes
Slidev~250 KBrequiredUnlikely

Chains, maps
and time

A chain shows its whole shape before it walks you through it

Step 0 shows the whole chain · its shape is half the message.

An architecture reads as boxes and arrows, never as paragraphs

A timeline earns its axis only when the dates carry meaning

Someone else's
words

A quote, and who said it

The look was not under-designed. It was designed from the wrong source.

A full-bleed picture says what a paragraph would take too long to say

Without a src this stays the inverse surface · the layout is the point.

 Judge the shapes against each other, not one slide at a time.

Press O for the overview · every composition on one screen.