Bolt Slides: a React deck engine where every slide is a live web page

The problem Bolt Slides targets: AI-generated decks that look like AI-generated decks

The README is unusually blunt about the motivation. It says AI for slides produces output that "tends to be slop: generic layouts, walls of bullets, nothing you'd be proud to present." That is the problem statement, and the second half of it is a design question rather than a feature request: why are slides still static when agents can build anything?

Bolt Slides answers that by refusing to treat a slide as a document. Each slide is a plain React component, and the deck is a web app. If you can build it for the browser, you can present it. That reframes the audience. This is not a tool for someone who wants to type bullet points into a text box and pick a template. It is for engineers, developer advocates and technical founders who are comfortable in JSX and who want a deck that can call an API mid-presentation, render a chart from live data, or embed the product itself.

The README also names the agent side explicitly: the project ships building blocks that "any agent (Claude Code, Codex, Cursor, Bolt) can compose." So the intended workflow has two entry points, one conversational and one manual, and both land on the same React codebase.

How the deck engine actually works

Under the hood the README describes "a classic paged deck: Slidev-style dock, thumbnail sidebar, grid overview, click-builds, annotations, synced presenter mode." The engine lives in src/deck/ and is listed as containing Deck, Slide, Build, Reveal and Annotator. The component library sits in src/components/, theming in src/styles/, and your actual deck in src/App.tsx.

The structural rule is simple: each top-level child of <Deck> is one slide. You compose slides from the library or write plain JSX. The <Build at={n}> wrapper reveals content on the nth click, and the README notes that arrow keys step through builds before advancing slides, forward and back. Speaker notes go on a slide as notes="..." and appear in presenter mode; notes edited while presenting persist locally.

Presenter mode opens a second tab with a timer, next-slide preview and editable notes, and the README states it is kept in sync with the audience tab via BroadcastChannel. That is a browser API, not a server, which tells you the sync is same-origin and tab-to-tab. Annotations are described as content-anchored: a circle drawn around a stat on a laptop rings the same stat on a phone wherever the layout moved it, and drawings persist per slide. Deep links work through the URL hash, so /#7 points at slide 7.

The dependency list is short: react, react-dom and framer-motion at runtime, with vite, typescript and the React plugin as dev dependencies. There is no backend, no database and no auth in package.json.

Installing Bolt Slides and authoring a first slide

The README gives two paths. The agent path is to open the repository in Bolt and prompt it, for example: Build me a deck pitching «your thing» to «your audience». The bundled skill at .bolt/skills/slides/SKILL.md is what teaches the agent how to theme, compose and write the deck, including setting the tab title and favicon.

The manual path is a standard Vite workflow. Clone, install and start the dev server:

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

The README states the dev server opens a 26-slide demo that exercises every component. To author your own deck you delete the demo slides in src/App.tsx and write your own. A minimal deck looks like this, taken from the README's authoring example:

<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>
</Deck>

Each top-level child of <Deck> becomes a slide, and the <Build at={1}> block stays hidden until the first click. When the deck is ready, the contributing notes say to run the type check and build before pushing:

npx tsc --noEmit && npm run build

If you want the deck to match a brand, the README points at the :root block of src/styles/tokens.css: every color, font, radius and shadow lives there, and changing --primary recolors the entire deck including the chrome. Nine ready-made theme directions are documented in the skill, from editorial luxury to dark technical.

The component library and what it commits you to

The library is broad for a project this size. Structure components cover Cover, Agenda, Section, Split, Bento and Slide. Data components include Charts (bar, line, donut), Table, StatGrid, BigNumber, CountUp and VisualDashboard. Story components include Quote, Contrast, Comparison, Timeline, Steps and Chat. Product components include CodeWindow, BrowserFrame, Pricing and Team. Flair components include Globe, TiltCard, SpotlightCard, Marquee, Accordion and Tabs.

The README says all of them are demoed in the bundled starter deck and all of them are responsive. That claim is worth checking against your own content rather than taking on faith, because responsive here means the slide reflows across screen sizes, not that every layout is guaranteed to fit every aspect ratio. The annotation model depends on that reflow being predictable, since a drawing is anchored to content rather than to coordinates.

The trade-off is that you are authoring in JSX, not in a slide editor. There is no mention of a visual canvas, a drag-and-drop layout tool or a content schema. If your deck needs to be edited by someone who does not write React, this is the wrong tool, and the README does not pretend otherwise.

Presenting, deep links and where the design shows its seams

The keyboard map is conventional and documented: arrow keys and Space advance, revealing builds first; arrows and Space go back and rewind builds; Home and End jump to the first and last slide; S toggles the thumbnail sidebar; G opens the grid view; A opens annotation with pen, highlighter, shapes and eraser; F toggles fullscreen; P opens presenter mode in a synced new tab; H hides the UI; Esc closes overlays.

The limitation worth naming is the sync mechanism. Because presenter mode is kept in sync via BroadcastChannel, it is a browser-level channel between tabs in the same origin. The README does not describe a remote presenter setup, a phone-as-remote flow, or any server relay. If you plan to drive the deck from a second device, nothing in the documentation says that works.

The same is true of persistence. The README says notes you edit while presenting persist locally and that drawings persist per slide, but it does not document where that state is stored, whether it survives a different browser, or how to export a deck with annotations baked in. The README also does not document rollback, versioning or a way to recover a deck after a bad edit beyond your own git history. Those are gaps you should plan around, not bugs.

Deep links are the one sharing feature that is clearly specified: the URL hash tracks the slide, so /#7 shares a link straight to slide 7. Distribution otherwise means hosting the built app yourself, since the README describes a link-shared web app and not a hosted publishing service.

Bolt Slides compared with Slidev

The README itself places Bolt Slides in the Slidev lineage, describing it as "a classic paged deck: Slidev-style dock, thumbnail sidebar, grid overview, click-builds, annotations, synced presenter mode." That is a fair starting point for a comparison.

The difference is in the authoring unit. Slidev decks are written as Markdown files, with Vue components available as an escape hatch when a slide needs real code. Bolt Slides inverts that: the deck is a React component tree, and Markdown is not the primary format. The practical consequence is that a Bolt Slides deck is a web app first. Fetching live data, mounting a 3D scene or embedding an actual product is the default path rather than an exception you wire in.

The cost is the inverse. A Markdown-first deck is readable and diffable by anyone, and a non-developer can fix a typo without touching a build. In Bolt Slides, a typo fix is a code change, and the deck only exists after the Vite build runs. If your team already lives in React and wants slides that behave like the product, that trade is worth making. If your deck is mostly prose and images, the Markdown approach is less machinery for the same result.

Maintenance, licence and upgrade cost

The repository is not archived, and the last push was on 2026-07-30. There are no retrieved releases, so there is no tagged version to pin to and no changelog to read before upgrading. In practice that means you track the main branch, and an upgrade is a git pull plus npm install plus a re-run of npx tsc --noEmit && npm run build. Because the runtime dependency surface is small, react, react-dom and framer-motion, most upgrade risk sits in your own slide code and in the component library's prop shapes rather than in a deep transitive tree.

The licence is MIT, with the copyright line reading MIT © StackBlitz. That permits commercial use, modification and redistribution provided the copyright notice and permission notice are retained. This is not legal advice; if you are shipping a deck inside a commercial product or redistributing the engine, read the LICENSE file in the repository and get your own counsel.

One structural detail matters for upgrades: the agent skill lives at .bolt/skills/slides/SKILL.md and is described as the agent-facing authoring guide. If you fork the project and change component APIs, the skill file is part of what you are now maintaining, because it is what the agent reads when it writes a deck. The README does not describe a versioning scheme that keeps the skill and the components in lockstep.

Editorial conclusion

Adopt Bolt Slides if your team writes React and you want slides that can fetch live data, mount a 3D scene or embed a real product, and if you are willing to theme it through tokens.css rather than a visual editor. Do not adopt it if you need a non-technical colleague to edit the deck, or if you want a hosted service with accounts and storage, because the README describes a local Vite app and nothing else. Before committing, confirm the build passes with npx tsc --noEmit && npm run build, check that your target browsers support BroadcastChannel for presenter sync, and verify that the bundled demo deck in src/App.tsx is the version you want to delete.

Frequently asked questions

Official sources

1. Issues
2. License: MIT
3. README
4. stackblitz/bolt-slides on GitHub