一个适合本地发布和分享的单文件 HTML 可视化编辑工具。它面向 HTML PPT、AI 生成页面、活动页和轻量作品页的后期微调：上传 HTML，在画布中点击元素，修改文本和样式，再导出干净 HTML。
- 上传或载入单个
.html文件 - 在安全 iframe 中实时预览 HTML
- 点击画布元素并自动定位源码
- 编辑文本、
src、href、id、class和常见 inline style - 支持斜体、下划线、删除线、对齐、行高、字间距和字体微调
- 支持画布悬浮快捷工具条，可就地加粗、斜体、下划线、对齐、复制样式、粘贴样式和清除样式
- 支持本地草稿自动保存与刷新后恢复
- 支持撤销、重做、刷新渲染和干净导出
- 支持 16:9、4:3、自适应画布，以及 Fit、75%、100%、125% 缩放
- 源码区可折叠，默认突出画布和属性编辑
npm start启动后打开：
http://localhost:5178
发布前检查：
npm run check- 点击「上传 HTML」导入自己的页面，或点击「示例」快速体验。
- 在中间画布中点击标题、段落、图片、按钮、卡片等元素。
- 在右侧属性面板修改内容、颜色、字号、间距、尺寸、圆角、阴影等。
- 需要精修时展开左侧源码区，选中元素会自动定位源码片段。
- 点击「导出 HTML」保存最终文件。
这个项目不依赖构建工具和外部 npm 包，适合直接部署为静态工具，也可以用内置 Node 服务运行。server/index.js 只负责静态文件服务和 /health 健康检查。
腾讯云轻量服务器 + 宝塔面板部署步骤见：
docs/deploy-baota.md
HTML Studio 支持两种导入方式：
上传 HTML：导入单个.html/.htm文件，适合已经是单文件的页面。上传文件夹：导入包含入口 HTML、CSS、JS、图片等资源的本地目录，适合普通静态网页项目。
上传文件夹时，编辑器会优先选择最浅层的 index.html 作为入口；如果没有 index.html，则使用第一个 .html/.htm 文件。左侧源码会保留入口 HTML 的原始路径写法，例如：
<link rel="stylesheet" href="./styles.css" />
<div class="image-slot" data-image="./public/images/avatar.png"></div>预览时，编辑器会临时把本地资源映射成浏览器可显示的资源地址；不会把左侧源码立刻改成一大段 base64。这样源码保持可读，项目结构也能继续保留。
选中带图片资源的元素后，可以通过两种方式替换图片：
- 点击浮动快捷工具栏里的“图”按钮，选择新的图片文件。
- 直接把图片拖到预览中的对应图片区域。
替换图片时，编辑器会把新图片保存到原图片所在目录，并使用新图片自己的文件名。原图片不会删除。例如原来是：
<div data-image="./public/images/avatar.png"></div>上传 new-avatar.webp 后会变成：
<div data-image="./public/images/new-avatar.webp"></div>public/images/avatar.png 仍会保留在项目资源里。导出 ZIP 时，新旧图片都会包含在压缩包中。
选中图片资源元素后，还可以在预览中直接拖动图片焦点。编辑器不会裁剪或压缩原图，而是写入显示样式：
object-fit: cover;
object-position: 42% 62%;或：
background-size: cover;
background-position: 42% 62%;这适用于大图替换后的展示微调：图片文件保持完整，页面只改变显示区域里的裁剪焦点。
编辑完成后可以选择两种导出：
导出 HTML：生成单文件 HTML，当前引用到的本地资源会在导出时内联，适合直接分享或单文件发布。导出 ZIP：导出项目压缩包，保留入口 HTML、CSS、JS、图片等目录结构，适合继续作为静态网站项目维护。
对于文件夹项目，ZIP 导出会使用当前左侧源码覆盖入口 HTML，并保留项目资源清单中的文件。通过图片替换新增的图片也会进入 ZIP。