HTML 实时预览
左侧编写 HTML，右侧沙箱 iframe 实时渲染，支持内联样式，脚本被禁用以保证安全。
HTML 代码
预览效果
沙箱隔离 · 脚本不执行
使用说明
📖 工具介绍
HTML 实时预览是一款面向前端初学者、邮件模板调试与静态页面草稿场景的免费在线渲染工具。很多时候我们只想快速看一段 HTML 片段在浏览器里长什么样：一段标题加配色、一个邮件中的列表样式、或者原型里的卡片布局，却又不想为此新建文件、打开编辑器再切换浏览器。本工具采用左右分栏布局，左侧是等宽字体代码编辑区，右侧是一块独立的沙箱预览窗。你每敲几个字，预览就会在短暂防抖后自动刷新，样式调整即时可见。预览通过带 sandbox 属性的 iframe 实现，脚本被彻底禁用，因此即使粘贴来自邮件或网页的可疑代码，也不会触发任何弹窗、跳转或数据窃取；内联 style 与常用标签全部正常生效，足以调试视觉效果。工具提供自动渲染开关，关闭后可以手动点渲染，适合调试较长代码时避免频繁刷新；一键复制代码、下载完整 .html 文件到本地打开也都齐备。全部处理在浏览器本地完成，代码不会上传。
✨ 功能特点
- 左右分栏：左侧写代码，右侧同步渲染，所见即所得
- 自动渲染：输入后约 0.4 秒防抖刷新，也可手动渲染
- 沙箱隔离：iframe 带 sandbox，脚本禁用，粘贴陌生代码也安全
- 样式生效：内联 style 正常解析，便于调试配色与布局
- 代码复用：一键复制代码或下载为完整 .html 文件
- 本地运行：代码全程不出浏览器，隐私安全
📝 使用方式
- 在左侧编辑区输入或粘贴 HTML 片段，无需 html/body 标签
- 保持“自动渲染”勾选，右侧预览会自动更新
- 若代码较长，可关闭自动渲染，改点“渲染”按钮手动刷新
- 调整标签与内联样式，直到视觉效果符合预期
- 复制代码或下载 .html 文件在正式项目中使用
⚠️ 注意事项
- 脚本禁用：预览 iframe 不带 allow-scripts，script 不会执行，属于有意的安全设计
- 外部资源：外链图片、字体与 CDN 样式需要联网，离线环境可能不显示
- 文档片段：直接粘贴片段即可，不需要包裹完整 html 文档结构
- 布局差异：预览窗尺寸有限，固定宽度布局请在真实浏览器中再确认
- 性能提示：超大 HTML 自动渲染可能略卡，建议关闭自动渲染手动刷新