HTML / CSS / JS Playground

开发工具

HTML / CSS / JS Playground

在 iframe sandbox 中预览 HTML、CSS 和 JavaScript 片段，并导出完整单文件示例。

沙箱隔离运行

运行方式: 沙箱隔离运行
标签: htmlcssjavascriptsandboxpreview
工具标识: html-css-js-playground
Worker: 无需启用
权限: 剪贴板

使用步骤

在编辑区编写 HTML 结构和 CSS 样式。
添加 JavaScript 交互逻辑。
查看实时预览，导出完整 HTML 文件。

使用例子

快速验证组件布局和样式效果。
测试 JavaScript 交互逻辑的运行时行为。

HTML

116 字符

CSS

297 字符

JS

228 字符

隔离

iframe 沙箱

HTMLCSSJavaScript

单文件导出

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  font-family: Inter, system-ui, sans-serif;
  background: #f8fafc;
  color: #0f172a;
}

main {
  display: grid;
  gap: 12px;
  padding: 28px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: white;
}</style>
</head>
<body>
<main>
  <h1>沙箱预览</h1>
  <button id="action">点击我</button>
  <p id="message">HTML、CSS 和 JS 会隔离在 iframe 中。</p>
</main>
<script>
try {
const button = document.querySelector("#action");
const message = document.querySelector("#message");

button?.addEventListener("click", () => {
  message.textContent = "Button clicked at " + new Date().toLocaleTimeString();
});
} catch (error) {
  const pre = document.createElement("pre");
  pre.textContent = String(error && error.stack ? error.stack : error);
  pre.style.cssText = "white-space:pre-wrap;color:#b91c1c;background:#fee2e2;padding:12px;border-radius:8px;";
  document.body.appendChild(pre);
}
</script>
</body>
</html>

预览运行在没有 same-origin 权限的 iframe sandbox 中，适合快速验证片段；不要粘贴敏感凭据。

HTML / CSS / JS Playground

开始使用

使用步骤

使用例子

HTML / CSS / JS Playground

HTML

CSS

JS

隔离

HTML / CSS / JS Playground

HTML / CSS / JS Playground

HTML

CSS

JS

隔离