Tom UI Playground

プロジェクトについて

Tom UI Playground は、VS Code をモデルにしたブラウザ上の React + Tailwind サンドボックスで、React、TypeScript、Vite、Tailwind CSS で構築されています。編集画面には Monaco Editor（VS Code を支えるエンジン）を採用し、TSX、TypeScript、CSS のシンタックスハイライト、補完、フォーマットを提供します。JSX/TSX は Sucrase によりブラウザ内でリアルタイム変換されるため、ライブプレビューはビルドステップなしで更新されます。仮想ファイルシステムは相対インポートを伴う .tsx・.ts・.css ファイルを最大 20 個まで扱え、QuickOpen パレット（Cmd+P）で素早く移動できます。永続化は localStorage で処理され、最大 30 個の名前付きセーブスロット、定期オートセーブ、JSON のインポート／エクスポートに対応します。アプリには 15 を超えるスニペットライブラリ、log/warn/error/info を捕捉する統合コンソール、Tailwind チートシート、リサイズ可能なパネルが含まれます。プレビューはサンドボックス化された iframe で動き、相対インポートを解決して React 19 と Tailwind を CDN からマウントし、コンソール出力を親ウィンドウに転送します。