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

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.

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.

- 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.

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!

- Marp: https://marp.app/

- Slidev: https://sli.dev/

- Revealjs: https://revealjs.com/

Something more similar, based on HTML and CSS but instead based on the Svelte framework, was Animation: https://animotion.pages.dev/

It focuses on presentations that include animations, but of course it's flexible.

Internal IT fiefdoms everywhere should be very afraid

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

A basic starter html file with an example app: https://glider-app.netlify.app/glider.html

Docs: https://glider-app.netlify.app/docs.html

The docs aren't very polished yet but it's quite usable!

It bundles a JSX transpiler, a code editor, and supports saving to a file or localstorage. It supports "ejecting" to separate the shell (handling saving files, transpiling, editing, etc) from the JSX and the JSON data.

I also threw together an iOS app in which you can save these mini apps, allowing for longer term saving of data and code edits without relying on localstorage alone, making the save/refresh loop seamless. It includes a sandbox, preventing any saved mini apps from making network calls, but allows the user to enable network usage on a per-app basis. I'd like to include more QoL features like a native editor, but haven't prioritized that yet.

https://apps.apple.com/app/id6790498430

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.

  ┌─────────────────────────────────────────┐
  │ ┌─ Row 1 Container ───────────────────┐ │
  │ │ ┌─ 4-way padding ─────────────────┐ │ │
  │ │ │ [ Text Content ]  (child node)  │ │ │
  │ │ └─────────────────────────────────┘ │ │
  │ └─────────────────────────────────────┘ │
  │                  ↕ gap                  │
  │ ┌─ Row 2 Container ───────────────────┐ │
  │ │ ┌─ 4-way padding ─────────────────┐ │ │
  │ │ │ [ Text Content ]  (child node)  │ │ │
  │ │ └─────────────────────────────────┘ │ │
  │ └─────────────────────────────────────┘ │
  │                  ↕ gap                  │
  │ ┌─ Row 3 Container ───────────────────┐ │
  │ │ ┌─ 4-way padding ─────────────────┐ │ │
  │ │ │ [ Text Content ]  (child node)  │ │ │
  │ │ └─────────────────────────────────┘ │ │
  │ └─────────────────────────────────────┘ │
  └─────────────────────────────────────────┘

Basically everything is client side generated from a seed - entire games and their replays get stored in a tiny url - pretty much every possible game ever fits in a version 40 QR code

It’s snake X scrabble X PvP

[0] https://snibble.gg

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

[1]: https://impress.js.org

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.

But I am not really sure how to achive this for the secondary y-axix (I was playing with the percentages and simulating negative growth).

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!

https://tiddlywiki.com

This is the best feature.

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

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. You cant do that with Reveal.js

Would love to know more about how this works then? Is it more or less encrypted P2P?

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?

- Even works well on mobile.

- Embedding images and videos also works flawlessly.

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

Thanks for sharing and deserves a lot of Github stars!

https://en.wikipedia.org/wiki/Bento_(database)

Also, maybe a way to use sharing via LAN and strip any features that any phone remote services.

https://en.wikipedia.org/wiki/Bento_(database)

screenshare to taste