Top
Best
New

Posted by starfallg 5 hours ago

Show HN: Bento - An entire PowerPoint in one HTML file (edit+view+data+collab)(bento.page)
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.

515 points | 106 comments
starfallg 5 hours ago|
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.

allisdust 3 hours ago||
I would call this a slide show not powerpoint mostly because making it work with the satanic office formats is a path to hell.

Hopefully simpler formats like this will become the norm and the old ones can die.

starfallg 3 hours ago|||
You are right, but I guess a lot of people recognise PowerPoint as a brand. Maybe I can bill this as better-than-powerpoint!
saghm 2 hours ago||
FactorialPoint, your slideshows improve even faster than an exponential!
starfallg 1 hour ago||
Hehe, if we go in the other direction we can call it basepoint.
stackghost 2 hours ago|||
The term "powerpoint" has been genericized in the common vernacular to mean any electronic slide show, like kleenex for tissues and sellotape/scotch tape for transparent adhesive tape.

It might not have reached legal generic status but just about any working professional will understand what you mean if you refer to "making a powerpoint deck" even if you don't use the actual Microslop product.

mbreese 4 hours ago|||
This was my biggest question. Thanks for preemptively answering (and being proud!).

When I was playing with this, I immediately thought of TiddlyWikis, which I've always been fond of, but they never took for me. However, an easily editable presentation -- that's a use case I can understand.

I couldn't see how there was a CDRT when I'm just working with a single file. I was trying to figure out where the server was. So -- this is just on for everyone? Are you concerned that your Cloudflare account will be hammered with this?

rpdillon 3 hours ago|||
My project for the past few years is called AppDeck, collection of self-contained HTML files that know how to save themselves back to the AppDeck server, which is just WebDAV. AI has been enormously helpful in building out a suite of apps that can do this. So far I have a diagram editor that can produce SVGs, a multi-document editor that backs everything with markdown, but supports Kandan boards, documents, logs, and calendars. I also have a work flowy clone that I've really been enjoying organizing ideas with at work. There's a gallery app that inlines all of the images and can display them full screen in a light box and with a timed slideshow that also supports captions and encryption.

All of it just runs out of a folder on disk and can either be deployed locally or on a server behind a login. I intend to open source it, but I'm not quite proud enough yet of some of the implementation aspects to do so. Hope to do it this summer though!

starfallg 4 hours ago|||
You can play around in the guestbook. I'm in it right now and you can see me editing things.

Cloudflare Durable Objects are pretty cheap and I'm using it like a very basic pub/sub with each deck having it's own DO. I did some calculations and it should be well within my spend limits.

francozanardi 3 hours ago||
Something super small that I've noticed in the guestbook: since there're a lot of people connected, I noticed that every time I received an update, I lost the focus of my text element, so it was a little bit difficult to write something.

It may be annoying if two users are working at the same time in the same project.

Again, very cool project! :)

inanutshellus 1 hour ago|||
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!

starfallg 1 hour ago||
That's a great point. I went down the state slide route in order to handle a similar type of use-case, but I'll look into this and see if we can incorporate that somehow. It seems like a really elegant way to implement some state slide use cases. And thanks for the heads-up on this!
ronyeh 3 hours ago||
Nice idea. What happens if you upgrade to v2 and my slide decks are on v1?

Can I click upgrade and get the JSON slide deck data exported into a v2 shell?

starfallg 3 hours ago||
Yeah, upgrades are pretty seamless so far as the JSON format for the slide data is pretty forgiving. You can also export and reimport the data. It's in the split pill next to Save.
praveer13 3 hours ago||
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.

WillAdams 3 hours ago||
Yeah, I was just discussing with a co-worker the concept of a hybrid document where editing controls and the content all exist in a single HTML file (prior implementations include various wikis such as: https://feather.wiki/ ) --- makes one wonder what an SVG or spreadsheet implementation might look like.
starfallg 3 hours ago||
Thanks! If you need anybody to test and feedback, I'll give it a go.
praveer13 3 hours ago||
https://vecto.play.naigap.com/

https://phaseworld.play.naigap.com/

https://slope-rider.play.naigap.com

Three so far Repos -

https://github.com/praveer13/vecto

https://github.com/praveer13/slope-rider

https://github.com/praveer13/phase-world

oijkuij 11 minutes ago||
I love it! I will absolutely be trying this out and following along.

For a long time I've used draw.io for making diagrams, and found it clever that you can effectively save your document as an iframe blob of editor + file (though in their case, the editor is not stored in the file, a web connection is required to load the editor codebase. I've wished that could be the primary use case and this is basically what I'd imagined!

notpushkin 3 hours ago||
> 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!

starfallg 3 hours ago|
Thanks! I had to reset the guestbook because it's being spammed. It's on epoch 4 now, hopefully people will be better behaved moving forward!

1. Yes, that's a good point that somebody else raised also. It went pass testing as I was only testing with 1 or 2 other people at once. Will fix this tonight.

2. Yeah, agreed and fair point. But I don't write well and I don't have time between day job and being a dad. Will try to fix this gradually.

notpushkin 3 hours ago||
1. I’ve added the ⌘V remark on the first slide (it was the only way I could add anything in the previous epoch at all!). Hope it helps others have fun in the meanwhile.

2. Absolutely fair point, and it’s okay – the demo speaks for itself :-) Although if you wrote that submission text yourself, you do write pretty well! But obviously no pressure here.

calebm 4 hours ago||
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 2 hours ago||
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.

littlecranky67 3 hours ago|||
mdwiki [0] would probably qualify. Disclaimer, I created+released it in 2013. I always jokingly called it the first true single-page application - as it was a single, offline-capable .html file with all images, icons, styles etc. inlined in the same .html file.

[0]: https://mdwiki.info

billyp-rva 2 hours ago|||
Ilograph diagrams can be exported to standalone HTML files (like this example: [0]). Coincidentally, they also have slides (kind of) and clock in at around 560KB.

[0] https://www.ilograph.com/demo/intelligentDocumentProcessing....

Jonovono 4 hours ago|||
https://hyperclay.com/ could be on there I think
RodgerTheGreat 2 hours ago|||
http://beyondloom.com/decker/
starfallg 4 hours ago||
Thanks for sharing this! Let me take a look. I was only aware of TiddlyWiki when I first started on Bento.
georgeburdell 57 minutes ago||
Hey just wanted to say I think this fills an extremely common niche in the corporate world. There are a couple of teams at my company who switched to some variant of fancy html/javascript and away from either cloud or desktop copies of off-the-shelf presentation or visualization software because they were tired of bugs not being fixed or custom features not getting added

Internal IT fiefdoms everywhere should be very afraid

starfallg 28 minutes ago|
Exactly what we've seen in our company. A lot of techies create these awesome web-app presentations which look awesome and wows everybody, but then some poor person that has Claude but not Claude Code (we somehow decided it was only for techies/SWEs) would then be scratching their heads on what to do because some figures are wrong and they need to update it before the very-important-steerco in the afternoon.
fh67 1 hour ago||
I'm thinking of installing a blank bento for users as a pwa (using browser install site as app), script the author name etc and then make the file read only so they are forced to save as, for users to use as a standalone powerpoint tool.

Maybe you can implement this into the project, a blank default read only (except author details) that installs as a pwa.

starfallg 25 minutes ago|
I thought about make it a PWA, but I'm still on the fence about hosting in general. Will probably have to host in order to deal with enterprise use-cases, but I just want to make something simple and cool for now. Thanks for the feedback, will explore a bit about what people will want in a hosted solution and how it can keep these principles I think makes it special.
jbl0ndie 16 minutes ago||
I love this.

I hope you don't get cease and desisted by MS for mentioning PowerPoint.

d4rkp4ttern 1 hour ago||
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.

mguerville 1 hour ago|
As someone who makes a living in PowerPoint but loves tech and FOSS, congrats. I'm not sure I fully follow how collaborating works, you may want to write an explainer that assumes nearly zero engineering knowledge. Looking forward to the docx and xlsx version, I'll follow on gh to stay up to date
More comments...