StackBlitz Ships Bolt Slides, Turning Presentations Into Live React Web Apps

StackBlitz open-sources Bolt Slides, a React-based presentation engine that lets any AI agent build fully interactive, web-native decks from a single prompt.

·
·
  • Open-sourced today: StackBlitz released Bolt Slides, a Vite + React presentation framework where every slide is a live web component.
  • Agent-native: Ships with a SKILL.md file that teaches Claude Code, Codex, Cursor, or Bolt to build a full deck from a single prompt.
  • Truly interactive slides: Slides can embed 3D scenes, live charts, calculators, collaborative whiteboards, and working product prototypes.
  • Rich component library: 30+ pre-built components covering data viz, storytelling layouts, product demos, and motion effects — all responsive.
  • Two entry points: One-click via bolt.new with no setup, or clone the repo and bring your own agent.
  • MIT license, free to use: No cost for the open-source repo; bolt.new usage is subject to Bolt's existing pricing tiers.

PowerPoint has been the default for presentations for over 30 years. AI tools have made it faster to fill those slides, but the output is still the same: static boxes of text and bullet points that nobody wants to sit through. StackBlitz just shipped Bolt Slides, an open-source framework that reframes the problem entirely. Instead of generating a deck, it generates a web app , one where every slide is a live, responsive React component that can run charts, 3D scenes, calculators, whiteboards, or anything else you can build for the browser.

Slides that are actually web apps

Bolt Slides are presentation decks that are working web apps. The architecture is a classic paged deck , you advance slides with arrow keys, there's a thumbnail sidebar, a grid overview, click-to-reveal builds, and a synced presenter mode , but each slide is a plain React component, so if you can build it for the web, you can present it. That means a slide can embed a live mortgage calculator, a filterable data table, a 3D globe with real coordinates, or a collaborative whiteboard , not a screenshot of one.

The 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. The URL hash tracks the current slide, so you can share a direct link to any individual slide.

The agent skill is the real product

The repo ships with a SKILL.md file inside .bolt/skills/slides/ , a structured instruction document that teaches any compatible AI agent how to theme, compose, and author a full deck. The bundled skill 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. This works with Claude Code, Codex, Cursor, and Bolt itself.

The skill is opinionated by design. It separates the engine (locked, never touched) from the content (authored fresh every time). It enforces hard rules around alignment, layout discipline, and when specialty components are allowed to appear. The goal is to prevent the agent from producing what the team bluntly calls "slop" , generic layouts, walls of bullets, nothing you'd be proud to present.

A rich component library out of the box

The framework ships with a large set of pre-built slide components organized by purpose:

  • Structure: Cover, Agenda, Section, Split, Bento, Slide
  • Data: Charts (bar, line, donut), Table, StatGrid, BigNumber, CountUp, VisualDashboard
  • Story: Quote, Contrast, Comparison, Timeline, Steps, Chat
  • Product: CodeWindow, BrowserFrame, Pricing, Team
  • Flair: Globe, TiltCard, SpotlightCard, Marquee, Accordion, Tabs

All of them are demoed in the bundled starter deck, and all of them are responsive. The Globe component is a hand-built canvas 3D globe with zero external dependencies , you pass real latitude/longitude coordinates and it renders arc connections between them. The Build primitive lets you reveal content click-by-click, stepping forward and backward through reveals before advancing to the next slide.

How to author a deck

Each top-level child of <Deck> is one slide. Here's a minimal example that shows the authoring model:

<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.</p>
    </Build>
  </Slide>
</Deck>

Theming is a single CSS file. 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.

Two ways to start

There's a zero-setup path and a bring-your-own-agent path:

  1. One click via bolt.new: Open the repo directly in Bolt and prompt it with your topic and audience. The skill kicks in automatically and returns a finished deck.
  2. Local / bring your own agent: Clone the repo, run npm install && npm run dev, and point any agent at the SKILL.md file. Works with Claude Code, Codex, Cursor, or anything that reads skill files.

Building a slide deck in Bolt is a little different than building a deck in PowerPoint in that, instead of building slides in a slide editor, you're essentially building a full-screen presentation website. The output is a shareable URL , no file attachments, no version conflicts, no compatibility issues. Slide decks aren't static anymore , they're living interfaces.

What it's good at , and where it falls short

The framework genuinely shines for presentations where interactivity adds meaning: investor decks with live financial models, product demos with embedded prototypes, quarterly reports where the audience can filter and drill into the data, or internal planning sessions where participants collaborate in real time. A web deck is responsive and readable immediately on any screen, including phones , something a .pptx file fundamentally cannot claim.

The tradeoffs are real though. This is a code-first tool. If you want to drag and drop text boxes or adjust a layout visually, you're in the wrong place. The output is also a web app that needs to be hosted or shared via a live URL , it doesn't export to PowerPoint or PDF out of the box. And while the agent skill produces impressive results, the quality still depends heavily on how well your agent follows the SKILL.md instructions.

The bigger shift happening here

Bolt Slides lands in the middle of a broader pattern: platforms like Vercel, Anthropic, and others have spent the last year building an open ecosystem where agents are assembled into workflows, given specific skills, and let run. The SKILL.md format , a structured Markdown file that teaches an agent a specialized capability , is becoming a de facto standard for this. Several competing presentation skills have appeared recently, including ones that generate native .pptx files, but Bolt Slides is the first to treat the presentation itself as a full-stack application rather than a document.

The repo is MIT-licensed and available now. The bundled 26-slide demo exercises every component in the library and doubles as the best documentation for what the system can do.

Comments

avatar