Tom UI Playground

Informazioni sul progetto

Tom UI Playground è un sandbox React + Tailwind nel browser modellato su VS Code, costruito con React, TypeScript, Vite e Tailwind CSS. La superficie di editing usa Monaco Editor (il motore dietro VS Code) con sintassi colorata per TSX, TypeScript e CSS, autocompletamento e formattazione. Il codice JSX/TSX viene transpilato in tempo reale nel browser tramite Sucrase, così l'anteprima si aggiorna senza step di build. Un file system virtuale supporta fino a 20 file .tsx, .ts e .css con import relativi e una palette QuickOpen (Cmd+P) per la navigazione rapida. La persistenza passa da localStorage con fino a 30 slot di salvataggio nominati, auto-save periodico e import/export JSON. L'app include una libreria di 15+ snippet, una console che cattura log/warn/error/info, un cheat sheet Tailwind e pannelli ridimensionabili. L'anteprima gira in un iframe sandbox che risolve gli import relativi, monta React 19 e Tailwind via CDN e rimanda la console al genitore.