Tom UI Playground

Über dieses Projekt

Tom UI Playground ist eine browserbasierte React-+-Tailwind-Sandbox, die VS Code zum Vorbild nimmt — gebaut mit React, TypeScript, Vite und Tailwind CSS. Die Editorfläche nutzt Monaco Editor (die Engine hinter VS Code) mit Syntax-Highlighting für TSX, TypeScript und CSS, Autovervollständigung und Formatierung. JSX/TSX wird per Sucrase live im Browser transpiliert, sodass die Vorschau ohne Build-Schritt aktualisiert wird. Ein virtuelles Dateisystem unterstützt bis zu 20 .tsx-, .ts- und .css-Dateien mit relativen Imports plus eine QuickOpen-Palette (Cmd+P) für schnelle Navigation. Persistenz läuft über localStorage mit bis zu 30 benannten Speicherslots, periodischem Auto-Save sowie JSON-Import/-Export. Die App liefert eine Snippet-Bibliothek mit 15+ Vorlagen, eine integrierte Konsole für log/warn/error/info, ein Tailwind-Cheatsheet und resizable Panels. Die Vorschau läuft in einem Sandbox-Iframe, das relative Imports auflöst, React 19 und Tailwind über CDN mountet und Konsolen-Output ans Eltern-Fenster zurückreicht.