
最近在Hacker News上开源项目 Bento极为火爆。
Bento 是一个把完整幻灯片编辑器、查看器、演示器和数据全部打包进单个 HTML 文件的本地优先(local-first)办公套件。打开这个 .bento.html 文件就能直接编辑和演示,保存时文件会自我重写。设计目标是消除锁死、保持数据可移植,并方便 AI Agent 直接操作。
Bento:https://bento.page/slides/
GitHub:https://github.com/nyblnet/bento
Bento 的核心技术实现原理:
1. 单文件结构(On-Disk Anatomy)
一个 .bento.html 文件由固定部分Shell + 可变数据(#bento-doc)组成:
Shell(运行时壳):
约 560 KB(压缩后更小),包含:
- 完整的应用逻辑(TypeScript 编译后的 JS)
- CSS
- Reveal.js(负责幻灯片导航)
- 自定义引擎:动画(anim.ts)、图表(charts.ts,纯 SVG,无第三方依赖)、交互(Moveable / Selecto)
- 字体、许可证声明等
数据块(#bento-doc):
<script type="application/bento+json">
{ ... 完整的 JSON 文档模型 ... }
</script>
内容是明文 JSON(format: “bento/slides”),所有 < 被转义成 \u003c 防止提前结束 script 标签。
图片、自定义字体等资源以 data URI 形式嵌入 assets 字段。
文档模型定义在 slides/src/model.ts,结构清晰(slides、elements、layouts、theme、collab 等)。
保存时只重写这个 JSON 数据块,Shell 保持不变。
2. 运行时流程
a、浏览器打开文件 → 启动极小的 boot 代码。
b、读取并解析 #bento-doc 中的 JSON。
c、初始化 Store,用统一的渲染器(render.ts)绘制编辑器画布、缩略图和演示模式。
d、演示模式复用 Reveal.js 做翻页,Morph 动画则根据相邻幻灯片中相同 id 的元素自动计算位置、大小、颜色、渐变等过渡。
e、保存:
优先使用 File System Access API 原地重写当前文件。
不支持时回退到下载新文件。
编辑器临时状态(选中、缩放等)存在 localStorage,不写入文件。
3. 关键能力
- CRDT:自研字符级 CRDT(sync/crdt.ts),支持离线合并,经过 fuzz 测试。
- 端到端加密:密钥只存在于文件中(AES-GCM),可选的盲中继(Cloudflare Durable Objects)只存密文。
- 角色控制:writer/reader,支持签名写入(ECDSA)。
- AI 友好:文档就是普通 JSON,Agent 可以直接编辑文件或通过 window.bento.loadDoc 操作。
4. 其他设计原则
- 本地优先 + 可移植:无账号、无强制服务器、文件本身就是应用。
- 自我更新:可选 ECDSA 签名的更新机制,旧文件可回滚。
- 安全:CSP 友好、HTML 内容消毒、无外部依赖加载。
- 构建:Vite + vite-plugin-singlefile 把所有资源内联成单个 HTML。
详细文档可以参见仓库中的 docs/architecture.md、docs/format.md、docs/collab-design.md、docs/agents.md。
Bento 属于 Single-File Web App(单文件 Web 应用) 这一类,核心特征是:应用代码 + 用户数据全部存在一个 HTML 文件里,打开即用,保存时自我重写。
关于Single-File Web App的介绍:https://gods.art/articles/single_file_web_apps.html
经典的Single-File Web App汇总:
SingleFile: https://github.com/gildas-lormeau/singlefile 《SingleFile的那些事》
TiddlyWiki:https://tiddlywiki.com/ 单文件 Wiki
TiddlyPWA:https://tiddly.packett.cool/ TiddlyWiki PWA 化版本
Feather Wiki:https://feather.wiki/ 轻量单文件 Wiki
1.5KB Single-File Wiki:https://dev.to/fedia/15kb-single-file-wiki-46a1 单文件 Wiki,gzip 后约 1.5 KB
Nash:https://keepworking.github.io/nash/ 纯前端单 HTML 笔记工具
Marp / Slidev:https://sli.dev/ 面向程序员的幻灯片应用,生成自包含 HTML 演示文件,但编辑通常在外部(Markdown 源文件)
Hypervault:https://hypervault.github.io/ 单文件文件加密应用
Fuzzy Graph:https://fuzzygraph.com/ 单文件图形计算器
Lopecode:https://github.com/tomlarkworthy/lopecode 运行于浏览器的可塑编程环境
Slingcode:https://slingcode.net/ 通用单文件应用平台
Hyperclay:https://hyperclay.com/ 通用单文件应用平台
SQLite:https://sqlite.org/ 单文件关系数据库
与“Single-File Web App” 理念对应的还有“单一服务用途网站”,有一个网站专门收集此类优秀网站。
Single-Serving Sites:https://singleservingsites.cool/
具体介绍可以参见《Single-Serving Sites,单一服务用途优秀网站大搜罗》
Single-Serving Sites,单一服务用途优秀网站大搜罗