HTML 实时渲染
在沙盒 iframe 中安全预览 HTML 代码效果，支持多设备尺寸模拟。
HTML 代码
在此粘贴 HTML 代码...
预览
全宽
快速体验
选择一个示例快速加载，查看渲染效果。
关于 HTML 实时渲染
HTML 实时渲染器让你可以在浏览器中即时编写和预览 HTML 代码。所有渲染均在沙盒 iframe 中运行，预览脚本无法访问父页面与本地数据。
支持手机、平板、桌面三种预览尺寸，还有自动渲染模式——输入代码即刻看到效果，无需手动点击按钮。
如何使用
- 在左侧输入框中粘贴或编写 HTML 代码
- 选择设备尺寸（手机/平板/桌面）以适配不同屏幕
- 查看右侧实时预览；开启自动渲染后无需手动点击按钮
常见错误与最佳实践
- 缺少 viewport meta 标签：移动端预览时务必添加 <meta name="viewport" content="width=device-width, initial-scale=1.0">，否则手机/平板模式下页面会以桌面宽度缩放显示，预览结果不准确。
- 外部资源加载失败：sandbox iframe 的安全策略会阻止加载外部 CDN 脚本和样式表。如需使用外部依赖，请以内联 <style> 和 <script> 方式写入 HTML。
- 字符编码未声明：始终在 <head> 中包含 <meta charset="UTF-8">，否则中文等非 ASCII 字符可能出现乱码。
- JavaScript 弹窗被拦截：sandbox 属性会禁用 alert()、confirm()、prompt() 等弹窗。调试时请使用 console.log 或将结果直接渲染到 DOM。
典型生产场景
抓取动态渲染页面后，把目标 HTML 片段贴进沙箱，立即验证 XPath / CSS Selector 是否还能命中目标节点。比反复在原站点开 DevTools 刷新快得多，也不会因目标站的 IP 风控、CAPTCHA、A/B 实验而干扰判断。
邮件客户端（Outlook、Gmail、QQ 邮箱）对 inline style + table 布局有大量历史包袱。沙箱里改 HTML 立即看到效果，省掉「改一次 → 发测试邮件 → 等收到 → 截图对比」的死循环，迭代速度至少快 10 倍。
TinyMCE / Quill / wangEditor 等富文本编辑器产出的 HTML 常带特殊 class、内联样式、editor 私有节点。把产出贴进独立沙箱渲染，能避免和编辑器自身样式互相污染，准确还原终端用户在 C 端看到的样子。
拿到外部投放代码、用户提交的 UGC、Markdown 转 HTML 的产出，要先排查 XSS payload、隐藏跟踪脚本、自动跳转。sandbox 把脚本执行限制在 iframe 内、不接触父页 cookie，可以肉眼 + 源码双重审查后再放到生产页面。
想验证一个 hero 段、卡片网格、表单的视觉效果，不必启动 Vite/dev server。直接写 HTML + 内联 CSS 贴进沙箱，连切移动端/平板/桌面尺寸都不用改代码，几秒就能 Review。
深度专题：iframe sandbox 与渲染隔离
sandbox 属性是 HtmlRender 的核心。空 sandbox=""（无 value）是最严格——禁止 JS、禁止表单提交、禁止同源访问；加 allow-scripts 才能执行 JS；加 allow-same-origin 让 iframe 与父页共享源，可访问 localStorage 等。当前工具用 sandbox="allow-scripts allow-same-origin"，是「调试友好但仍隔离父页 DOM」的折中。
allow-scripts + allow-same-origin 同开是常见取舍：脚本能跑、又能读自己的 localStorage。但要警惕：如果 iframe 的 HTML 来源不可信，攻击者可以在 iframe 内通过 same-origin 上下文调用 parent.document 反向控制父页。生产环境渲染 UGC 时必须去掉 allow-same-origin，仅保留 allow-scripts，强制 iframe 跑在 null origin 下。
srcdoc vs src：HtmlRender 用 srcdoc 而不是 src="data:text/html,..."。srcdoc 是浏览器原生属性，不受 URL 长度限制（data: URI 在长 HTML 时容易撞上 Chrome 的 2MB 上限）、不需要 base64 编码、修改 srcdoc 字符串会自动重渲染 iframe，不必显式 reload。代价是极老浏览器（IE10 及更早）不支持，IE11+ 没问题。
外部资源加载策略：sandbox 本身不阻止外部 fetch，但 CSP 与浏览器对 cross-origin 字体/CORS 的检查会拦下相当一部分请求。生产推荐内联所有依赖——CSS 直接写 <style>、字体用 data: URI、图标用 inline SVG。如果必须用 CDN，HTML 里显式 <meta http-equiv="Content-Security-Policy"> 放行需要的源，避免「能用但偶发失败」的诡异 bug。