(开源)OpenHTML
约 814 字大约 3 分钟
2026-09-10
OpenHTML
实用的开源HTML在线编辑工具
OpenHtml
零依赖、双击即用的在线 HTML 编辑器与实时预览器（迷你 CodePen）。
无需安装任何东西——克隆或下载本项目，双击 index.html 即可在浏览器中使用。 没有 Node.js、没有构建步骤、没有 CDN 依赖，纯 HTML / CSS / JavaScript。
功能特性
- 三栏代码编辑：HTML / CSS / JavaScript 三个编辑区，内置手写语法高亮（零依赖 tokenizer）
- 实时预览：输入自动防抖刷新，所见即所得
- 内置控制台：捕获预览页面里的
console.log / warn / error、运行时异常与 Promise 拒绝 - 模板库：8 套内置模板（欢迎页、待办事项、粒子画布、模拟时钟、图片画廊、打字机、标签页、空白页）
- 一键导出：把三个编辑区合并导出为单个独立 HTML 文件
- 打开本地文件：解析本地 HTML 文件，自动拆分其中的
<style>/<script>到对应编辑区 - HTML 格式化：零依赖的 HTML 美化器（保留注释与 script/style 原文）
- 自动保存：编辑内容、主题、布局自动存入 localStorage，刷新不丢失
- 深色 / 浅色主题、可拖拽布局、折叠面板、状态栏
快速开始
# 方式一：直接使用（推荐）
双击 index.html
# 方式二：通过本地服务器（可选）
npx http-server -p 8080 # 然后访问 http://localhost:8080快捷键
| 快捷键 | 功能 |
|---|---|
Ctrl + Enter / F5 | 立即运行预览 |
Ctrl + S | 导出为单个 HTML 文件 |
Ctrl + O | 打开本地 HTML 文件 |
Ctrl + Shift + F | 格式化 HTML |
Ctrl + 1 / 2 / 3 | 聚焦 HTML / CSS / JS 编辑区 |
Tab / Shift + Tab | 缩进 / 取消缩进 |
使用约定
- HTML 编辑区：填写
<body>正文内容即可（也可以写完整文档）。预览时 OpenHtml 会自动包裹成完整文档，并把 CSS 注入<style>、JS 注入<script>。 - 预览沙箱：预览 iframe 使用
sandbox限制（不授予allow-same-origin），因此预览页无法访问父页面。若你的代码需要完整权限（如localStorage、fetch），点击工具栏「新窗口」以完整权限打开预览。 - 相对资源：预览页没有文件系统上下文，相对路径的图片等资源不会加载，请使用绝对 URL 或 data URL。
- 控制台：预览页所有
console输出、未捕获异常、Promise 拒绝都会显示在下方控制台。
项目结构
OpenHtml/
├── index.html # 入口页面
├── css/
│ └── style.css # 界面样式（深色 / 浅色双主题）
├── js/
│ ├── editor.js # 零依赖代码编辑器（语法高亮 + 叠加式编辑）
│ ├── formatter.js # HTML 格式化器
│ ├── templates.js # 内置模板库
│ └── app.js # 主应用逻辑（预览、控制台、导入导出、持久化）
├── tests/
│ └── smoke.js # 冒烟测试（node tests/smoke.js）
├── README.md
└── LICENSE运行测试
node tests/smoke.js
# 或
npm test兼容性
- 现代浏览器（Chrome / Edge / Firefox / Safari 最新两个大版本）
- 推荐桌面端使用；窄屏下自动切换为上下布局
开发与贡献
本项目刻意保持零依赖，欢迎以任何形式参与：
- Fork 本仓库
- 新增模板：在
js/templates.js中追加条目 - 改进高亮 / 格式化 / 界面
- 提交 Pull Request