stackblitz/bolt-slides

Under the hood it's a classic paged deck — Slidev-style dock, thumbnail sidebar, grid overview, click-builds, annotations, synced presenter mode — where each slide is a plain React component. If you can build it for the web, you can present it.

Quick start

With an agent (the fun way). Open the repo in Bolt and prompt it:

Build me a deck pitching «your thing» to «your audience».

The bundled skill (.bolt/skills/slides/SKILL.md) teaches the agent how to theme, compose, and write the deck — including setting the tab title and favicon — so a single prompt returns a finished, presentable app.

By hand.

git clone https://github.com/stackblitz/bolt-slides
cd bolt-slides
npm install
npm run dev

The dev server opens a 26-slide demo that exercises every component. Delete the demo slides in src/App.tsx and author your own.

Authoring

Each top-level child of <Deck> is one slide. Compose them from the component library, or write plain JSX:

<Deck>
  <Cover
    kicker="Acme · Series A"
    title={<span className="accent-text">Acme</span>}
    subtitle="Answers, not dashboards."
    notes="Welcome — set up the problem, then hold a beat."
  />

  <Slide center nav="Thesis">
    <h2 className="headline">
      Dashboards are everywhere. <span className="accent-text">Insight isn't.</span>
    </h2>
    <Build at={1}>
      <p className="subhead">Acme turns raw events into answers — automatically.</p>
    </Build>
  </Slide>

  <Agenda
    kicker="Agenda"
    title="What we'll cover."
    items={['The problem', 'How it works', { title: 'Pricing & the ask', hint: '5 min' }]}
  />
</Deck>

• <Build at={n}> reveals content on the nth click — arrow keys step through builds before advancing slides, forward and back.
• notes="…" on any slide shows up in presenter mode; notes you edit while presenting persist locally.
• Slides are ordinary React — fetch live data, mount a 3D scene, embed your actual product.

Presenting

• Presenter mode opens in a second tab with a timer, next-slide preview, and editable notes — kept in sync with the audience tab via BroadcastChannel.
• Annotations are content-anchored: a circle drawn around a stat on a laptop rings the same stat on a phone, wherever the layout moved it. Drawings persist per slide.
• Deep links: the URL hash tracks the slide (/#7), so you can share a link straight to a slide.

Component library

All of them are demoed in the bundled starter deck, and all of them are responsive.

Theming

Every color, font, radius, and shadow lives in the :root block of src/styles/tokens.css. Change --primary and the entire deck — chrome included — recolors. Nine ready-made theme directions are documented in the skill, from editorial luxury to dark technical.

Project structure

.bolt/skills/slides/   the agent-facing authoring guide (the skill)
src/deck/              engine + chrome — Deck, Slide, Build, Reveal, Annotator
src/components/        the slide component library
src/styles/            tokens.css (theme) + base.css (system styles)
src/App.tsx            your deck (ships with the component demo)

Contributing

Issues and PRs welcome — see CONTRIBUTING.md. npm run dev to hack, npx tsc --noEmit && npm run build before you push.

License

MIT © StackBlitz