Slides
A cdbx deck is a real HTML page you own: one <section> per slide, plain CSS, no presentation framework and no runtime dependency. You describe the deck, the AI writes it, and you present it or export it.
Creating a deck
Pick Slides in the New App dialog, or just describe what you want in the main prompt — "make me a slide deck for our Q3 roadmap" is enough, no need to find the picker first. You get a blank title slide to start from — write it directly, or hand it to the AI.
Then just ask: "turn this into a 10-slide pitch for a dog-walking app." The AI writes the slides for you.
From another AI client: connect cdbx's MCP server and call create_slides with the deck's content directly — no picker, no separate write step. Useful if you're already describing a deck to Claude or another assistant outside cdbx and want it to land as a real deck here.
Importing an artifact — already have a deck built somewhere else, like an HTML slide deck from a Claude conversation? In the prompt's + menu, choose Import HTML artifact and pick the file. It's read in your browser only, never uploaded. Send it with nothing else typed and it lands exactly as-is — same styling, same content, no AI involved, instantly. If you'd rather have it rebuilt as a real cdbx deck (with present mode, PPTX export, on-brand theming), type what you want changed before sending — that trades exact visual fidelity for cdbx-native editing.
Presenting
A deck is a normal scrolling page by default — scroll through it, or use the arrow keys to smooth-scroll from one slide to the next. Present opens the deck in its own tab (needed for fullscreen and printing to work properly), so it follows your device's own light/dark setting rather than cdbx's theme toggle.
Click Present (or press F) to go fullscreen, one slide at a time:
- → / space / Page Down — next slide
- ← / Page Up — previous slide
- Home / End — first / last slide
- Esc — exit
- Clicking the right or left half of the slide also moves forward or back
A progress bar and slide counter appear while presenting.
Exporting
PDF — print the deck (⌘P / Ctrl+P). You get one slide per page, landscape, with no slide split across a page break. Turn on Background graphics in your browser's print dialog to keep the deck's colors.
PowerPoint — Settings → Copy & Export → Export to PowerPoint. The .pptx opens in PowerPoint, Keynote, or Google Slides with one slide per section, and every heading and bullet is real editable text rather than a picture. Your design system's colors and font come with it.
HTML — Settings → Copy & Export → Export as HTML. One self-contained .html file with the deck's styles built in; it opens in any browser and can be hosted anywhere. It's the scrolling page of slides — present mode and the PDF/PowerPoint exports stay in cdbx.
Publish — decks publish and share like any other app, so you can send a link instead of a file.
On-brand decks
Attach a design system and the deck takes its colors and font from your real tokens straight away. A design system with no color tokens (one read from an npm package, for example) leaves the deck on its default theme rather than guessing at brand colors. The card's shape — rounded corners and shadow — is cdbx's own design and stays the same regardless of which design system is attached.
The layouts
The starter deck ships styled classes for the slide types you actually need, and the AI composes from them instead of inventing a look each time:
| Class | What it's for |
|---|---|
slide--cover | Opening slide — small label, big headline, one-line subtitle |
slide--section | A divider marking a new part of the talk |
slide--bullets | Heading plus three or four short bullets |
two-col + panel | A fixed two-column comparison |
card-grid + content-card | A labeled card grid, 2-4 columns — for comparing several options or tiers |
pillar-grid + pillar | Two to four stat callouts side by side |
metrics + mrow/mtrack/mbar | Bar-chart-style readouts, in pure CSS — no chart library |
slide--stat | One giant number filling the slide, for a single headline metric |
agenda | A numbered overview or table of contents |
timeline | A horizontal sequence of steps or phases, connected by a line |
org-chart | A simple reporting-line / hierarchy chart |
people-grid + person | Team, panel, or customer cards — avatar, name, role |
logo-row | A strip of partner or client wordmarks/logos |
mockup | A browser/device frame around a product screenshot |
slide--code | A monospace code or snippet block |
tag | A small colored status pill you can drop into any other layout |
slide--quote | A pull quote with attribution |
slide--image | Full-bleed image with an optional caption |
slide--closing | Centered thanks or call to action |
Keeping a deck a deck
One rule makes presenting, PDF, PowerPoint export, and the thumbnail rail all work: one slide is one <section class="slide">, as a direct child of <div id="deck-scroll">.
It's written into the app's AGENTS.md, so the AI follows it when it writes or restructures your deck. If you edit the HTML by hand, keep to it — a slide that isn't a direct #deck-scroll child, or a renamed class, won't be found by present mode, the thumbnail rail, or either export.
A thumbnail rail in the sidebar (the grid icon under Chat) shows every slide and jumps the main preview to whichever one you click.
What's not here yet
Speaker notes, slide transitions, and reordering from the thumbnail rail — for now, reordering means moving a <section> in index.html, or asking the AI to do it.