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.
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!
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!
Could the hidden state slides "just" react to a down arrow press as well as to the click? But then they probably would have to have an order somehow?
Just my two cents.
Technically yes, and the order is just dependent on the chain of the keypress event triggering slide changes. Will investigate the best way to do this.
It'd be cool to add a third dimension to reveal.js decks. One of the transition animation options is "zoom", which visual effect is like going into / through the current slide. The Overview mode could be enhanced to show a 3D map (a stack of 2D layers). All kinds of fun mazes / games / interactive fiction use cases come to mind....
You guys are reinventing Prezi and I'm into it
We tried so many AI presentation makers but larger companies have brand standards to adhere to and these are terrible at handling them. That's the reason we started to hand roll web apps as presentations.
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?
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!
My initial reaction was “woah, you just described HyperCard”. Which isn’t exactly true in retrospect, but kudos for capturing the promise of (at least for me) one of the formative technologies that subtly, and not so subtly, influenced the web we know today.
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.
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! :)
Yup, I've made a note of this and will fix it once the Show HN traffic eases off a bit. Thanks for the feedback and the kind words!
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)?
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).
Bento has auto-update baked in. It checks for signed updates in a manifest, downloads it, rewrite the file structure with the new and reloads with the new file.
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.
Let me reproduce it on iOS and push out a fix shortly. Thanks for the heads up.
Would be cool to use Nostr relays, then you don't have to depend on the proprietary CloudFlare infrastructure.
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?
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.
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.
You are right, but I guess a lot of people recognise PowerPoint as a brand. Maybe I can bill this as better-than-powerpoint!
FactorialPoint, your slideshows improve even faster than an exponential!
Hehe, if we go in the other direction we can call it basepoint.
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.