Bento: Single‑File HTML Presentation Tool

Overview

Conclusion: Bento delivers a complete presentation suite—deck data, viewer, editor, live charts, and collaboration—inside one HTML file that runs in any modern browser without installation or accounts. The default deck is about 560 KB and, once loaded, does not need to fetch additional resources. Users can open the file, edit it, and save changes directly back into the same file using the File System Access API, with a fallback to a plain download.

Architecture

Conclusion: Bento stores slide data as a JSON block at the top of the file and packs the application code in a base64‑compressed blob that expands via DecompressionStream, using the File System Access API for self‑saving and ECDSA‑signed updates. The creator explained: "The file contains more or less two sections. There is a plain block of JSON near the top of the file which is the slide data. You can read, grep, or point a harness at it." "The app itself is in a base64 blob that loads through a small shim which deflates in the browser with DecompressionStream, which keeps the package small and so that we don't need to fetch any external files at runtime." "File System Access API is used for JSON writeback into the same file, which falls back to a plain download and all updates are ECDSA signed." The UI builds on reveal.js as a base, incorporates GSAP/Flip for animation, and replaces ECharts with a custom chart implementation to control size.

Features

Conclusion: Bento offers morph transitions, live‑linked charts, interactive states via slide‑level scenes, markdown‑based typing with instant formatting, and offline operation. Morph transitions animate shared IDs between slides, including position, size, color, and gradients. Charts are live instances: hovering shows tooltips, scrolling or pinching zooms the data, and the same chart element can morph between bar, pie, and scatter states. Interactive states let a slide define multiple scenes (e.g., a tidy grid, a loose cascade, a data skyline) that are ordinary slides linked by buttons. The editor supports markdown shortcuts: typing instant formatting produces bold and italic text, - creates bullets, backticks create inline code, and strike creates strikethrough, with immediate visual feedback. All editing and viewing happen offline; no server round‑trip is required for normal use.

Collaboration

Conclusion: Collaboration is opt‑in, using a blind relay hosted on Cloudflare Durable Objects that sees only encrypted client data, with per‑user keys, read‑only options, and revocable access. The creator said: "What I'm most pleased about is how seamless the CRDT works. The blind relay is a small file that runs on Cloudflare Durable Objects, and all it sees are the encrypted data from the clients. Collab is off until we turn it on in the app (by starting a session by sharing by invite file), and then some sets of keys are generated. Access is handled by user key, and you can have read‑only users, and also revoke live collab access by user as well." This design keeps the relay blind to content while enabling real‑time sync.

Limitations and Feedback

Conclusion: Users have noted a Cloudflare Insights beacon, potential name conflict with BentoPDF/Bento database, missing alt text for images, occasional animation choppiness on Firefox, and desire for an animation‑off toggle, PWA workflow, and export to PPTX. One observer pointed out: "The home page says 'Nothing phones home,' but the Bento files I've examined include a cloudflareinsights.com beacon." Another noted the name similarity to existing projects: "It's a shame about the name considering a lot of self‑hosters will be using BentoPDF." Regarding accessibility: "I added an image to see what options it gave me. There was no way to add alt text, which leads me to believe that accessibility was not a priority." On performance: "This might just be a Firefox thing but the animations are really struggling on my system here - very slow and choppy." Requests include a setting to disable animations, a blank read‑only template installable as a PWA, and the ability to export decks to PPTX format.

Community Reaction

Conclusion: Commenters praise the single‑file approach, offline capability, mobile friendliness, embeddable assets, and see Bento as a template for single‑file web apps, while some compare it to Reveal.js and suggest integrations with Pandoc or Claude‑generated content. Praise includes: "Love that it's just one HTML file, really easy way to share software." "Awesome. Perfect for editing with agents and sharing with coworkers. - Even works well on mobile. - Embedding images and videos also works flawlessly." "I’ve been trying to promote this kind of Single‑File Web Apps as a concept - feel free to add this to the proposed Wikipedia page." "This blew my socks off. Theres something so satisfying about knowing everything I need is in a single file." Some compare to Reveal.js: "Was using Reveal.js which worked well because it can use any HTML or any plugin. Bento works with a predefined schema, so you cant use any HTML library (Such as Mermaid.js) if you need it in your presentation. But then again, often you dont need it. Just created a presentation with Bento... I do think Reveal.js gives you more raw power. But I like bentos single html page design, and you can easily edit it manually." Others suggest using Claude or other LLMs to generate content directly in Bento, and a few ask about self‑hosting the collaboration relay.