hotedit

hotedit

在浏览器中编辑任意 HTML 文件——文本、样式、布局和图表——并将更改直接保存回文件。 专为 AI 助手编写的 HTML 报告而打造。

▶ 观看 95 秒配音导览（MP4，需开启声音） · 或亲自试试：npx hotedit demo

AI 助手会生成大量 HTML：报告、仪表板和摘要。它们看起来很棒，但要修正错别字、重命名图表标题或移动章节，就得翻找数千行生成的标记，或者再次请求 AI。hotedit 会在浏览器中打开页面，让你可以点击看到的内容并进行修改。它只会重写你更改过的字节，因此文件保持整洁、便于比较差异，并且仍由你掌控。

它不会改变 AI 生成的内容。 让 AI 按照一贯的方式编写报告，保持相同的质量、图表、设计和深度。hotedit 只是在事后为你提供编辑功能。它不会简化或重新生成任何内容，也不会向文件添加任何内容。

快速开始（30 秒）

你需要 Node.js 18+。然后：

npx hotedit report.html

浏览器会打开页面。点击 ✎ Edit（或按 ⌥E / Alt+E），再点击任意文本并输入。 更改会随时保存到 report.html 中，按 ⌘Z / Ctrl+Z 可撤销，点击右上角的 ✓ Done （始终位于同一位置）可保存所有未保存的更改并退出编辑模式。将鼠标悬停在任意按钮上即可查看快捷键：它们都是 ⌥ / Alt + 一个按键（⌥E 编辑、⌥A 询问 AI、⌥S 设置样式、 ⌥I 添加、⌥D 复制、⌥⌫ 删除、⌥↑/↓ 移动），因此普通按键不会触发任何操作，也不会影响输入。

只想看看效果？在临时副本中打开示例报告（包含图表、数学公式和图示）：

npx hotedit demo

不确定要打开哪个文件？不指定文件运行，然后从列表中点击一个：

npx hotedit          # lists the HTML files in this folder

要永久安装，以便直接输入 hotedit：

npm install -g hotedit
hotedit report.html

你可以做什么

	如何操作
编辑文本	点击并输入；光标会停在点击的位置。点击下一个块即可保存并继续；按 Enter 保存，按 Esc 取消，按 ⌘B / ⌘I 设置粗体和斜体。在列表中，按 Enter 可在项目末尾开始新项目。
添加内容	选择一个块并点击 ＋：段落、标题、列表或列表项、框、引用、表格、代码、分隔线、图片、图表、Mermaid 图表或自定义 HTML。选择添加到上方、下方或内部。
移动内容	拖动 ⠿ 即可将块移到任意位置：将列表项移入另一个列表，或将段落移入框中。也可以使用 ⋯ → 上移 / 下移（Alt+↑ / Alt+↓）。
设置样式	Aa：大小、粗细、颜色、对齐方式、字体、间距、背景、圆角和边框。
图表	点击 Plotly、Chart.js、Vega-Lite 或 Mermaid 图表。从方块中选择类型（条形图、折线图、面积图、点图、饼图、圆环图……），图表会立即重绘。样式中有标题、坐标轴、图例和数据系列的开关、菜单及颜色选择器；数据是可编辑表格，可添加行；代码是完整规范。所有内容都会实时预览；点击 应用保存。
图片和链接	🖼 可替换图片，🔗 可更改链接。
其他所有操作	⋯：复制、隐藏、删除，或对选中的块使用 编辑 HTML。名称标签（例如 段落 ▴）可选中其所在的块。
实时询问 AI	点击块上的 ✨（或点击 ✨ AI 操作整页）：输入要更改的内容，AI 就会实时就地编辑页面，你可以看到编辑过程，无需重新加载。先选择一个块，即可只更改该块。每项更改生效时都会发光显示；点击 撤销 AI 更改即可全部撤销。这是一场对话：在底部的输入框中提出后续问题，还可以查看作答的 AI 和模型。

页面自身脚本生成的内容（例如 KaTeX 数学公式、Mermaid 输出或用 JavaScript 构建的表格）不会以渲染结果的形式保存。hotedit 会打开它们的源代码。

与 AI Agent 配合使用

✨ 内置功能：提出要求，实时查看更改

点击 ✨，说出你想要的效果（“缩短这段内容”“把条形图改成橙色”“添加 March 这一行”），然后点击 开始。AI 会读取页面，在文件中进行小幅编辑，每项更改都会立即显示在浏览器中，无需重新加载。点击 ⚙ 连接你已有的 AI，只需连接一次：

• Claude Code：使用你的 Claude 套餐。安装 Claude Code 并运行一次 claude 登录。
• Codex：使用你的 ChatGPT 套餐。运行 npm install -g @openai/codex 并运行一次 codex 登录。
• Anthropic API key：粘贴密钥（仅保存在你的电脑上，路径为 ~/.htmledit/config.json），或设置 ANTHROPIC_API_KEY。除非你选择其他模型，否则会使用 claude-opus-5-5。
• 其他 Agent：任何带有 hotedit MCP 工具的 Agent 命令行工具，例如运行 gemini mcp add hotedit npx -y hotedit mcp 后，输入 gemini -y。请求会作为最后一个参数添加（或添加到你放置 {prompt} 的位置）。

只更改一项内容。 选中一个块后，面板会显示 仅更改：…，AI 只能编辑该块（对于图表，也可以编辑用于绘制图表的代码）。AI 尝试的其他任何更改都会被拒绝。点击另一个块即可指定目标，或点击 整页取消限制。所有更改都可以像普通操作一样撤销。

让你自己的 Agent 实时操作（MCP）

为任何支持 MCP 的编码 Agent（Claude Code、Codex、Cursor、Gemini CLI……）提供 hotedit 的工具，它就能在浏览器中打开报告，并让你实时查看编辑过程：

claude mcp add hotedit -- npx -y hotedit mcp
codex mcp add hotedit -- npx -y hotedit mcp

工具：open（在 hotedit 和浏览器中打开文件）、outline、read 和 edit（保存并实时显示）。Agent 也能找到你已在 hotedit 中打开的页面。

技能：让 Agent 的报告自动在 hotedit 中打开

安装一次即可。之后，Agent 编写的报告将便于编辑（文本位于 HTML 中，图表规范内嵌），而且它编写的每份 HTML 报告都会自动在浏览器中通过 hotedit 打开，随时可以编辑。之后 Agent 所做的修改也会实时显示在页面上。

作为 Claude Code 插件（一次性安装技能、自动打开钩子和 MCP 工具）：

/plugin marketplace add Thewhey-Brian/hotedit
/plugin install hotedit@hotedit

或者通过命令行安装：

npx hotedit skill install            # Claude Code, all projects (~/.claude)
npx hotedit skill install --project  # Claude Code, this project only (./.claude)
npx hotedit skill install --codex    # Codex (~/.codex)

这会添加技能和一个小型钩子，在 Agent 写入文件后运行。它会忽略非 HTML 文件、属于应用或网站的页面（位于 src/、public/、node_modules/ 等目录下，或包含模板标签的页面），以及已经打开的页面。页面会在后台提供服务，关闭一段时间后，服务会自动停止。你的其他设置和钩子都不会受到影响。

• 仅安装技能，不自动打开：添加 --no-auto。若要在某个会话中暂停自动打开：设置 HOTEDIT_AUTO=0。
• 卸载：npx hotedit skill uninstall（添加 --codex 或 --project 以匹配安装方式）。
• Codex 会询问你一次，确认是否信任新钩子。
• 其他 Agent：运行 npx hotedit skill print（将输出粘贴到 AGENTS.md 中）。它们会通过 npx -y hotedit open report.html --background 打开报告，并立即返回。

这项技能只会调整 HTML 的编写方式：文本放在标记中，图表规范内嵌。它会告诉 Agent，绝不要为了方便编辑而简化或省略任何内容。

工作原理

report.html ──parse (keeps source positions)──► served copy with element ids + editor overlay
     ▲                                                              │
     └──────── small byte patch ◄── map your edit back to source ◄──┘

• 绝不会“重写”你的文件。 编辑器和元素 ID 只存在于本地服务发送到浏览器的副本中。每次编辑都会以最小补丁的形式应用到原始字节上。其他位置的实体（如 ·）、引号样式、缩进和注释都会原样保留。
• 直接编辑图表源代码。 页面 <script> 中的图表规范字面量会逐值打补丁，并保留其自身的引号和键名样式。
• 默认安全。
  • 会在会话开始时创建备份（~/.htmledit/backups/）。
  • 撤销和重做涵盖所有更改。
  • 如果文件在磁盘上发生变化（例如 Agent 编辑了文件），页面会就地更新。
  • 对于非 UTF-8 文件，会拒绝处理，而不会损坏文件。
  • 服务仅监听 127.0.0.1，并会检查每个会话的令牌。

常见问题

它适用于任意 HTML 文件吗？ 是的，适用于任何本地 .html 文件：手写文件、AI 生成的文件，或从 Jupyter、plotly.py、R Markdown 或 Quarto 导出的文件。它经过了包含 KaTeX、Mermaid、内嵌 SVG 图表、由 JavaScript 构建的仪表板、base64 图像以及刻意采用特殊标记的页面测试。

它会弄乱我的文件吗？ 该工具旨在避免这种情况。每个测试页面都会打开，每个可编辑元素都会原样保存，而且文件必须保持逐字节一致。每次实际编辑都必须生成完全符合预期的差异。

它需要联网吗？ 不需要，hotedit 在本地运行。你的页面可以从 CDN 加载所需的库，许多 AI 报告都会加载 KaTeX 或 Plotly。

支持哪些浏览器？ 任何现代浏览器。自动化测试使用 Chromium 运行。

可以编辑脚本生成的内容吗？ 在脚本代码块上使用 ⋯ → 编辑 HTML，或点击 ✨ 向 AI 助手提出要求。

限制

• 一次只能处理一个 HTML 文件。不编辑外部 .css 和 .js 文件，样式会写入内嵌的 style 属性。
• 图表规范必须是内嵌 <script> 中的字面量（直接定义，或通过 const spec = {...} 定义）。运行时计算或从单独文件加载的规范会以源代码形式打开。
• 撤销历史仅在会话期间保留。备份会持续保留。

开发

git clone https://github.com/Thewhey-Brian/hotedit && cd hotedit
npm install
npx playwright install chromium   # browser for the end-to-end tests
npm test                          # unit, CLI and real-browser tests (~3 min)
node demo/audio.mjs               # tour narration, sound effects, music (ElevenLabs key)
node demo/record.js               # re-record the tour video + GIF (needs ffmpeg)

请参阅 CONTRIBUTING.md 和 docs/ARCHITECTURE.md。

参与贡献

hotedit 还很年轻，非常欢迎大家贡献。以下是一些不错的切入点：

• 在自己生成的 AI 报告上试用，并为无法编辑的内容提交问题 。示例文件最有帮助。
• 认领一个适合新手的问题。
• 在讨论区分享想法或展示你的作品。

**路线图：**支持更多图表库（ECharts、Observable Plot、Bokeh）、编辑外部 CSS、 VS Code 扩展，以及为更多 Agent（Gemini CLI、Cursor、OpenCode）编写指南。

相关工具

• html-visual-editor有不错的微调界面，但会下载新文件，也不支持编辑图表。
• Lavish有很棒的 Agent 反馈循环，但你无法自行编辑页面。
• GrapesJS、VvvebJs 和 Pinegrow 都是完整的页面构建器，会重新序列化文档。
• document.designMode会保存脚本渲染的所有内容。

许可证

MIT