在线代码编辑器 — 使用Monaco Editor免费编写HTML、CSS、JS

什么是代码游乐场 (Code Playground)？

Metoolzy Code Playground 是一款在线代码编辑器，适用于HTML、CSS和JavaScript — 使用Monaco Editor（与VS Code相同的引擎）。您可以在浏览器上编写代码并实时预览结果。

类似于CodePen、JSFiddle，但完全免费，无需帐户，且代码自动保存在浏览器中。

主要特点

• Monaco Editor — 具有来自VS Code的语法高亮、自动补全、错误检测功能
• 实时预览 (Live Preview) — 在iframe中渲染结果，停止输入500毫秒后自动运行
• 控制台 (Console) — 捕获来自预览窗口的 console.log、console.error、console.warn
• 3种布局模式 — 选项卡 (Tabs)（1个编辑器+预览）、拆分3 (Split 3)（同时显示3个编辑器）、堆叠 (Stacked)
• 外部库 (External Libraries) — 添加 Bootstrap、Tailwind、jQuery、Alpine.js、Chart.js、Three.js、GSAP或自定义CDN URL
• 通过URL分享 — 使用pako deflate压缩代码 → 简短的URL，任何人打开都能看到相同的代码
• 响应式预览 — 桌面端、平板端 (768px)、移动端 (375px)
• 自动保存 — 代码自动保存到localStorage，重新加载不会丢失
• 下载HTML — 导出为1个完整的 .html 文件
• 深色/浅色主题 — 切换编辑器的主题

键盘快捷键

快捷键	功能
Ctrl+S	运行代码（刷新预览）
Ctrl+1 / 2 / 3	切换HTML / CSS / JS选项卡
Ctrl+`	切换控制台面板 (Console panel)
Ctrl+Shift+F	格式化代码 (HTML + CSS + JS)

与CodePen / JSFiddle的比较

功能	Metoolzy	CodePen	JSFiddle
Monaco Editor (VS Code)	✅	❌ CodeMirror	❌ CodeMirror
无限制免费	✅	❌ Pro功能	✅
无需帐户	✅	❌	✅
自动保存到localStorage	✅	❌	❌
分享URL (压缩)	✅ pako	✅ 服务器	✅ 服务器
自定义CDN	✅	✅	✅
捕获控制台	✅	✅ (Pro)	❌
可拖动分隔线	✅	✅	❌

常见问题

关闭标签页时代码会丢失吗？

不会。代码每秒自动保存到localStorage。重新打开时将恢复最后的代码。

分享链接会过期吗？

不会。代码直接在URL中编码（不保存在服务器上）。链接永久有效。

是否支持TypeScript / SCSS？

目前不支持。仅支持纯HTML、CSS和JavaScript。TypeScript支持正在计划中。

👉 立即打开Code Playground →

了解更多： HTML格式化 · CSS格式化 · JS格式化