bolt-slides README

The project's README from github.com/stackblitz/bolt-slides. As one markdown file: README.md.

⚡ Bolt Slides

Presentation decks that are working web apps.

One prompt in — your agent builds a deck where every slide is a live, responsive web page. 3D, live data, working prototypes, and whatever you can prompt.

Open in Bolt Open in StackBlitz License: MIT

Bolt Slides — from one prompt in Bolt to a finished interactive deck

Why we made this

AI for slides is awesome, but the outputs tend to be slop: generic layouts, walls of bullets, nothing you'd be proud to present.

And also: why are slides still static? Agents can build anything. What would it look like if you (tastefully) turned them loose on slides?

Bolt Slides is what we built to find out: building blocks any agent (Claude Code, Codex, Cursor, Bolt) can compose stunning, compelling presentations with. Bespoke layouts, real typography, considered animations, interactive anything. Every deck is a real web app, responsive on any screen, shared as a link.

Taste comes standard.

See what that looks like →

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>

Presenting

Grid view of every slide
Key Action
→ ↓ Space Next (reveals builds first)
← ↑ Previous (rewinds builds)
Home / End First / last slide
S Sidebar — thumbnail rail
G Grid view — every slide at once
A Annotate — pen, highlighter, shapes, eraser
F Fullscreen
P Presenter mode — synced new tab
H Hide the UI
Esc Close overlays

Component library

Components
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.

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

bolt-slides (stackblitz/bolt-slides)

Searching Database…

1.1K ·GitHub
Bolt-slides
Что это?Bolt Slides превращает один промпт в презентацию, где каждый слайд — настоящее адаптивное веб-приложение на React, а не статичное слайдшоу — а собирает её любой AI-агент-кодер.
Это приложение для слайдшоу или кодовый фреймворк?Это презентационный фреймворк/шаблон на React: под капотом — классическая презентация с постраничной навигацией (сайдбар с миниатюрами, обзор сеткой, click-builds, режим докладчика), где каждый слайд буквально обычный React-компонент.
Как собрать презентацию с его помощью?Откройте репозиторий в Bolt и дайте агенту промпт, например «Сделай мне презентацию, представляющую твой проект твоей аудитории», — встроенный скилл научит её темировать, компоновать и писать презентацию за один заход. Или сделайте вручную: запустите dev-сервер, посмотрите демо из 26 слайдов, затем удалите демо-слайды в 'src/App.tsx' и напишите свои.
Какие агенты-кодеры могут собрать презентацию за меня?Подойдёт любой агент, умеющий читать встроенный файл скилла и писать React/JSX — в README отдельно названы Claude Code, Codex, Cursor и Bolt.
А если я не хочу пользоваться агентом?Слайды можно писать и руками, но визуального редактора нет — слайды это обычные React-компоненты, так что нужно спокойно владеть JSX, получением данных или монтированием штук вроде 3D-сцен прямо в коде.
Какие компоненты входят в библиотеку?Туда входят структурные блоки (Cover, Agenda, Section, Split, Bento, Slide), компоненты данных (Charts, Table, StatGrid, BigNumber, CountUp, VisualDashboard), сюжетные компоненты (Quote, Contrast, Timeline, Steps, Chat), продуктовые (CodeWindow, BrowserFrame, Pricing, Team) и украшения вроде Globe, TiltCard, Marquee и Accordion — всё показано в стартовой презентации.
Как изменить внешний вид презентации?Каждый цвет, шрифт, радиус и тень живут в блоке :root файла src/styles/tokens.css, поэтому смена переменной вроде --primary перекрашивает всю презентацию, включая обрамление. Девять готовых тематических направлений — от журнальной роскоши до тёмного техно — описаны в скилле.
Что умеет режим докладчика?Режим докладчика открывается во второй вкладке браузера, синхронизируемой с вкладкой для аудитории через BroadcastChannel; он показывает таймер, превью следующего слайда и редактируемые заметки, которые сохраняются локально, пока вы докладываете.
Можно дать прямую ссылку на один слайд?Да — хеш URL отслеживает текущий слайд (например, '/#7'), так что можно поделиться глубокой ссылкой, открывающей сразу этот слайд.
What are similar projects?Libraries.dev, luobo-ppt, hairline, visual-explainer, framefields, Infographic, evondevKit, open-slide
Which topics is it in?slides, jsx, presentation, agentic, charts, ai-tools, theme, component-library, data-visualization, skill, cursor, ui-components
Creator
stackblitz
Size
9 MB
Stars
1.1K
Updated
CommitJul 30
Age
3mo
Commits · 90 Days