AI 生成 HTML 的微调台 — 打开、可视化编辑、导出，零安装即用
一个轻量级的在线 HTML 可视化编辑工具。无需安装任何软件或浏览器插件，打开网页即可对 HTML 文件进行所见即所得的编辑。
特别适合对 AI 生成的 HTML 原型/报告进行快速微调：移动元素位置、修改文字内容、调整样式——然后导出。
English | 中文
- 📂 多种导入方式 — 拖入文件、点击选择文件、粘贴 HTML 代码
- 🖱️ 点选编辑 — 点击任何元素选中，拖拽移动、缩放调整
- ✏️ 文字编辑 — 双击文字直接编辑内容
- 🎨 样式面板 — 选中元素后修改字号、颜色、背景、边距等
- 📐 拖拽移动 — 按住拖拽改变元素位置（absolute/relative）
- ↩️ 撤销/重做 — 完整操作历史，支持 Ctrl+Z / Ctrl+Y
- 👁️ 预览模式 — 编辑模式 / 预览模式一键切换，预览时恢复原生交互
- 💾 导出 — 编辑完成后导出为 HTML 文件或 PDF
- 🎯 iframe 隔离 — 用户 HTML 在 iframe 内渲染，与编辑器 CSS/JS 完全隔离
直接打开 app/index.html 即可使用（纯静态文件，无需后端）。
git clone https://github.com/zlovezhu/HTML-Workbench.git
cd HTML-Workbench
# 直接用浏览器打开
open app/index.html
# 或用任意静态服务器
npx serve app- 点击 "导入 HTML" — 弹出导入窗口，支持拖入文件或粘贴代码
- 点击 元素选中 → 出现高亮边框和右侧样式面板
- 拖拽 移动元素位置
- 双击 文字进入编辑模式
- 编辑完成后点击 "导出 HTML" 保存
├── app/
│ ├── index.html # 应用入口
│ ├── app.js # 核心逻辑（iframe 管理、编辑器、事件绑定）
│ └── style.css # 应用样式
├── content/ # 编辑器模块（选择器、工具栏、拖拽、表格等）
├── styles/ # 注入 iframe 的编辑器 CSS
├── utils/ # 工具函数
├── SPEC.md # 产品规格文档
└── README.md
| 设计点 | 方案 |
|---|---|
| 编辑区隔离 | <iframe> + 同源 contentDocument 直接操作 |
| 样式不冲突 | 用户 HTML 完全在 iframe 内，编辑器 UI 在主页面 |
| 选中高亮 | 覆盖层 overlay div + 动态计算位置 |
| 历史栈 | innerHTML 快照，简单够用 |
| 零依赖 | 原生 JavaScript，无框架，单文件即运行 |
本项目 fork 自 html-visual-editor（Chrome Extension），核心改造为：
- Chrome Extension → 独立 Web App（浏览器打开即用）
chrome.runtime消息通信 → 直接函数调用chrome.storage→localStorage- 扩展弹窗/侧边栏 → 页面内 UI 组件
MIT License
A micro-tuning workbench for AI-generated HTML — open, edit visually, export. Zero installation.
A lightweight online WYSIWYG HTML editor. No installation needed — just open in a browser and start editing HTML files visually.
Perfect for quick tweaks on AI-generated HTML prototypes/reports: move elements, edit text, adjust styles — then export.
Features:
- Multiple import methods: drag & drop, file picker, paste HTML code
- Click to select elements, drag to move, resize with handles
- Double-click text to edit inline
- Style panel for fonts, colors, backgrounds, spacing
- Undo/Redo with full history (Ctrl+Z / Ctrl+Y)
- Edit/Preview mode toggle
- Export to HTML or PDF
- iframe isolation — user HTML is fully sandboxed
Quick Start:
git clone https://github.com/zlovezhu/HTML-Workbench.git
open HTML-Workbench/app/index.html