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 在浏览器内实时转译，预览无需构建步骤即可更新。虚拟文件系统最多支持 20 个 .tsx、.ts、.css 文件，支持相对路径导入，搭配 QuickOpen 命令面板（Cmd+P）快速跳转。持久化使用 localStorage，提供最多 30 个具名存档、定期自动保存与 JSON 导入导出。应用内置 15+ 模板片段、捕获 log/warn/error/info 的集成控制台、Tailwind 速查表与可调整大小的面板。预览运行在沙箱 iframe 中，解析相对导入、通过 CDN 挂载 React 19 与 Tailwind，并把控制台输出回传给父页面。