Everything you need to
build a deck.

1Quick start

A Bento deck is a single .bento.html file. There's nothing to install and no account to create.

• Open the file in any modern browser — it boots straight into the editor.
• Edit on the canvas: click to select, drag to move, drag the handles to resize. Double-click text to type.
• Present with the round ▶ button (bottom-left) or F5 — real fullscreen, arrow keys to advance.
• Save with ⌘S. The file rewrites itself with your changes; your work also auto-saves as you go.

2Adding content

The toolbar across the top adds elements to the current slide:

The left panel holds your slides; the right panel shows the properties of whatever you've selected — position, colour, typography, effects. Press [ or ] to collapse either panel.

3Morph — the signature move

Give an element the same name (id) on two consecutive slides and set the later slide's transition to Morph — the element glides between its two positions, sizes and colours when you advance. It's how the best Bento decks feel alive.

• The easy way: duplicate a slide, then move, resize or recolour things. The shared elements already have matching ids, so they morph automatically.
• Set a slide's transition to Morph in the Slide panel (or copy a slide that already uses it).
• Keep a logo or header at the same id across every slide and it stays put while everything else changes.

4Motion & effects

The cinematic touches — photos that slowly drift, elements that fly in, numbers that count up — all live in the right panel's Presenting section. Select an element, then:

Ken Burns — the slow drift on photos

That living, breathing quality on full-bleed images is ambient motion. Select an image → Presenting → Ambient → Ken Burns, then choose the style and pace:

• Drift — an endless, gentle pan-and-zoom that loops forever. The default, and what makes a cover photo feel alive like a video.
• Zoom in / Zoom out — a one-shot push or pull that settles as the slide arrives, for a deliberate reveal.
• Zoom % sets how far it travels; Zoom secs sets how long — a big number gives a slow, luxurious move.

Entrances — how elements arrive

Give an element an Enter animation and it animates in as the slide appears — fade, fade up/down, or slide in from any edge. Two knobs shape the choreography:

• Order — the stagger. Lower order arrives first; give several elements the same order and they enter together (reveal a diagram band-by-band).
• Enter secs — the speed. Lower is snappier, higher is more languid.

Count-up

Turn on Count up for a text element containing a number and it rolls from 0 to its value as the slide enters — the easy way to make a statistic land.

5Charts & tables

Charts

Add a chart, then shape it in the right panel: type, series, colours, a second Y-axis, per-axis min/max, and an editable data grid. Charts are live while you present — tooltips, wheel-zoom, and a data morph when a bar chart becomes a pie.

Tables → charts, linked

Turn a table into a chart from the table panel, and the two stay linked: edit the table's numbers and the chart updates itself. Perfect for a slide that shows the figures and the trend side by side.

6Video & audio

Add Media from the toolbar and pick a video or audio file. Bento uses a hybrid approach so your file never balloons:

• Small clips embed in the .bento.html — fully self-contained, plays offline.
• Large files: when a clip is big, Bento offers to keep it as a link instead — paste a hosted URL in the panel and the deck stays small (it just needs the network to play).
• Playback options: controls, loop, muted, and autoplay. Autoplay runs only while presenting, and browsers require a video to be muted to autoplay.
• Poster (video): a still image shown before playback.

7Interactivity

• Links & state slides: give an element a link to another slide. A state slide is a hidden variant reached only by clicking — arrow keys skip it, ← returns to the parent. Great for "click to drill in" without cluttering the linear story.
• Hover reveal: swap content in place when the pointer is over an element.
• Loops: a dashed line that marches, or an element that follows a motion path you draw on the canvas — with variable speed per point.
• Comments: the 💬 tool (C) pins a comment to an element or a spot. Comments live in the file but never show in present or print.

8Presenting

• Start from the round ▶ button (fullscreen) or the small one beside it (tab-fill, for screen-sharing a window). F toggles fullscreen; Esc ends the show.
• Speaker view (S): current + next slide, your notes, and a timer — in a separate window.
• Second screen: in the Slide panel's Speaker notes section, enable "Use a second screen for notes" once (grant the browser's window permission). Then pressing S puts the notes on your other display automatically.
• Write speaker notes per slide — they travel in the file and double as the talk track.

9Live collaboration

Click Live to start a session — then the file itself is the invitation. Anyone who opens a copy joins the room; edits merge in real time, and offline changes merge back when they return.

• End-to-end encrypted: the keys live inside your file. The relay only ever sees ciphertext — it can't read your deck.
• No account, no cloud: sharing is just sharing the file.
• Set your name via the Live popover so your cursor has one. "Rotate keys" revokes old copies.

10Saving & version history

• ⌘S rewrites the file in place (or downloads a copy the first time, depending on your browser).
• Auto-save keeps a local safety net as you work — if a tab crashes, you're offered a restore on reopen.
• Version history: About → Version history lists earlier local snapshots; restore any one (it's undoable).
• Read-only copy and password protection are in the Save menu / About for hand-out and private decks.

11Build with AI

Because the document is plain JSON inside the file, any AI can author or edit a deck. Drop the .bento.html into a chat or project (Cowork, Codex, Gemini, a ChatGPT project) and ask, or point a coding agent at it on disk.

The recipe an assistant should read first is bento.page/agents.md — it maps your material to the right feature so you get a real deck, not a wall of text.

The bento-slides skill

Install the skill once and your assistant authors decks with the right features automatically — it even downloads the latest Bento app by itself, so you can go from an empty folder to a finished, opened deck in one ask. It triggers whenever you request slides, or run /bento-slides directly.

Claude Code — from the plugin store:

/plugin marketplace add nyblnet/bento
/plugin install bento-slides@bento

…or as a plain personal skill (no restart needed; re-run to update; use .claude/skills/… to scope it to one project):

mkdir -p ~/.claude/skills/bento-slides
curl -fsSL https://bento.page/skills/bento-slides/SKILL.md \
  -o ~/.claude/skills/bento-slides/SKILL.md

Claude.ai & Claude Desktop — download the skill (.zip) and upload it under Settings → Skills.

ChatGPT · Codex · Gemini — no install: attach bento.page/agents.md to a ChatGPT project, drop it beside your deck as AGENTS.md for Codex, or add it to a Gem.

12Keyboard shortcuts