Bento: 单HTML文件实现演示文稿全功能
Show HN: Bento - An entire PowerPoint in one HTML file (edit+view+data+collab)
Bento 重新定义了演示文稿的形态，将整个 PowerPoint 体验压缩进一个 HTML 文件中。无需安装软件、无需注册账号，浏览器即是一切。它集成了编辑器、演示器和数据引擎，支持 Markdown 即时排版、实时交互式图表以及平滑的 Morph 动画过渡。文件即软件，所有资源内嵌，随时保存，十年后依然可完美打开。
文件即软件：一个 HTML 文件，集演示文稿、查看器和编辑器于一身。
HN 评论区
230- starfallg
大家好，我是 Bento 的创作者。想补充一些 Github 上没提到的开发细节。
这个文件主要包含两部分。文件顶部有一块纯 JSON 数据，即幻灯片内容。你可以直接读取、grep 搜索，或者用测试框架对接它。应用程序本身是一个 base64 编码的大二进制对象（blob），通过一个小 shim 加载，并在浏览器中使用 DecompressionStream 进行解压。这样做既保持了包体积小巧，又无需在运行时获取任何外部文件。文件写入回原文件使用了 File System Access API，如果该 API 不可用，则降级为下载文件（plian download），且所有更新都经过 ECDSA 签名。
我最初是以 reveal.js 为基础，并整合了 GSAP/Flip 来处理动画。后来我尝试用 echarts 添加图表功能，但由于体积和运行机制上的诸多问题，最终我选择重新实现了这两部分。
最让我满意的是 CRDT 的无缝体验。盲中继（blind relay）是一个运行在 Cloudflare Durable Objects 上的小文件，它只看到客户端发来的加密数据。协作功能默认关闭，直到我们在应用中开启（通过分享邀请文件启动会话），此时会生成一组密钥。访问控制由用户密钥管理，你可以设置只读用户，也可以随时撤销特定用户的实时协作权限。
- praveer13
太棒了。我也认为这种情况会越来越普遍。我觉得有很多软件完全可以本地通过 html/typescript/react 等直接提供，甚至拥有本地状态。只是直到之前，一直缺乏经济上的驱动力。
我个人正在使用 kimi k3 开发一套移动端友好的游戏，涵盖从线性代数等数学到量子物理的内容——对神经多样性人群友好，完全本地状态，托管在 github pages 上——旨在激发人们对这些领域的兴趣。由于需要多种不同的专业知识和大量时间，如果没有 LLM 的辅助，这类项目很难在没有经济激励的情况下存在。
如果有人对这些游戏感兴趣，请告诉我——我计划在发布到 HN 之前自己试玩、改进并修复 bug。
- calebm
太棒了。我一直试图推广这种“单文件 Web 应用”的概念——欢迎将其添加到拟议的 Wikipedia 页面：https://en.wikipedia.org/wiki/Draft:Single_File_Web_Apps
- d4rkp4ttern
太喜欢了。和这里的一些人一样，我也在用代码代理（code-agents）制作 HTML 演示文稿，效果非常好。其他适合不同用途的替代方案有：
- slidev：基于 markdown 的幻灯片，我经常让代码代理来生成。
https://github.com/slidevjs/slidev
- typst 幻灯片看起来也很棒，尤其是处理数学公式时。同样，代码代理也能轻松搞定。
一个小吐槽：看到标题时，我以为这是一个与 PowerPoint 字面相关的工具，但这里的“PowerPoint”只是被用作“演示文稿”的同义词。考虑到有多少人讨厌 PowerPoint，这真是有点讽刺/不幸。
- notpushkin
> 前往 https://bento.page/guestbook/ 尝试实时留言板，体验共享编辑/协作功能。
我的 M1 Mac 最后卡死了（不得不强制重启），但这过程太好玩了！我想 Figma 使用 WASM 和自定义渲染器是有原因的，不过我想你的实现对于大多数情况应该都没问题（除非所有 HN 用户同时试图编辑所有内容 :^）。
两点建议：
1. 如果另一个人修改了与我当前操作无关的内容，最好不要重置我的焦点。
2. 落地页和示例演示文稿中的文案太像 LLM 写的了。你的 HN 投稿文案读起来要简单愉快得多。
另外，非常感谢将其作为 FOSS 开源！
- georgeburdell
嗨，只是想说说，我觉得这填补了企业界一个极其常见的需求空白。我公司里有几个团队已经切换到某种 fancy html/javascript 方案，不再使用云端或桌面的现成演示/可视化软件，因为他们受够了 bug 迟迟不修复或自定义功能无法添加的问题。
各地的内部 IT 领地主义者们应该感到非常害怕。
- bryanhogan
很酷的项目。我之前也用过基于 markdown 的幻灯片工具来处理类似场景：
- Marp: https://marp.app/
- Slidev: https://sli.dev/
- Revealjs: https://revealjs.com/
还有一个更相似的方案，基于 HTML 和 CSS，但使用的是 Svelte 框架，叫 Animation: https://animotion.pages.dev/
它专注于包含动画的演示，当然也很灵活。
- aag
多么雄心勃勃且令人印象深刻的项目！我要去试试。
一点提醒：主页上写着“没有任何数据回传”，但我检查过的 Bento 文件中包含一个 cloudflareinsights.com 的信标（beacon）。