# Bento Slides — architecture
*Engineering reference, current as of July 2026. Covers how a `.bento.html`
file is constructed, what the on-disk format looks like, and how the runtime
is organized. User-facing documentation comes later, once the format
stabilizes for release.*
The core idea: **one HTML file is simultaneously the document, the viewer,
the presenter, and the editor.** There is no server, no install, and no
companion app — opening the file in a browser gives the full experience, and
the file saves *itself* back to disk with updated content (the TiddlyWiki
trick, modernized with the File System Access API).
---
> **v0.7.0 update**: the runtime now ships DEFLATE-compressed (shell ≈373KB,
> was 1.33MB) — byte order: chrome → NOTICE → tooling comment → **plaintext
> `#bento-doc`** → splash → compressed payloads + 1KB loader last. The
> document block stays plaintext forever (AI/tooling + old-updater splice
> contract; release.mjs gates every release on it). Charts are now in-house
> (`charts-lite`, MIT) — ECharts/zrender removed. Diagrams below describe the
> uncompressed layout; sizes predate compression.
> **v0.8.0 update**: live collaboration shipped — an in-house op-based CRDT
> (**bento-sync**, §8) with automatic same-machine sync (BroadcastChannel)
> and an optional end-to-end-encrypted blind relay (Cloudflare Durable
> Objects, `sync.bento.page`). The saved file stays a complete standalone
> document; `doc.collab {room, key}` is the only (additive) format change.
## 1. On-disk anatomy
A `.bento.html` file is ordinary, valid HTML. Its compartments, drawn
roughly to scale (widths √-compressed so the small parts stay visible —
exact numbers in the table below):
```mermaid
block-beta
columns 56
chrome["hdr"]:3
notice["NOTICE"]:4
doc["#bento-doc — THE DOCUMENT (0 → n MB)"]:14
js["runtime JS — app + Reveal + Moveable/Selecto + charts-lite (~560 KB)"]:26
css["CSS (62 KB)"]:6
splash["splash"]:3
style chrome fill:#37485e,stroke:#22303f,color:#c8d4e2
style notice fill:#2a3a4e,stroke:#22303f,color:#c8d4e2
style doc fill:#F7A600,stroke:#b87a00,color:#2b1d00
style js fill:#5B8DEF,stroke:#3f6cc4,color:#0d1b33
style css fill:#a9c3f5,stroke:#7fa3e0,color:#1e2a3a
style splash fill:#e9edf3,stroke:#c9d2de,color:#45566b
```
The amber block is the only part that changes between saves — everything
else is the fixed *shell*. Skeleton of the actual markup
(`dist-single/Bento_Slides.bento.html`):
```html
Deck title — Bento Slides
…
```
Layout and sizes, in file order — illustrative figures for the *uncompressed*
runtime (the shipped shell is DEFLATE-compressed, see the v0.7.0 note above; the
*order* is what's fixed, byte offsets shift with the data block's size):
| # | Part | ≈ size (raw) | What it is |
|---|---|---|---|
| 1 | Head chrome | 0.7 KB | doctype, metas, favicon, title |
| 2 | NOTICE comment | 2 KB | bundled-library license notices |
| 3 | **`#bento-doc` data block** | **0 → *n* MB** | **the document** — JSON, `<` escaped; assets are data URIs, so image-heavy decks dominate the file |
| 4 | Runtime JS | ~560 KB | app (~120 KB) + Reveal.js + Moveable/Selecto family + charts-lite (in-house SVG charts, replaced ECharts in v0.7.0) |
| 5 | Runtime CSS | 62 KB | editor + present + print styles |
| 6 | Splash CSS + body mounts | 2 KB | splash `