# Bento Slides Showcase

1

One HTML file — deck, viewer and editor together.  
Open it anywhere. It saves itself.

2

**your deck** — JSON in a <script> block

**viewer + presenter** — morphs, charts, speaker view

**the editor itself** — press Esc, it’s right there

**Self-saving** — ⌘S rewrites this very file in place  
**No install, no account** — a browser is the whole runtime  
**Assets embedded** — images and fonts ride along as data  
**View-source honest** — your document is readable JSON

Updates? The file checks a signed manifest at launch — **you can turn that off** — and rewrites itself.

3

Shared ids animate between slides — position, size, color, **even gradients**.  
Press ← then → to replay it.

4

Software with nothing  
to install, break, or expire.

5

020406080100MonTueWedThuFriViewsEdits

**Hover the bars** — tooltips are live.

Scroll or pinch inside the chart to zoom the data.

pie split

Mon 13%Tue 21.1%Wed 16.7%Thu 26.6%Fri 22.6%MonTueWedThuFri

This is a **hidden state** — arrow keys skip it; only the click gets here.

The data morphed in place.

scatter

01020304050607080Engagement020406080100OwnedPaid

Same chart element — a **third form**. Each dot is a campaign: reach across, engagement up.

6

Quarter

Signups

Growth

Q1

1,204

—

Q2

3,880

+222%

Q3

9,140

+136%

Q4

21,500

+135%

00%5,00050%10,000100%15,000150%20,000200%25,000250%GrowthQ1Q3

**Edit the table** — bars and the growth line track it, live.

7

020406080100JanFebMarAprMayJunJulAugSepOctNovDec

8

Drawn with the on-canvas path editor — drag the anchors and the loop follows.

9

Every scene is an ordinary slide — arrange elements, link a button, done.

scene 02

Every scene is an ordinary slide — arrange elements, link a button, done.

scene 03

Every scene is an ordinary slide — arrange elements, link a button, done.

10

Point, and the room dims.

Send it, archive it, open it in ten years. The runtime is pinned inside, so it never rots.

Slides share elements by id; transitions animate the difference. States and links make it interactive.

Charts present as real instances — tooltips, zoom, and data that morphs between states.

Hover the cards — it works right now, while presenting.

11

Type markdown, get typography.

`**instant** *formatting*`  
`- bullets as you type`  
`` `code` and ~~strike~~``

**instant** *formatting*  
•  bullets as you type  
`code` and

strike

12

Press **Esc** — this deck is already your copy of the editor.