免登录 · 打开即用 · 轻量可二开
一款 Figma 风格界面 的 WYSIWYG HTML 编辑器。专为 AI 生成的 HTML 提供丝滑的可视化二次编辑体验——像修改设计稿一样直接操作页面元素，所见即所得。
单文件纯前端实现，无框架、无构建、无后端，双击打开即用。
- 🔓 完全免登录 — 纯浏览器端运行，数据不出本地，隐私安全
- ⚡ 打开即用 — 一个 HTML 文件，双击就能编辑，零配置
- 🪶 极致轻量 — 单文件 ~1800 行，无任何框架依赖，轻松二开
- 🎯 Figma 即视感 — 毛玻璃工具栏、暖色调纸质感画布、点阵网格背景、流畅动画
- 🧩 功能完善 — 选择、缩放、移动、编辑、导出，覆盖日常编辑全流程
- 拖入即编辑 — 拖放 HTML 文件到画布，自动解析渲染
- 可视化选择 — 点击选中元素，靛蓝色轮廓 + 8 个四向拖拽手柄
- 内联文字编辑 — 双击文字原地编辑，支持光标精准定位
- 四向独立缩放 — L / R / U / D 四个方向独立控制，左右上下各有专属锚点
- 拖拽移动 — 按住已选中元素拖拽即可移动位置，带阴影反馈
- 属性面板 — 右侧 360px 面板，支持拖拽式参数调节（Photoshop 风格）
- 撤销 / 重做 — 完整历史记录，面板和工具栏双入口
- 多格式导出 — HTML 源码 / 全页 PNG / 全页 JPEG
- 添加元素 — 一键添加标题、文本、图片、按钮、分隔线、容器
- 快捷键 —
Ctrl+Z撤销 ·Ctrl+Y重做 ·Ctrl+S导出 ·Delete删除 ·Esc取消
# 方式一：直接打开
双击 index.html
# 方式二：本地服务
python -m http.server 8080
# 浏览器打开 http://localhost:8080- 拖入一个 HTML 文件，或点击编辑器内按钮加载
- 点击元素 → 选中 → 拖拽手柄调整尺寸
- 按住选中元素拖拽 → 移动位置
- 双击文字 → 原地编辑
- 右侧面板 → 精细调校样式
- 导出 → 下载 HTML / PNG / JPEG
| 项目 | 说明 |
|---|---|
| 实现方式 | 纯原生 HTML + CSS + JavaScript |
| 编辑画布 | iframe srcdoc 隔离渲染 |
| 图片导出 | html2canvas（CDN 引入） |
| 字体 | Inter（Google Fonts CDN） |
| 文件大小 | ~90 KB（未压缩） |
| 依赖 | 零框架依赖，单文件自包含 |
项目结构清晰，核心逻辑集中在 <script> 标签内，按功能模块划分为：
- State — 全局状态变量
- Iframe Helpers — 画布读写接口
- Handles — 8 个缩放手柄的创建与定位
- Selection — 元素选中 / 取消选中
- Resize — 四向拖拽缩放（
onDragMove/onDragUp） - Move — 拖拽移动元素
- Props Panel — 右侧属性面板动态渲染与绑定
- Undo / Redo — iframe 快照式历史记录
- Import / Export — HTML 导入解析与多格式导出
可直接修改 index.html，保存即生效。
三社 — QQ：1628537085
MIT License — 自由使用、修改、分发。