Skip to main content
With Bolt Slides, you can build a presentation with default slide layouts, presenter mode, and annotations built in, giving you a polished deck that’s ready to present or share. Customize your deck by prompting for what you want to add, like interactive charts and models or live data, and invite others to collaborate with you as you build it. Bolt Slides is available on all plans. When you’re ready to present, share your deck’s published link so your audience can view it on their own devices.

Build a presentation in Bolt

  1. On the Bolt homepage, below the chatbox, click Slides.
  2. In the chatbox, describe the presentation you want to create, then send your prompt.
Clicking Slides helps Bolt understand what you want to build. If you skip this step, Bolt still creates a presentation as long as your prompt describes a deck, slides, or presentation.
After Bolt generates your deck, keep prompting to adjust layout, content, style, or functionality. Your Bolt slide deck works like any other Bolt project: chat with Bolt to refine what you’ve built.

Customize how your deck looks

  • Describe a look and feel: Add a color palette, tone, or mood to explain the visual style you want.
  • Add images: Upload images as inspiration or to display in your slides. On paid plans, you can also ask Bolt to generate images that match a specific style.
  • Use your team’s design system: If your team has a design system set up, select it before you start building so Bolt builds the deck using your components and brand styles.

Add slide interactions

Here are a few examples you can try to add interactive elements to individual slides. Make sure to update the placeholder information in these sample prompts so they’re specific to what you’re building.

Use the presentation controls

A Bolt slide with the title Better docs by working together and the presentation control panel highlighted with sidebar, grid, previous, next, fullscreen, annotate and presenter icons.
Every Bolt Slides deck includes these controls at the bottom of the screen, whether you’re previewing, presenting, or viewing a published deck:
  • Sidebar: Click the sidebar icon to open a scrollable list of slide thumbnails alongside the slide you’re viewing.
  • Grid view: Click the grid icon to open a view showing thumbnails of every slide at once.
  • Previous and Next: Click the arrow icons to move to the previous or next slide.
  • Fullscreen: Click the fullscreen icon to view the deck in full screen, then click it again to exit.
  • Annotate: Click the pencil icon to draw on the current slide with a pen, highlighter, line, arrow, shape, or eraser. When you present, annotations appear on the shared screen. When viewing a deck on your own device, they’re visible only to you.
  • Presenter mode: Click the monitor icon to open presenter mode in a new tab, where you can view your notes for the current slide without affecting what’s visible in your original tab. Anyone viewing the deck can open presenter mode, and any notes you type save locally to your device only.

Share your deck with collaborators

To let others view or edit the deck while you’re working on it, share your project. You can control the level of access each collaborator has:
  • Viewer: Can see content to provide feedback.
  • Editor: Can prompt and edit the deck alongside you.
  • Co-owner: Can prompt, edit, or publish the deck.

Edit and test your deck

  • Use the select tool for visual edits: Select an element on a slide, then describe the change in the chat to update just that part. If the select tool doesn’t pick up the element you want, like something rendered inside a canvas or chart, share a screenshot of it instead and describe the change in your prompt.
  • Restyle your whole deck at once: Your deck’s colors, fonts, and spacing are controlled from one place, so a single prompt can update all of them together. Try a prompt like this: Update the slide theme to a dark background with blue accents.
  • Check your deck across screen sizes: If your audience will view the deck on a phone or tablet, preview it at a few screen sizes before sharing, especially if you’ve added interactive elements to your slides.

Publish and present your deck

To share your presentation, publish your project to a live website. If you want to limit who can view it, add a password screen that appears before the presentation loads. Try a prompt like this: Add a password screen before the presentation loads. Generate a random password and show it to me in the chat so I can share it with viewers. After it’s published, you can present it or let people view it on their own:
  • Present to a group using presenter mode: Share your original tab with the group, and keep the presenter mode tab open on your own device to view any notes you’ve made.
  • Let people view it on their own: Share the deck’s published link. Anyone with the link can open your deck and move through it independently. The deck link is public, so viewers don’t need a Bolt account to access it. Moving between slides doesn’t affect what you or anyone else sees, and viewers can’t edit the deck itself.
You can even use both methods together: Let others view the deck while you present it, so they can browse ahead or revisit previous slides at their own pace.

Use the Bolt Slides open-source library

Bolt Slides are built on an open-source skill and component library that’s available at github.com/stackblitz/bolt-slides. If you want to build with a coding agent of your choice (like Claude Code, Cursor, or Codex) instead of prompting inside Bolt, you can clone this repository to download a copy you can work from.
Cloning the repository creates a local copy of the files on your computer. Changes you or your agent make don’t affect the original repository, so you’re free to edit your copy however you like.
1

Copy the bolt-slides repository to your computer

  1. In the terminal, run this command to clone the repository to your computer: git clone https://github.com/stackblitz/bolt-slides.
  2. Open the bolt-slides folder, then run npm install in that folder.
    You can navigate to the folder using the terminal or find the folder wherever you cloned it (like your Desktop) and right-click to open the command line from there.
2

Build a deck with your preferred coding agent

  1. Open the coding agent of your choice and give it access to the bolt-slides folder.
  2. Ask the agent to read .bolt/skills/slides/SKILL.md before making changes. This file explains the component library, theming conventions, and how content builds progressively within a slide.
  3. Describe the deck you want to build. While building, the agent replaces the demo slides in src/App.tsx with your content.
3

Preview and present the deck from your browser

  1. In the terminal, run npm run dev in the bolt-slides folder.
  2. Copy the localhost URL it provides and paste it into your browser. This opens the deck for you to preview, present, or share.
The styling conventions in the deck come from the :root block in the src/styles/tokens.css file. To apply your own brand styles, ask the agent to update this file so that the changes apply across every slide.