オンラインコードプレイグラウンド — HTML、CSS、JSを無料でMonaco Editorを使って書く

Code Playgroundとは？

Metoolzy Code Playgroundは、HTML、CSS、JavaScript用のオンラインコードエディタです。VS Codeと同じエンジンであるMonaco Editorを使用しています。ブラウザ上で直接コードを書き、ライブプレビューの結果を見ることができます。

CodePenやJSFiddleに似ていますが、完全無料でアカウントは不要です。コードはブラウザ上に自動的に保存されます。

Monaco Editor — VS Codeによるシンタックスハイライト、オートコンプリート、エラー検出
ライブプレビュー — iframe内でのレンダリング結果。タイピング停止後500msで自動実行
コンソール — プレビューからのconsole.log、console.error、console.warnをキャプチャ
3つのレイアウトモード — タブ（1エディタ + プレビュー）、スプリット3（3エディタ同時）、スタック
外部ライブラリ — Bootstrap、Tailwind、jQuery、Alpine.js、Chart.js、Three.js、GSAP、またはカスタムCDN URLを追加
URLで共有 — pako deflateによるコード圧縮 → 短いURL、誰が開いても正しいコードが表示されます
レスポンシブプレビュー — デスクトップ、タブレット（768px）、モバイル（375px）
自動保存 — コードはlocalStorageに自動保存され、リロードしても失われません
HTMLダウンロード — 1つの完全な.htmlファイルとしてエクスポート
ダーク/ライトテーマ — エディタのテーマ切り替え

機能	Metoolzy	CodePen	JSFiddle
Monaco Editor (VS Code)	✅	❌ CodeMirror	❌ CodeMirror
完全無料	✅	❌ Pro機能	✅
アカウント不要	✅	❌	✅
localStorage自動保存	✅	❌	❌
URL共有 (圧縮)	✅ pako	✅ サーバー	✅ サーバー
カスタムCDN	✅	✅	✅
コンソールキャプチャ	✅	✅ (Pro)	❌
ドラッグ可能な区切り線	✅	✅	❌

いいえ。コードは毎秒localStorageに自動保存されます。再度開くと最後のコードが復元されます。

いいえ。コードはURLに直接エンコードされます（サーバーには保存されません）。リンクは永久に機能します。

現在はサポートされていません。純粋なHTML、CSS、JavaScriptのみをサポートしています。TypeScriptのサポートは計画中です。