Bolt Slides

Bolt Slides

WHAT IS IT?

Bolt Slides is a presentation engine from StackBlitz in which every slide is a React component. The repo ships a skill (.bolt/skills/slides/SKILL.md) that tells an agent - Claude Code, Codex, Cursor or Bolt - how to pick a theme, lay out slides and write the copy, so a prompt like "build me a deck pitching X to Y" is meant to come back as a finished presentation. What you get is a Vite app you share as a link, not a file.

Bolt Slides is a template you clone, not a dependency: package.json is marked private and nothing is published to npm. Each deck is its own copy of the repo and won't pick up engine changes unless you merge them by hand. The repo was created in July 2026 and has eight commits, no tags and no releases; the last push was on July 30, 2026.

WHY IS IT INTERESTING?

  • Slides are plain React: a slide can call an API, mount a 3D scene or embed the actual product. Anything that runs in a browser can go on stage.
  • Ready-made components: structure (Cover, Agenda, Bento), data (charts, StatGrid, CountUp), storytelling (Timeline, Comparison, Chat), product (CodeWindow, BrowserFrame, Pricing). The demo deck walks through 26 slides, all responsive.
  • The usual presentation controls: click-by-click reveals with <Build at={n}>, grid view, thumbnail sidebar, pen annotations, and a URL hash (/#7) that links straight to a slide.
  • Synced presenter mode: a second tab with a timer, next-slide preview and editable notes, kept in step with the audience tab over BroadcastChannel.
  • Content-anchored annotations: a circle drawn around a number on a laptop still surrounds that number on a phone, wherever the layout moved it.
  • Theme driven by CSS tokens: colors, fonts, radii and shadows sit in src/styles/tokens.css. Changing --primary recolors the whole deck, UI chrome included. The skill documents nine theme directions.
  • No documented export: the README says nothing about PDF or PowerPoint output; decks are meant to be shared as a link to the deployed app. Without an agent, writing a deck means editing JSX in src/App.tsx.

USE CASES

  • A product pitch where one slide runs the live demo instead of a screenshot
  • A results review that reads live data instead of showing a frozen chart
  • A tech talk shared as a URL, with links pointing at specific slides
  • A deck generated by the coding agent already working in your project