nyblnet/bento · 上手攻略

• 仓库：nyblnet/bento
• 链接：https://github.com/nyblnet/bento
• 分类：办公软件 / 单文件 HTML 应用 / 本地优先
• 作者：Jay
• 更新：2026-07-29

是什么

Bento 是一个单文件 HTML 办公套件——目前以幻灯片（Slides）应用为核心，规划中还包括 Docs 和 Sheets，每个都打包成独立的 .bento.html 文件。它的核心思路是：文件本身就是软件。一份 .bento.html 文件包含完整的查看器、演示模式和编辑器，不需要安装、不需要注册、不需要联网——用任何现代浏览器打开即可运行。所有内容存储在文件顶部透明的 JSON 数据块中，无任何私有二进制格式。

解决什么问题

传统办公软件（PowerPoint、Google Slides）存在几个根本性痛点：

• 云锁定：文档存在别人的服务器上，账号一封、订阅一停，文件就打不开
• 格式不兼容：.pptx 换个版本就可能排版乱成一团，跨设备协作更是噩梦
• 体积臃肿：安装包动辄几百 MB，实质上只是看个幻灯片
• AI 难以介入：聊天机器人无法直接编辑 .docx 或 .pptx，需要复杂插件

Bento 的答案是：一个文件，永远可用；一份 JSON，AI 也能读。

快速安装

完全零安装，直接用浏览器打开即可体验完整功能。

方式一：在线试用（10 秒）

直接打开 bento.page/slides，会加载一个功能演示 Deck，可直接编辑，是最快速的上手入口。

方式二：下载文件（推荐离线用）

# 方式 A：从 GitHub Releases 下载（推荐稳定版）
# 访问 https://github.com/nyblnet/bento/releases
# 下载 Bento_Slides.bento.html（约 560 KB）

# 方式 B：直接从 bento.page 下载最新版
# https://bento.page/releases/slides/Bento_Slides.bento.html

下载后双击用 Chrome / Firefox / Safari / Edge 打开即可，没有后端需要运行。

本地开发（仅贡献者 / 二次开发需要）

git clone https://github.com/nyblnet/bento.git
cd bento/slides
npm install
npm run dev        # 开发服务器 http://localhost:5173
npm run build:single  # 构建 → dist-single/Bento_Slides.bento.html

开发版本需要 Node.js 20+。

核心用法

1. 基本编辑操作

打开 .bento.html 文件后，默认进入编辑器界面： - 新建幻灯片：点击左上角 + 按钮或使用快捷键（参考编辑器内快捷键列表） - 插入元素：工具栏提供文本框、图片、图表、表格、媒体（嵌入/链接）等 - 保存：按 Ctrl+S / Cmd+S，文件会通过 File System Access API 自更新（Chrome/Edge 支持），其他浏览器回退为下载覆盖 - 演示模式：按 F 或点击右下角 Present 按钮进入全屏演示

2. Morph 过渡动画（Bento 最招牌的功能）

两个相邻幻灯片上，给同一个元素赋予相同的 id，并在后者上设置 transition:"morph"，元素就会在两张幻灯片之间平滑地"变形"——位置、大小、颜色甚至渐变都会动画过渡。

// 幻灯片 1：标题和装饰条
{
  "id": "slide-1",
  "transition": "none",
  "elements": [
    { "id": "headline", "type": "text", "html": "Hello World", "x": 200, "y": 300 },
    { "id": "accent-bar", "type": "rect", "w": 300, "h": 8, "fill": "#6366f1" }
  ]
}

// 幻灯片 2：相同 id 的元素 morph 成新状态
{
  "id": "slide-2",
  "transition": "morph",
  "elements": [
    { "id": "headline", "type": "text", "html": "Hello Bento", "x": 400, "y": 250 },
    { "id": "accent-bar", "type": "rect", "w": 500, "h": 8, "fill": "#8b5cf6" }
  ]
}

3. 图表内置

支持柱状图、折线图、饼图、散点图，编辑器和演示模式都原生渲染，支持工具提示、缩放，且图表在 morph 过渡中会自动变形（柱状图变饼图等）。

4. AI Agent 编辑（核心差异化能力）

Bento 的文档就是文件顶部的 JSON，任何能读写文件的 AI Agent 都能直接编辑，无需 API 或插件：

方式 A：文件级 Harness（Claude Code 等）

安装 Bento 官方的 Claude Code 技能（SKILL）：

# 在 Claude Code 中运行
/plugin marketplace add nyblnet/bento
/plugin install bento-slides@bento

安装后，在任何目录下运行 /bento-slides，它会自动下载最新版 Bento App 并开始创作。也可以作为普通个人技能安装：

mkdir -p ~/.claude/skills/bento-slides
curl -fsSL https://bento.page/skills/bento-slides/SKILL.md -o ~/.claude/skills/bento-slides/SKILL.md

方式 B：聊天气泡式（任何聊天机器人）

用户通过界面内 About → Copy document JSON 导出文档 JSON → 丢给 AI 改写 → AI 返回完整 JSON → 用户 About → Replace document from JSON… 粘贴回去（可撤销）。

方式 C：浏览器控制台

// 读取当前文档
window.bento.doc

// 加载新文档（可撤销）
window.bento.loadDoc(newJson)

5. 实时协作（E2EE）

• 文档创建时客户端生成协作密钥，密钥只存在于文件本身
• 通过可选的"盲中继"服务器（存储加密密文，不解密任何内容）进行同步
• 离线编辑后重新联网，CRDT（无冲突复制数据类型）自动精确合并，包括字符级文本合并
• 离线模式一键开启，完全阻断任何数据外传

6. LaTeX 数学公式

在文本框中直接输入 $E=mc^2$（行内）或 $$...$$（独立显示行），由 MathML 渲染。morph 过渡中甚至支持符号级公式动画（等式两边变形）。

典型适用场景

坑与注意

1. 手机端编辑受限：编辑器在 402px 宽度可用，但"另存为"菜单目前手机端还进不去；手机上看和演示体验良好，但深度编辑建议用桌面浏览器。

2. 实时协作中撤销是快照级的：两个用户同时编辑同一属性时，撤销可能回退对方的并发改动。不是 bug，是当前设计边界，适合"各自改不同区块"的协作模式。

3. morph 只能跨相邻幻灯片：id 相同的元素必须分别在两张相邻幻灯片上才能触发 morph，中间隔一张幻灯片不会生效。

4. 文件格式版本匹配：编辑时若文件由更新版 shell 保存，可能包含 guide 版本未覆盖的新字段；旧 shell 打开会忽略未知字段（向前兼容），但新特性不可用。

5. 中继服务器是可选的：不配置中继服务器也可以本地使用，只是无法远程实时协作；若要协作需要自建 server/sync-worker/ 或使用官方中继服务。

6. 外部图片链接破坏离线保证：嵌入 data: 或 asset: URI 的图片随文件走；引用外部 URL 则失去离线可用性。

7. 发布时建议转只读模式：最终分享时可另存为只读播放器模式（readonly:true），打开直接进演示，无编辑器干扰。

与同类对比

一句话推荐结论：如果你的工作流有 AI 参与，或需要"发出去的文件永远能打开"，Bento 是目前最优雅的解决方案；如果你需要完整 Office 套件（Word/Excel/PPT 协同）和企业级治理，PowerPoint/Google Slides 仍不可替代。

一句话推荐结论

Bento 用"文件即应用"的思路彻底解耦了文档与平台，是本地优先、AI 友好、永久归档场景下的最佳幻灯片选择——尤其适合经常需要跨组织发送演示文稿、或希望 AI Agent 直接参与 PPT 创作的用户。