像做 PPT 一样改网页 —— 点选、拖拽、改字、换肤、放映、导出，一个文件全搞定。
从模板新建 → 点选拖拽 → 双击改字 → 属性面板调样式 → 一键换肤 → 全屏放映 → 导出成品
想改个现成网页的文案、颜色、布局，却要打开编辑器翻几百行代码？WebCraft 把网页变成可以像 PPT 一样直接操作的画布：导入任意 HTML 页面，点谁改谁，拖哪是哪，改完一键导出。
- 🧳 一个文件，说走就走 —— 全部功能装在一个 120KB 的
index.html里，零依赖、零构建、无需联网 - 🖱️ 零学习成本 —— 点选、拖拽、双击改字，会做 PPT 就会用
- 🔒 数据不出浏览器 —— 没有后端、没有账号，所有内容保存在本地
| 能力 | 说明 |
|---|---|
| 🖱️ 可视化编辑 | 点选元素、悬停高亮、拖拽移动（带对齐吸附）、8 向缩放手柄、旋转、双击行内改字、右键菜单 |
| 🧩 属性面板 | 字体字号字重行高、文字/背景颜色、渐变填充、边框圆角、阴影、透明度、进场动画 |
| 📑 多页面管理 | PPT 式页面缩略图，新增/复制/重命名/拖拽排序，每页独立背景与切换动画 |
| 🎬 全屏放映 | 一键全屏、方向键/空格翻页、页面切换动画、页码指示 |
| 🎭 一键换肤 | 6 套主题配色，一键覆盖背景/标题/正文/链接/按钮 |
| 📋 模板库 | 内置 6 套模板：使用引导、产品落地页、产品介绍、数据看板、作品相册、个人简历 |
| 💾 导入导出 | 导入 HTML/项目 JSON；导出纯净 HTML、可翻页放映的单文件、项目 JSON |
| ⏪ 撤销重做 | 60 步快照撤销，localStorage 自动保存，关页面不丢 |
方式一 · 在线使用（推荐） 直接打开 jonepoon.github.io/html-visual-editor，三步上手：
- 点画布里任意元素（或「新建 → 从模板新建」）
- 拖拽移动 / 拖手柄缩放 / 双击改字 / 右侧面板调样式
- 顶部「导出」拿走成品
方式二 · 下载单文件离线用
点击仓库里的
index.html→ 右上角下载按钮（或Raw页面右键另存为）→ 双击本地打开即可，无需安装任何东西。
方式三 · 克隆仓库
git clone https://github.com/JonePoon/html-visual-editor.git
# 直接用浏览器打开 index.html📖 更多细节（界面导览、常见任务、导入导出说明、FAQ）见 完整使用指南。
| 按键 | 功能 | 按键 | 功能 |
|---|---|---|---|
Ctrl+Z / Ctrl+Y |
撤销 / 重做 | Ctrl+S |
保存项目 |
Ctrl+D |
复制元素 | Ctrl+C / Ctrl+V |
复制 / 粘贴元素 |
Delete |
删除元素 | 方向键 | 微移 1px（Shift 加速 10px） |
P |
放映 | Esc |
取消选择 / 退出 |
Ctrl+滚轮 |
缩放画布 | 双击 | 行内编辑文字 |
- 单文件架构：HTML + CSS + JS 全在一个
index.html，无构建、无请求、离线可用 - iframe 沙箱画布：被编辑页面渲染在同源 iframe 中与编辑器 UI 完全样式隔离，注入轻量运行时负责命中测试、覆盖层、拖拽引擎与行内编辑
- transform 位移：拖拽通过
translate()实现，文档流元素也能自由摆放且不破坏原布局 - 快照式撤销：MutationObserver + 序列化快照 + 轮询兜底，任何改动都可撤销
- 自包含导出：图片自动 base64 内嵌，放映版 HTML 自带播放器，发给谁都能直接放映
- 导入页面中以相对路径引用的本地图片无法在编辑器内显示（浏览器安全限制），绝对 URL 与 data URI 不受影响
- 「一键换肤」对使用
!important或内联样式的元素可能无法覆盖 - localStorage 容量约 5MB，超大图片请压缩后导入（导出 JSON 不受影响）
欢迎 Issue 与 PR！小而美的改进尤其受欢迎：更多模板、更多主题、键盘可达性、多语言……
如果这个工具帮到了你，欢迎点个 ⭐ Star 让更多人看到：
MIT © 2026 JonePoon