稳定渲染器无 AI本地预览调试导出

HTML 沙箱预览

HTML 沙箱预览为开发者提供一个快速的浏览器预览闭环，适合检查 AI 生成片段、UI 片段、配置示例和文档素材。

示例

HTML 源码

沙箱预览就绪

预览结果会显示在这里。

下一步可以继续

把当前预览结果带到相关工具里继续转换、排查或导出。

CSS 渐变预览

预览 CSS linear、radial、conic 和 repeating 渐变，并提取色标。

打开

Base64 图片预览

预览 Base64 图片字符串和 data URL，并分析 MIME 类型和体积。

打开

CSS 阴影预览

在真实卡片上预览 CSS box-shadow，并比较多层阴影效果。

打开

使用方法

1先粘贴一个小而聚焦的片段，确认预览结构后再替换成完整源码。
2先加载示例，了解分隔符或源码格式。
3在放进 README、Issue 或正式文档前，检查警告、视觉输出和提取结构。
4把源码和截图放在一起，方便团队后续复现。

常见场景

发布前检查 AI 生成的 HTML、CSS、JSON 和 Base64 素材。为技术文档、发布说明和支持回复生成轻量截图。不用在多个零散工具之间切换，就能调试可视化片段。

常见问题

源码会发送到后端或 AI 服务吗？

不会。这批 P1 预览工具在浏览器本地完成支持路径的解析和预览。

这个预览能替代生产运行时吗？

不能。它面向常见预览和调试场景，最终仍应以浏览器、运行时或生产解析器为准。

HTML 沙箱预览是 DiagramPreview 脚本和视觉源码预览工具集的一部分。

它帮助你把 AI 生成或项目中复制出的文本，快速变成团队真正能审阅的视觉输出。

适合在片段进入文档、工单、博客或生产示例之前做一次快速校验。

Demo：安全预览 HTML 组件

HTML sandbox 可在不运行脚本的情况下检查布局、文案和 email 片段。

先用一个小而完整的示例确认结构，再粘贴完整生产内容。
检查预览是否清楚展示 ownership、结构、标签和风险字段。
保留源码和导出结果，方便后续 reviewer 复现。

<section class="notice"><h2>Scheduled maintenance</h2><p>API writes pause for 10 minutes.</p></section>