一个 560KB 的 HTML 文件,正在重新定义办公软件的形态

一个 560KB 的 HTML 文件,正在重新定义办公软件的形态

最近在 GitHub 上刷到一个很有意思的开源项目 ——Bento,短短几周就攒了两千多颗星。它的口号很简单:”the office suite that fits in a file”(装进一个文件里的办公套件)。第一眼看到的时候我以为又是个玩具级的小项目,深入了解后才发现,这可能是近几年我见过对 “文档” 这个概念理解最透彻的产品之一。

一、文件即软件,一个朴素又激进的想法

我们先回到一个最基本的问题:一份演示文稿到底应该是什么?

十几年来,答案似乎越来越复杂。它可能是你电脑里一个需要特定软件才能打开的二进制文件,可能是云端某个账号下的链接,可能需要订阅会员才能导出高清版本,也可能在几年后因为服务商停运而彻底无法读取。我们拥有了越来越强的协作能力,代价是文档本身越来越不像一个 “东西”,而更像一段服务契约。

Bento 走了完全相反的路。

image

它的核心产品就是一个约 560KB 的 HTML 文件 ——Bento_Slides.bento.html。你把它下载下来,双击用浏览器打开,这就是完整的编辑器。编辑完按保存,这个文件会把你的内容写进自己内部,然后原地重写自身。你把这个文件发给同事,对方不需要装任何软件、不需要注册账号、甚至不需要联网,用浏览器打开就能编辑、演示、再保存回去。

换句话说,文件本身就是软件,软件本身就是文件。没有客户端与文档的区分,没有运行时和数据的分离。你 2026 年保存的这份文件,放到 2036 年找个浏览器打开,照样能用 —— 只要 HTML 标准还在。

这个想法并不全新,但 Bento 把它做到了令人惊讶的完成度。

二、麻雀虽小,五脏俱全

560KB 是什么概念?大概就是一张普通照片的大小。但里面塞进去的东西,说出来会让人有点难以置信:

完整的可视化编辑器

左侧幻灯片缩略图、中间画布、右侧属性面板,该有的都有。文本、形状、图片、表格、视频都能直接插入拖拽,操作逻辑和主流演示软件高度一致,几乎没有学习成本。对于习惯了 PowerPoint 或 Keynote 的用户,上手基本是无缝的。

图片[2]-一个 560KB 的 HTML 文件,正在重新定义办公软件的形态-酱豆博客

bento.page slides editor interface morph animation presentation

Morph 平滑过渡

这是我个人最喜欢的功能,也是很多专业演示软件的招牌。只要两张幻灯片上的元素共享同一个 ID,切换时就会自动计算位置、大小、颜色甚至渐变的平滑过渡。你只需要复制一页,挪动一下元素,动画效果就自动生成了。Bento 的 Morph 是基于数据模型计算的,不是 DOM 动画,性能和流畅度都相当不错。

内置图表引擎

柱状图、折线图、饼图、散点图全部自带,而且是自研的无依赖渲染引擎。最有意思的是,图表在演示模式下是活的 —— 有 tooltip、支持缩放,甚至能从柱状图平滑过渡成饼图,数据本身跟着 Morph 一起动。

图片[3]-一个 560KB 的 HTML 文件,正在重新定义办公软件的形态-酱豆博客

端到端加密的实时协作

这是最超出我预期的部分。一个单文件工具居然做了完整的 CRDT 实时协作,而且是端到端加密的。

协作密钥在你创建文档时就在本地生成,只存在于文件里。可选的中继服务器只负责转发密文,看不到任何内容。拿到文件的人天然就是协作成员 —— 不需要邀请、不需要账号,打开同一个文件就能一起编辑。离线修改的内容重新上线后会精确合并,连字符级别的文本改动都能正确收敛。

还有更多

演讲者视图、备注、PDF 导出、8 种界面语言、数学公式、运动路径动画、悬停交互状态…… 这些功能全部挤在 560KB 里,而且没有任何外部运行时依赖。打开之后不会偷偷加载任何远程资源,纯本地运行。

三、为 AI 而生的文档格式

Bento 最有远见的设计,可能是它对 AI 代理的原生友好度。

文档内容以纯 JSON 的形式存放在 HTML 文件顶部的一个<script>标签里,结构清晰、格式规范。这意味着任何能读写文件的 AI 助手 ——Claude Code、Cursor、Aider,甚至本地运行的开源模型 —— 都可以直接编辑这份文档,不需要插件、不需要 API、不需要专门的集成。

你可以把整个文件丢给大模型,让它帮你改内容、调布局、加动画,改完直接保存,文件照样能正常打开。官方甚至专门写了一份给 AI 代理看的文档规范,一页纸就能讲清楚整个格式。

反过来想,这其实是在重新定义 “文档” 的边界。当文档本身就是结构化的、可读的、可编程的,它就不再是软件的输出产物,而变成了一个可以被各种工具处理的数据载体。

四、技术上的几个亮点

作为一个开发者,我对它的架构设计也很感兴趣。

整个项目用 TypeScript 编写,核心模型定义在model.ts里,同一个渲染器同时服务于编辑器画布、缩略图和演示模式。动画、图表、CRDT 协作全部是自研实现,没有依赖重型库,这也是体积能控制得这么小的关键。

CRDT 部分专门做了模糊测试,跑了几十万次收敛校验来保证正确性。对于一个单文件工具来说,这种工程严谨程度相当少见。

保存机制也很巧妙。优先使用浏览器的 File System Access API 实现原地自改写,如果浏览器不支持,就回退到下载新文件。整个过程不需要后端,纯前端完成。

更新机制同样经过深思熟虑。新版本通过 ECDSA 签名发布,应用内校验后就地升级 —— 旧文件保留作为回滚,全程没有任何服务器能接触到你的文档内容。

五、不是银弹,但方向正确

当然,Bento 也不是完美的。

目前它只做了幻灯片这一个产品,表格和文档还在路线图上。移动端主要是查看和演示,编辑体验还是桌面优先。实时协作下的撤销是快照式的,可能会回退掉协作者同时修改的同一属性。和 PowerPoint 比起来,高级动画、精细排版、海量模板这些方面肯定还有差距。

但这些都是可以迭代完善的细节。真正重要的是它选择的道路 ——把所有权还给用户,把文档变回一个可以被拥有、被携带、被长久保存的实体

在 “一切皆服务” 的今天,愿意往回走一步,重新思考 “文件” 这个最朴素的概念,本身就很可贵。

六、谁应该试试 Bento?

如果你经常需要给别人发演示文稿,又担心对方打不开、没装软件;如果你在意数据主权,不想把工作内容放在第三方云上;如果你喜欢用 AI 工具辅助创作,想要一个容易被脚本和自动化处理的文档格式;或者你只是单纯反感臃肿的办公软件 —— 那 Bento 绝对值得你花十分钟体验一下。

最简单的方式是直接去bento.page/slides,网页打开就是完整的编辑器,自带的示例文稿同时也是功能导览。觉得好用再下载到本地,以后就用这个 HTML 文件开工。

项目完全开源,MIT 协议,代码在 GitHub 上:nyblnet/bento。想自己编译、改功能、部署私有中继服务器,都没问题。

Bento 零基础上手步骤

整个过程不需要注册、不需要安装,全程最多 3 分钟。

1. 获取你的第一个 Bento 文件

有三种最常用的获取方式,推荐新手从第一种开始:

  • 在线体验后保存:直接打开官网 bento.page/slides,浏览器里运行的就是完整编辑器,自带的演示文稿同时是功能教程。试用满意后,点击左上角 File → Save 就能把包含你内容的完整软件保存到本地,得到一个 .bento.html 文件。
  • 直接下载空白模板:去项目 GitHub 的 Releases 页面,下载最新版 Bento_Slides.bento.html(约 560KB),存到电脑任意位置即可。
  • 源码自行构建:适合有定制需求的开发者,Node 20+ 环境下,进入 slides 目录执行 npm install && npm run build:single,产物在 dist-single 目录中。

2. 基础编辑操作

打开文件后,界面逻辑和主流演示软件高度一致:

  • 左侧是幻灯片缩略图面板,右键可新建、复制、删除、排序幻灯片;
  • 中间画布是编辑区,顶部工具栏可插入文本、形状、图片、图表、视频等元素;
  • 右侧是属性面板,选中元素后可调整颜色、字体、位置、动画等细节。

Morph 平滑过渡的使用方法:复制一张幻灯片,在新页面中移动、缩放或修改元素颜色,只要元素 ID 不变(默认复制时会保留),切换时就会自动生成平滑过渡动画,无需手动打关键帧。

3. 保存:文件的 “自改写” 机制

这是 Bento 最特别的设计:保存操作会直接重写这个 HTML 文件本身。

  • 在支持 File System Access API 的浏览器(Chrome、Edge 等)中,点击保存会原地更新文件,不会生成新副本;
  • 不支持该 API 的浏览器(Safari、Firefox 等)会自动回退为下载新文件,替换原文件即可;
  • 所有数据都写入文件顶部的纯 JSON 区块,没有二进制格式,用文本编辑器也能直接查看和修改。

4. 演示与演讲者模式

  • F5 或点击右上角「演示」按钮进入全屏放映;
  • S 键可打开演讲者视图,能看到备注、下一页预览和计时器;
  • 内置虚拟激光笔功能,演示时可用于重点标注。

5. 开启端到端加密协作

不需要注册账号,文件本身就是 “邀请函”:

  1. 新建或打开一份文稿,确保已保存到本地;
  2. 点击右上角协作按钮,开启同步,系统会在本地生成加密密钥并存入文件;
  3. 把这份文件发给协作者,对方打开后会自动加入同一房间,所有改动实时同步;
  4. 所有传输内容均为 AES-GCM 加密,中继服务器只能看到密文。如果想完全自主,也可以自行部署 server/sync-worker 目录下的轻量中继服务。

6. 配合 AI 快速改稿

因为文档是纯 JSON 结构,AI 可以直接理解和修改:

  • 简单往返法:点击 File → Copy document JSON,把 JSON 内容发给大模型,让它调整内容、新增页面或优化排版,再把修改后的 JSON 粘贴回去即可。
  • 直接编辑文件:用 Claude Code、Cursor 等具备文件读写能力的 AI 工具,直接打开 .bento.html 文件,AI 可以定位到 #bento-doc 区块进行原地修改,保存后直接可用。

二、Bento vs PowerPoint 核心功能对比

两者定位不同,没有绝对的优劣,适合的场景差异很大。下面从多个维度做一份客观对比:

表格

对比维度Bento SlidesMicrosoft PowerPoint
核心定位单文件、本地优先的轻量演示工具全功能专业办公演示套件
文件形态单个 HTML 文件,软件与文档合一二进制 .pptx 文件,依赖独立软件打开
体积单文件约 560KB(含完整编辑器)软件安装包数百 MB,单份文档几 KB 到几十 MB
打开方式任意现代浏览器,无需安装任何软件需安装 Office 套件或使用网页版账号登录
离线能力完全原生支持,所有功能离线可用桌面版可离线,但云功能、协作依赖网络
协作机制端到端加密 CRDT,文件即身份,无账号体系基于微软云服务,需微软账号,依赖 OneDrive
数据主权数据完全在本地文件中,不上传任何服务器默认存储在云端,受服务商条款约束
AI 友好度原生 JSON 结构,任意 AI 可直接读写需插件或 API 接入,格式封闭解析复杂
平滑过渡支持 Morph,基于数据模型计算支持变体(Morph),功能更丰富
图表能力内置 4 种基础图表,支持演示交互和变形图表类型丰富,函数和数据分析能力强
动画系统基础动画 + 运动路径,满足常规需求动画系统极完善,支持复杂时间轴和触发器
导出格式PDF、HTML(自身)PDF、视频、图片、GIF、pptx 等多种格式
模板生态官方模板库较少,社区尚在成长海量官方与第三方模板,生态极其成熟
移动端支持查看和演示,编辑以桌面为主移动端 App 功能完整,编辑体验成熟
平台依赖仅依赖浏览器标准,跨全平台深度绑定 Windows/macOS 与微软生态
开源属性MIT 完全开源,可自由修改部署闭源商业软件,按订阅收费
长期可读性标准 HTML,理论上几十年后仍可打开依赖对应版本 Office,旧格式兼容性逐年下降

简单总结

  • 如果你需要做专业级的复杂演示、大量数据图表、精细排版,或者团队深度使用微软生态,PowerPoint 依然是无可替代的选择。
  • 如果你在意数据所有权、经常跨设备 / 跨平台分享、喜欢用 AI 辅助创作、或者只是想要一个轻便干净、永远不会失效的演示工具,Bento 会是非常惊艳的替代品。

写在最后

办公软件这个领域已经很多年没有真正的范式级创新了。大家比的是谁的功能更多、谁的模板更漂亮、谁的协作更顺滑,但很少有人回头问一句:文档最本真的形态应该是什么?

Bento 给出的答案很简单:一个文件。一个你可以握在手里、存在 U 盘里、发给任何人、十年后还能打开的文件。

这个答案朴素得几乎有些过时,但恰恰是这种朴素,在今天显得格外珍贵。

软件来来去去,服务说停就停,但一个好的文件格式,可以存活很久。

项目地址:

https://github.com/nyblnet/bento

© 版权声明
THE END
喜欢就支持一下吧
点赞14 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容