LiveHTML

Edit a webpage in place, like a slide — then export the result as a reusable HTML file.

LiveHTML 是一个在真实网页上工作的可视化编辑器。它不会把页面搬进另一个画布：文字、链接、图片和布局都直接在当前页面中编辑，工具界面只以隔离的浮层出现。

官网 · English website · Privacy Policy

主要能力

• 单击选择元素，双击直接编辑文字；
• 编辑链接文字、目标地址和打开方式；
• 直接拖动深层节点或链接内文字，不会误触链接跳转；
• 移动、旋转和四角缩放，支持嵌套变换、固定对角锚点以及 Grid/Bento/Flex 布局重排；
• 按住 Shift 以 15° 吸附旋转，或用方向键精确调整；
• 设置字体、字号、字重、行高、字距、段落间距、缩进、对齐和文字预设；
• 切换段落语义、项目/编号列表，并对选中文字加粗、斜体、下划线或删除线；
• 切换文本框自动高度或固定高度，修改颜色、圆角、尺寸和图片地址；
• 选择最大 20 MB 的本地图片，转换为内嵌 Data URL；
• 插入标题、段落、按钮、图片、卡片和内容区；
• 复制、删除、调整图层以及完整撤销/重做；
• 通过系统保存窗口选择文件名和位置，导出可分享 HTML。

导出的文件

LiveHTML 导出的不是截图，而是当前编辑结果对应的 HTML：

• 固化当前 DOM、文字、样式和几何修改；
• 移除编辑工具、选中状态和临时属性；
• 将相对资源地址转换为基于原页面的可解析地址；
• 保留内嵌图片等自包含资源；
• 移除可能在重新打开时覆盖编辑结果的原页面可执行脚本；
• 内嵌默认关闭的 LiveHTML 运行时。

接收者打开文件时会先看到编辑后的成品；按 Ctrl+Shift+E 可以再次进入编辑模式。外部图片、字体和样式仍可能依赖网络，只有已经内嵌的资源会随 HTML 文件一起传递。

快速开始

要求 Node.js >=22.13.0。

npm install
npm run dev

默认开发地址为 http://localhost:3000。

作为 Chrome 扩展使用

先生成扩展运行时：

npm run extension:build

然后打开 chrome://extensions，启用开发者模式，点击“加载已解压的扩展程序”，选择项目中的 extension/ 目录。

• 点击扩展图标：在当前标签页启动或关闭 LiveHTML；
• Alt+Shift+E：触发扩展；
• Ctrl+Shift+E：在页面内切换编辑/预览状态。

扩展只申请 activeTab 和 scripting。它不申请常驻的网站访问权限，不包含账号、广告、分析追踪或远程托管代码。

为静态 HTML 嵌入编辑器

默认保留原文件，并生成 page.editable.html：

npm run inject -- /path/to/page.html

原地更新文件：

npm run inject -- --in-place /path/to/page.html

让导出页面默认以成品模式打开：

npm run inject -- --view /path/to/page.html

隐私

所有编辑都在用户设备上的当前标签页中完成。LiveHTML 不会把网页内容、编辑结果、浏览活动或本地图片上传到开发者服务器。本地图片只在用户主动选择后读取，并以内嵌 Data URL 的形式写入当前页面和导出的 HTML。

完整说明见隐私政策。

适用边界

LiveHTML 对普通 HTML/CSS 页面提供通用的可视化编辑能力，但浏览器安全模型和页面框架会带来边界：

• Canvas 内部绘制对象不是独立 DOM 元素；
• 跨域 iframe 和封闭 Shadow DOM 无法由外部脚本完整访问；
• chrome:// 等浏览器受保护页面不允许扩展注入；
• React/Vue 等框架可能继续重绘并覆盖当前 DOM 修改；
• 导出的静态 HTML 不等同于修改原项目源码、数据库或业务状态。

动态页面仍可以编辑当前渲染结果并导出静态 HTML，但应在目标页面上验证重新打开后的效果。

开发与测试

npm test
npm run lint
npm run extension:release

• npm test：构建项目并运行 Node 回归测试；
• public/browser-suite.html：浏览器交互、极端输入、序列化和几何测试；
• npm run extension:release：生成扩展 ZIP，并审计权限、包结构、素材和确定性时间戳。

项目结构

app/                  中英文官网
extension/            Chrome 扩展
public/editor-runtime.js
                      独立网页编辑运行时
tools/                注入、构建、打包和审计工具
tests/                Node 回归测试与测试矩阵
store-assets/         Chrome Web Store 素材

问题与支持：museumapp321@gmail.com