可以用来做什么?

预览 AI 网页

把 AI 输出的 HTML 粘进来立即看效果

调邮件模板

预览 HTML 邮件在不同设备的排版

排查样式

隔离片段预览,快速定位 CSS 问题

测响应式

切换视口验证移动端布局自适应

如何使用?

1

粘贴 HTML

粘贴代码或上传 .html 文件

2

实时预览

右侧即时渲染,切换视口检查

相关工具推荐

HTML 拖拽编辑

上传任意 HTML 即可在线编辑:点选元素改文字、换字体颜色、替换配图(base64 内嵌)、拖拽调整顺序、撤销重做、查找替换,全程不看代码。专为非技术人员打磨 AI 生成的 HTML 而设计。100% 浏览器本地处理,不上传。

HTML 分享

上传 HTML 即可生成可分享链接,对方任何浏览器打开即看,无需安装。小文件直接压缩进链接,较大文件经你同意后存入第三方临时存储。链接 天有效。适合分享 AI 生成的网页、报告和原型。

Markdown 编辑器

不知道 .md 文件怎么打开?直接拖入浏览器即可查看和编辑。在线 Markdown 编辑器,左侧编辑右侧实时预览,支持代码高亮、图片插入、暗色模式。草稿自动保存本地,隐私 100% 不上传。

MD 分享链接

粘贴 Markdown 文档,生成一条可分享的在线预览链接,对方无需安装任何工具即可查看完整排版效果。链接 7 天后自动失效,数据不上传服务器。

HTML 转 MD

把任意 HTML — 网页源码、微信公众号文章、博客复制、富文本编辑器内容 — 粘贴进来,转成干净的 GFM Markdown。自动清理内联样式、规整表格、代码块、引用块和图片链接。100% 浏览器本地,没有任何上传。

JSON 格式化

在线 JSON 格式化,粘贴即刻美化,语法高亮一目了然。支持错误定位、压缩、转义、展开/折叠树节点、路径复制。调试 API 响应、验证配置文件、查看日志必备,永久免费,数据本地处理。

文本对比

免费在线文本与代码对比工具,逐行比较两段内容的差异,精准高亮新增、删除和行内修改。无需 Git,粘贴即用,支持代码片段、配置文件、文章等。

查看更多

说出你的需求,AI 帮你实现

这是一个由用户共同打造的网站 —— 你提的需求,将会被 AI 转化成真正的功能。看看大家都在期待什么,投票、关注、一起推动它实现。

登录后可以提交需求、点赞和评论

常见问题

本工具用于「查看」——粘贴 HTML 立即看到渲染效果并截图导出;如果你想直接点选页面改文字、换图、调整排版,请用同分类下的可视化 HTML 编辑器。

在线 HTML 实时预览:AI 时代查看 HTML 的最快方式

AI 生成的 HTML 越来越多,但传统查看方式要先存成 .html 文件再用浏览器打开,步骤繁琐。MeTool HTML 实时预览让这一过程归零:粘贴或上传,右侧立即渲染,支持手机 / 平板 / 桌面三档视口和一键截图导出,全程在本地浏览器完成,HTML 不上传。

如果你不只是想看,还想直接改文字、换配图、调整排版,请使用同分类下的可视化 HTML 编辑器;想把成品发给别人看,则用 HTML 分享链接

什么场景下会用到 HTML 实时预览?

验证 AI 生成的代码

用 ChatGPT、Claude、DeepSeek 等生成一段落地页或组件代码后,最快的验证方式不是复制到本地项目里跑起来,而是直接粘贴进预览器,几秒内看到真实渲染效果,发现问题立刻回去改 Prompt 重新生成。

检查响应式布局

很多 AI 生成的页面在手机端会出现文字溢出、按钮错位等问题。MeTool 提供手机、平板、桌面三档视口一键切换,不需要打开浏览器开发者工具就能快速确认页面在不同屏幕下是否正常。

邮件或聊天工具里贴来的代码片段

同事在飞书、Slack 里发来一段 HTML 代码,想看效果又不想在本地新建文件,粘贴到预览器立即查看,比"新建 txt 文件改后缀名"快得多。

与直接双击打开 .html 文件相比,有什么优势?

双击本地 HTML 文件在浏览器里打开是最原始的方式,但存在几个不便:需要先把内容保存成文件;某些浏览器出于安全策略会限制 file:// 协议下的脚本执行和跨域请求;无法方便地在手机、平板视口间切换查看效果。MeTool 的预览器直接在网页环境里渲染,不受这些限制,且可以一键截图保存效果图,比手动截屏更清晰完整。

常见问题

Q:粘贴的 HTML 内容会上传到服务器吗? A:不会。渲染完全在你的浏览器本地完成,输入的代码不会经过网络传输到任何服务器,关闭页面后内容也不会被保留。

Q:支持 HTML 中引用的外部 CSS 和 JS 吗? A:支持通过 <link><script src="https://..."> 引用的外部资源,前提是这些资源本身允许跨域加载。内联的 <style><script> 完全没有限制。

Q:可以预览包含表单交互或简单 JavaScript 逻辑的页面吗? A:可以。预览器在隔离的 iframe 环境中渲染页面,支持点击、输入等交互和大部分 JavaScript 逻辑,适合验证带有基础交互效果的 AI 生成页面。

Q:截图导出的图片是整页还是仅可见区域? A:默认导出当前视口内可见的渲染效果,方便快速分享;如果需要保存完整页面代码用于后续编辑,建议使用 HTML 分享链接 或下载 .html 源文件。

Q:切换手机 / 平板 / 桌面视口时会重新渲染吗? A:会。每次切换视口,预览区域会按目标设备的屏幕宽度重新计算布局并渲染,和真实设备上打开网页的效果基本一致,可以直接用来判断响应式断点是否设置合理。