このツールについて
コードプレイグラウンドはアイデアを試す最速の方法です。プロジェクトのセットアップもビルド手順もサーバーも不要。3つのパネルに HTML・CSS・JavaScript を入力すると、入力を止めた瞬間にプレビューが再描画されます。Stack Overflow のスニペットを試したり、コンポーネントを試作したり、コードの動きを教えたりするのに最適です。
すべてはブラウザ内のサンドボックス化された iframe でローカルに動作し、コードがどこかにアップロードされることはありません。気に入ったものができたら、自己完結型の .html ファイル 1 つとしてダウンロードでき、どこでも開けますし、プロジェクトに組み込めます。
よくある質問
私のHTML/CSS/JSはサーバー上で実行されますか？
いいえ。すべてブラウザ内のサンドボックス化された iframe 内で実行されます——サーバー側での実行は一切なく、書いた内容がどこかに送られることもありません。
プレビュー用の iframe で試して安全ですか？
はい。プレビューは sandbox="allow-scripts allow-modals" で動作するため、親ページにアクセスしたり、Cookie を読んだり、最上位ウィンドウへ遷移したりできません——サイトの他の部分から隔離されています。
コードは自動的に保存されますか？
はい。入力を止めてから約300ミリ秒後に、HTML、CSS、JS がこのブラウザのローカルストレージに保存され、次回ここでプレイグラウンドを開いたときに自動で復元されます。
CDN 上の外部ライブラリを使えますか？
HTML パネルに直接 <script src="https://..."> タグを追加すれば CDN でホストされたライブラリを読み込めますが、npm やバンドラーのサポートはありません——普通の <script> タグが読み込めるものだけです。
プレイグラウンドを単独のファイルとして保存できますか？
はい。ダウンロードすると、現在の HTML、CSS、JS がインラインの <style> と <script> タグを持つ1つの .html ファイルにまとめられ、サーバーなしでどのブラウザでも正しく開けます。