HN Explorer

Show HN: Bento - An entire PowerPoint in one HTML file (edit+view+data+collab) (bento.page)

1033 points by starfallg ↗ HN
Over the past few months, our team has been building more and more slidedecks using web frontend technologies with coding harnesses like Claude Code, but a common complaint is to make even small edits we need to edit the code either manually or via the harness.

To avoid this loop, I ended up creating Bento, a single HTML file with everything you need in a slide tool including animations and shared editing. There's no install or cloud login, everything works offline. The default deck is around 560 KB and it doesn't need to fetch anything once you got it.

Open it in a browser and then you can edit, present, print and save. Share it via email or via Airdrop and all they need is a browser to edit, present and also do live collab on the slides. Drop it in to Claude or ChatGPT to transform existing pptx files into Bento slides. There is no cloud involved, only an encrypted blind relay to allow for shared editing. The relay doesn't see any of the data.

Check it out at https://bento.page/slides/ which takes you straight to the editor.

Go to https://bento.page/guestbook/ to try out the live guestbook to experience share editing / collab.

There is also a gallery with some sample decks on the website - https://bento.page/

All the code is MIT licensed and you can find it here - https://github.com/nyblnet/bento . I used reveal.js with several other libraries (including some homegrown ones), and Claude Code.

147 comments

[ 0.48 ms ] story [ 91.1 ms ] thread
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.

inanutshellus
The concept that's MAGICAL in Reveal.js is vertical slides.

e.g. https://revealjs.com/#/2/1 <-- from here you can go up or down, then go right to continue the presentation.

You just make one slide deck with lightweight high-abstraction slides and depending on the audience you just... hit the down arrow. bam. now you're inside the tech slides. no nerdy tech guys? sweet, don't hit down on slide 3. Instead you're with the marketing guys, so hit down on slide 5.

Anyway - looks like you got rid of that in order to mimic Powerpoint, but... don't forget it's there. it's my favorite part of using Reveal.js!

gcanyon
I guess I get the clarity (of vertical slides as you describe), but I'm wondering if two dimensions is limiting -- slides could be a flow chart, with various forks/side quests along the way. Obviously it would be possible to build something as confusing as the Colossal Cave, but the vertical slides use case would easily be a subset of that larger functionality, and it would leave it up to the user to decide their level of need for/tolerance of complexity.
PhilippGille
The project looks very interesting, thanks for sharing!

You seem to have created a new GitHub account just for this project a week ago. Do you have any other GitHub accounts that enable us to see a track record of your work (maintenance, security)?

ericyd
Good faith question: what would you do with this information if you had it? For example, do you have a systematic audit plan for github accounts that you execute before using a project?
chr15m
Would be cool to use Nostr relays, then you don't have to depend on the proprietary CloudFlare infrastructure.
starfallg
Thanks for the pointer on this, will check this out.
appplication
Very cool! FYI I was able to cause all sorts of hell by pinch zooming on mobile safari. This seemed to throw off the click and drag select box and on one occasion crashed the page entirely.
moontear
How do we UPDATE the underlying engine once it gets new features? Since this is a self contained HTML file I am not sure how this works.

Editing multiple things at once (select via CTRL) needs some more options (like text centering).

latexr
Why does the homepage mention AI over 20 times? Why does it mention AI at all? Why is most of it absurdly long and obfuscated base 64, which looks be binary data?
luanmuniz
This is awesome! I do love this software is one file thing. A breath of fresh air on these you-rent-everything-owns-nothing days
meetingthrower
OMG coming from bigtime consulting this is...AMAZING. Thank you!
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
yreg
The draft doesn't read as a Wikipedia article – e.g. addressing the reader as 'you'.

I don't think WP is the right place for this. It is supposed to be a tertiary source, not a place to promote concepts you want to see established.

habibicode
Precisely why I created iamsingle.app as a free directory for all single page apps
[deleted]
(comment deleted)
analog_daddy
Thanks for taking the initiative to create this page! I was disappointed with the search feature github had regarding searching these type of files.

Here are some more such tools I feel you might find interesting (or most likely you might already know them) but might be worth having in a single place as a list.

Nash is stand alone note as HTML. Source: https://github.com/keepworking/nash I recommend nash for when i feel people might get overwhelmed with tiddlywiki.

htpad: Handwritten scratch pad saves stuff to SVG. Source: https://github.com/akissinger/htpad I just use this for drawing on screen since teams annotation sucks.

Minimal PWA template. Source: https://github.com/chr15m/minimal-pwa A minimal template that should ideally work, but i wasn’t able to get it working with marimo wasm notebooks.

Currently, my focus is to use python either using pyscript or hopefully just use marimo to have python apps for simple things. I don’t want to learn js and avoided this side longer than i would have wanted. But python WASM ecosystem has grown significantly to a point where i feel investing time in building these tools.

Currently, marimo is having issues with the completely offline part but hopefully, that gets fixed!

habibicode
The lack of a centralized directory prompted me to create iamsingle.app, to list all single file app in one place
ebolyen
QIIME 2 creates scientific visualizations as single-file web apps, we've been using this pattern since late 2016 with a great deal of success.

Example gallery: https://view.qiime2.org/

bflesch
Looks nice, but I'd love to have a setting where all animations can be switched off.
truetraveller
Great job! How long did this project take total? How much percent is AI generated?
fragmede
Um, that's amazing... and it's free?
stackghost
>There's no install or cloud login, everything works offline. The default deck is around 560 KB and it doesn't need to fetch anything once you got it.

This is the best feature.

BIGFOOT_EXISTS
Absolutely love seeing products like this. Starred, saved link, will definitely use soon.
starfallg
Thanks, people asked about monetization but seriously Github stars is really all it's about.
[deleted]
(comment deleted)
momojo
This blew my socks off. Theres something so satisfying about knowing everything I need is in a single file. I know the caveat is *1. Have a modern browser*, but this is my go to format when trying out random ideas. I even have a macro called `try` that sends me directly to a new folder called `scratch/YYYYMMDD_<try_bento>`.

Great work! I hope to see more and more apps like this in the spirit of "Toss it all into context"

trentor
I like it. I used Claude and Qwen to build single file HTML decks in the last few months. The nicest thing with HTML decks is that you can not only ship the decks but integrate your prototype/demos in the same file integrated into the flow of your deck. Would love to see a feature like that.
skybrian
This is very neat!

For people clicking on a link to some slides that someone shared, it seems like starting out in viewing mode with a prominent edit button might be better than starting out in edit mode?

syhol
Looks very good and I'm excited to try it out properly. It's a shame about the name considering a lot of self-hosters will be using BentoPDF. But thats one of two hard things in Computer Science.
ethin
This is so cool! When I initially saw the title I was wondering how this is different from SlideJS or similar, but this is really cool and now I'm wondering if this could (at least in theory) be integrated into something like Pandoc as an output option?
starfallg
Thanks! I'm not familiar with pandoc but I think you can get some data out of the Bento JSON but is not going to be very rich. May be easier to render it to PDF (which works well in Chrome) first.
luckydata
this project is a monument to the HUGE failure of the Workspace team at Google to enable agent editing in a way that makes sense.

Google is really shitting the bed in all the way that matters on GenAI and being an ex employee of Cloud I am not in the least surprised about it, just really sad.

starfallg
I like a bit of good gossip. If you're based in London, let's go out for a beer.
ninjahawk1
I’ve honestly been kind of surprised that large companies software hasn’t been recreated for free en masse from the use of AI in a weekend. I’ve definitely seen some cases but it’s not as common as I had personally expected.
starfallg
In my day job, we have several teams doing this replacing mainly SaaS vendors. It's a easy sell and very low risk replacing basically CRUD web interfaces over databases.
cseleborg
A bit off-topic, but it is interesting that you say this.

Just earlier today I listened to Startups for the Rest of Us podcast episode 842 [1] titled "The future of SaaS in an AI World", where host Rob Walling addresses the "SaaS is dead" question. One of his arguments is that it's rarely worth spending time on rebuilding your SaaS vendors' solutions, taking time away from your core mission. But I guess that:

  1. the projects you hinted at are low-value services (e.g. CRUD web apps over DBs), and not SaaS services which have real moats, like CRM (connectors ecosystem) or email service providers (IP reputation, IT security).

  2. His argument applies to startups, where you're trying to grow your valuation by growing revenue (valuation = 5-10x yearly revenue) as opposed to established corporations which usually have a higher incentive to limit costs.
You seem like a very smart person, so I'd be curious to hear your thoughts here. Were these low-value SaaS services, and is this in the context of an established business?

Bento is awesome, well done!

[1] https://www.startupsfortherestofus.com/episodes/episode-842-...

francozanardi
Love that it's just one HTML file, really easy way to share software. Great work!
starfallg
Thanks, I hope this approach catches on!
shaism
Awesome. Perfect for editing with agents and sharing with coworkers.

- Even works well on mobile.

- Embedding images and videos also works flawlessly.

starfallg
I'm a bit worried on the UX on mobile, so I did some testing to get at least the basic working! Video also worked better than expected, I love how the video background in the Orbital deck turned out! Thanks for the feedback!
aag
What an ambitious and impressive project! I'm going to try it.

One note: The home page says "Nothing phones home," but the Bento files I've examined include a cloudflareinsights.com beacon.

Willamin
> include a cloudflareinsights.com beacon.

Agreed that the homepage should not indicate otherwise, but on the plus side with a tool like Bento you can edit the HTML file locally, remove the script tag at the bottom that does that, and never worry about that tracking again!

starfallg
I'm still having trouble tracking this down the Bento app. There's nothing in the source on cloudflareinsights.com and nothing is connecting to that either when I inspect from Chrome. Could it be from the website? (The website is a GH pages fronted by Cloudflare)

Can you share data or show where this is so I can quickly check?

dptrsa
I've been reading HN much longer than I've had an account, and I have never once left a comment or interacted with any post. Had to break the seal to say great job with this. Really fantastic out of the box, and timely thinking. I'll be using this for sure.