Bento - Single-file HTML presentation editor with live data
Show HN: Bento - An entire PowerPoint in one HTML file (edit+view+data+collab)
Bento redefines presentations by packing the entire deck, viewer, and editor into a single, self-contained HTML file. It eliminates the need for installations, accounts, or external servers, ensuring your slides remain accessible and editable forever. Users can create dynamic presentations featuring morphing transitions, interactive charts, and live data visualization directly within the browser. With built-in Markdown support and real-time editing capabilities, Bento offers a robust, future-proof solution for creating engaging, portable presentations that never rot.
The file is the software. One HTML file — deck, viewer and editor together. Open it anywhere. It saves itself.
- starfallg
Hi, I'm the creator of Bento. Just wanted to share a bit more about how I created it beyond what's in Github.
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 plian download and all updates are ECDSA signed.
I started with reveal.js which served as a base, and incorporated GSAP/Flip to handle the animation. Then I added charting with echarts, but due to a number of issues with size and how the worked, I ended up re-implementing both.
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.
- praveer13
This is amazing. I also think this will become more common. I feel there is a lot of software that can just be served locally via html/typescript/react etc and even have local state. There's just not been an economic incentive till now.
I am personally using kimi k3 to create a mobile friendly set of games, starting from math like linear algebra to quantum physics - neurodivergent friendly, completely local state, served from github pages - to get someone interested in the field. This needs an economic incentive to exist without LLMs, because of so much different expertise needed, and time.
if anyone's interested in the games let me know - i plan to play it myself, improve it, remove bugs etc before publishing on HN.
- maxloh
HTML and CSS feel fundamentally better suited for slide decks than JSON. At their core, most slides just boil down to simple flexbox structures:
┌──────────────────────────────────────────────┐
│ ┌─ Row 1 Container ────────────────────────┐ │
│ │ ┌─ 4-way padding ──────────────────────┐ │ │
│ │ │ [ Text Content ] (sole child node) │ │ │
│ │ └──────────────────────────────────────┘ │ │
│ └──────────────────────────────────────────┘ │
│ ↕ gap │
│ ┌─ Row 2 Container ────────────────────────┐ │
│ │ ┌─ 4-way padding ──────────────────────┐ │ │
│ │ │ [ Text Content ] (sole child node) │ │ │
│ │ └──────────────────────────────────────┘ │ │
│ └──────────────────────────────────────────┘ │
│ ↕ gap │
│ ┌─ Row 3 Container ────────────────────────┐ │
│ │ ┌─ 4-way padding ──────────────────────┐ │ │
│ │ │ [ Text Content ] (sole child node) │ │ │
│ │ └──────────────────────────────────────┘ │ │
│ └──────────────────────────────────────────┘ │
└──────────────────────────────────────────────┘
Layouts like this are naturally expressed using CSS and a layout tree, rather than forced into hardcoded coordinates.
- calebm
Awesome. 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: https://en.wikipedia.org/wiki/Draft:Single_File_Web_Apps
- d4rkp4ttern
Love it. Like some others here, I've been making html presentations with code-agents and they come out really nice. Other alternatives for that suit different purposes are these:
- slidev markdown-based slides, I often have a code-agent make these.
https://github.com/slidevjs/slidev
- typst slides are great looking too, especially with math etc. Again easy for agents to do
One minor nit: Based on the title, I thought this was literally a tool that had something to do with PowerPoint, but "PowerPoint" is used here as a synonym for "Presentation", which is ironic/unfortunate given how many dislike PowerPoint.
- jimmar
Nice work!
But...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. Unless passing accessibility checks is a feature, this isn't something I could use.
- notpushkin
> Go to https://bento.page/guestbook/ to try out the live guestbook to experience share editing / collab.
My M1 Mac froze in the end (had to hard-reboot), but that was so much fun! I guess there’s a reason Figma uses WASM and a custom renderer, though I guess your implementation should work fine for most cases (i.e. not when all of HN are trying to edit everything simultaneously :^)
Two notes:
1. It would be nice if another person changing something unrelated to what I’m doing didn’t reset the focus for me.
2. WAY too llm-y copy both on the landing page and the example deck. Your HN submission text is way easier and more pleasant to read.
And huge kudos for releasing this as FOSS!
- pipipi01
May be you can add AI to your page, nobody make slides by hand now.