编写 HTML、CSS 和 JavaScript，并在键入时查看实时沙盒预览。响应式设备宽度、Monaco 语法突出显示、Prettier 格式、本地自动保存以及 HTML、打印或 PDF 导出。免费，无需注册。
这款具有实时预览功能的在线 HTML 编辑器会在您停止键入后约 300 毫秒在代码旁边呈现您的 HTML、CSS 和 JavaScript。检查桌面、平板电脑 (768 像素) 和移动设备 (375 像素) 宽度的布局，使用 Prettier 整理标记，然后导出为 .html 或 PDF。您的代码仅自动保存在此浏览器中，并且永远不会上传。
这个实时 HTML 编辑器会在您键入时在代码旁边呈现您的标记，因此您可以制作布局原型、测试片段并通过实验来学习，而无需设置项目。它使用 Monaco（VS Code 背后的编辑器引擎）进行语法突出显示和自动完成，并且完全在浏览器中运行，无需注册。
输入完整文档或片段。将 CSS 放入 <style> 标签中，将 JavaScript 放入 <script> 标签中，或者通过 https 从 CDN 加载它们。
停止输入后，预览窗格会重新呈现约 300 毫秒。使用拆分、代码或预览视图来安排工作区。
在桌面（全宽）、平板电脑（768 像素）和移动设备（375 像素）之间切换，查看布局如何重排。
单击“美化”以使用 Prettier 重新缩进文档（2 个空格缩进，100 个字符行）。
将确切的代码下载为 .html，使用“打印”→“另存为 PDF”以获取可选择的多页文本，或单击“PDF”以快速捕获图像。
将代码粘贴到编辑器中，预览会自动更新，无需按“运行”按钮。您可以粘贴带有 <!DOCTYPE html>、<head> 和 <body> 的完整文档，或者仅粘贴一个片段，例如带有几种样式的 <div>，浏览器会填充缺失的结构。切换到预览视图以查看完整大小的结果，或者当您需要书写空间时切换到代码视图。如果某些内容看起来不正确，请先单击“美化”：干净的缩进可以使未闭合的标签或放错位置的 </div> 更容易被发现。
该编辑器适用于单个 HTML 文档，因此 CSS 和 JavaScript 位于其中。在 <head> 的 <style> 块中添加样式或作为内联样式属性，并在 <body> 末尾的 <script> 块中添加行为或作为 onclick 等事件属性。您还可以从 CDN 加载库或框架，例如 Google Font、Tailwind 的 Play CDN 或图表库，并使用指向 https URL 的普通 <link> 或 <script src> 标记。预览版在真实的浏览器引擎中运行您的脚本，因此 DOM 事件、计时器、画布以及对支持 CORS 的 API 的 fetch 调用的行为都与在实时页面上一样。
使用预览上方的设备按钮来限制其宽度。在 <head> 中包含 <meta name="viewport" content="width=device-width, initial-scale=1"> ，以便媒体查询以与在手机上相同的方式响应预览宽度。
| 预设 | 预览宽度 | 要检查什么 |
|---|---|---|
| 桌面 | 全窗格宽度 | 最大宽度容器、多列网格、悬停状态 |
| 药片 | 768px | 常见的 md 断点：nav 折叠、2 列布局 |
| 移动的 | 375px | 文本换行、点击目标大小、图像溢出、水平滚动 |
预览是从您的代码加载的沙盒框架。为了安全起见，它有一个不透明的来源：您的脚本无法读取此站点的 cookie 或存储，并且此站点无法读取您的页面。这种设计会导致一些可预测的限制，如下所示，这样您就不会浪费时间调试编辑器而不是代码。
| 作品 | 不起作用（以及为什么） |
|---|---|
| 内联<style>、样式属性和<script> | 相对路径如 src="img/logo.png"：服务器上没有文件夹可以解析它们。使用完整的 https URL 或数据 URI |
| 通过 https 来自 CDN 的 CSS 和 JS | 脚本中的 localStorage、sessionStorage 和 cookie：沙箱会阻止它们（它们会抛出 SecurityError） |
| Alert()、confirm()、在新选项卡中打开的表单和链接 | fetch() 到不发送 CORS 标头的 API：浏览器会阻止响应，就像在真实网站上一样 |
| 来自公共 URL 的图像和字体 | 多个文件、npm 导入或构建步骤：它是单文档编辑器，而不是项目 IDE |
Pretify 在您的浏览器中运行 Prettier 的 HTML 格式化程序。它用 2 个空格重新缩进嵌套标签，将长行换行至 100 个字符，并在标签太宽时将属性放在自己的行上。它针对 HTML 结构进行了调整，因此 <style> 和 <script> 块的内容大部分保留为您编写的内容。它不会改变页面呈现的内容。如果标记存在 Prettier 无法解析的语法错误，您将看到一条消息，并且您的代码将保持原样。
共有三种导出选项，每种选项适合不同的作业。 .html 下载是编辑器中逐字节的代码，可以在浏览器中打开或放入项目中。打印将渲染的预览发送到浏览器的打印对话框：选择另存为 PDF 以获得可选择的文本、有效的多分页符以及 JavaScript 绘制的任何内容。 PDF 按钮是一个一键快捷方式，可将静态 HTML 和 CSS 捕获为图像，将其分割到 A4 页面上并下载。由于它是图像，因此无法选择其文本，并且不会显示由 JavaScript 创建的内容。如果快速 PDF 失败，通常的原因是没有 CORS 标头的外部图像；使用打印代替。
电子邮件客户端支持的 HTML 和 CSS 比浏览器少得多，因此电子邮件模板遵循旧的约定：基于表格的布局、大约 600 像素宽的内容列、内联样式属性而不是 <style> 块以及具有固定宽度属性的图像。在这里按照这种方式构建并切换到 375px 预设，以检查电子邮件在手机上的堆叠情况。预览显示现代浏览器如何呈现您的电子邮件，这是一个很好的初步检查。某些客户端（尤其是 Windows 上的 Outlook）会以不同的方式呈现它，因此请务必在营销活动结束之前将测试发送到真实的收件箱。
您可以输入并调整简短的模式。每一个只需要几行，并立即在预览中显示其结果。
| 片段 | 关键代码 | 它教什么 |
|---|---|---|
| 居中卡片 | 本体{display:grid;place-items:center;min-height:100vh} | 网格在一条规则中居中 |
| Flexbox 导航栏 | 导航{display:flex;justify-content:space-between;gap:1rem} | 将项目间隔在一行上 |
| 响应栏 | 显示：网格；网格模板列：重复（自动调整，minmax（200px，1fr）） | 无需媒体查询即可换行的列 |
| 点击计数器 | <button onclick="this.textContent=++n">0</button> 在 <script> 中让 n=0 | 事件和更新 DOM |
| 深色模式感知页面 | @media（首选颜色方案：深色）{body{background:#111;color:#eee}} | 尊重访客的系统主题 |
使用 CSS Generator 生成渐变、阴影和其他 CSS使用 SVG Forge 优化内联 SVG 图标为模型创建大小占位符图像
您键入的任何内容都不会发送到服务器。为了在两次访问之间保留您的工作，编辑器会自动将您的代码保存到该设备上该浏览器的本地存储中，因此刷新后它仍然存在，但不会同步到其他设备或其他浏览器。单击重置会将您的代码替换为示例文档。在浏览器设置中清除此网站的数据会删除保存的副本。在共享计算机上，在离开之前按“重置”。
该编辑器专为快速、私密、单文件工作而构建：测试代码片段、学习 HTML、检查手机宽度的布局或预览电子邮件块，无需帐户。如果您需要多个文件、npm 包、框架构建步骤、可共享链接或实时协作，那么 CodePen、JSFiddle 或 PlayCode 等完整的 Playground 是更合适的选择。许多开发人员都使用这两种工具：用于此类检查的快速便签本，以及用于他们想要共享的项目的完整游乐场。
在编辑器中输入或粘贴 HTML。停止输入后大约 300 毫秒，预览会重新呈现，显示真实浏览器如何显示您的代码。没有“运行”按钮，没有安装，也没有注册。
是的。将 CSS 放入 <style> 块或样式属性中，将 JavaScript 放入 <script> 块或 onclick 等事件属性中。您还可以使用 https URL 从 CDN 加载库和字体。它是一个单文档编辑器，因此不支持单独的 .css 和 .js 文件。
粘贴杂乱或缩小的 HTML，然后单击“美化”。 Prettier 用 2 个空格重新缩进嵌套标签，并在 100 个字符处换行长行，而不改变页面的呈现方式。如果 HTML 存在 Prettier 无法解析的语法错误，您的代码将保持不变，并且您将看到一条消息。
是的，有两种方法。打印 → 另存为 PDF 使用浏览器的打印引擎，该引擎提供可选择的文本、多页输出以及 JavaScript 呈现的任何内容。 PDF 按钮是静态 HTML 和 CSS 的快速一键图像捕获，分为 A4 页面；它的文本不可选择，并且不包含 JavaScript 输出。
仅在您自己的浏览器中。编辑器会自动保存到该浏览器的本地存储，因此您的工作可以在刷新后继续存在，但不会将任何内容上传到服务器，也不会同步到其他设备。单击重置或清除该站点的数据以将其删除。
像 img/logo.png 或 styles.css 这样的相对路径没有可解析的文件夹，因为预览是根据您的代码而不是服务器上的文件构建的。使用完整的 https URL，将 CSS 粘贴到 <style> 块中，或将小图像转换为数据 URI。
预览在具有不透明来源的沙盒框架中运行，因此它无法触及该网站的数据。因此，localStorage、sessionStorage 和 cookies 对您的代码不可用，并引发 SecurityError。在本地文件或完整的 Playground 中测试存储逻辑。
是的。输入标签并立即查看结果。从基本结构（<h1>、<p>、<a>、<img>）开始，然后添加 <style> 块并尝试颜色和布局。这种即时反馈比编辑文件和刷新浏览器选项卡要快得多。
是的。在桌面（全宽）、平板电脑（768 像素）和移动设备（375 像素）之间切换预览。将视口元标记添加到您的 <head> 中，以便您的媒体查询像在真实手机上一样响应。
Tool GuidesPhotos carry hidden data like GPS location and camera details. Here's why that matters for privacy and how to strip it before sharing.
Tool GuidesCPS means clicks per second. Here's how it's measured, what a good score looks like, and how to test your own click speed for free.
Tool GuidesCombine several PDFs into one document, reorder the pages, and keep everything private — no software and no server upload.