Tom UI Playground

About this project

Tom UI Playground is a browser-based React + Tailwind sandbox modeled after VS Code, built with React, TypeScript, Vite, and Tailwind CSS. The editing surface uses Monaco Editor (the engine behind VS Code) with TSX, TypeScript, and CSS syntax highlighting, autocomplete, and formatting. JSX/TSX is transpiled in real time inside the browser via Sucrase, so live preview runs with no build step. A virtual file system supports up to 20 .tsx, .ts, and .css files with relative imports, and a QuickOpen palette (Cmd+P) for fast navigation. Persistence runs through localStorage with up to 30 named save slots, periodic auto-save, and JSON export/import. The app ships a snippet library of 15+ templates, an integrated console capturing log/warn/error/info, a Tailwind cheat sheet, and resizable panels. The preview runs inside a sandboxed iframe that resolves relative imports, mounts React 19 and Tailwind via CDN, and relays console output back to the parent.