Projets

Tom UI Playground

Environnement de développement UI dans le navigateur avec éditeur Monaco, prévisualisation en direct, explorateur de fichiers et console.

À propos du projet

Tom UI Playground est un sandbox React + Tailwind dans le navigateur calqué sur VS Code, construit avec React, TypeScript, Vite et Tailwind CSS. La surface d'édition utilise Monaco Editor (le moteur derrière VS Code) avec coloration syntaxique TSX/TypeScript/CSS, autocomplete et formatage. Le code JSX/TSX est transpilé en temps réel dans le navigateur via Sucrase — l'aperçu se met à jour sans étape de build. Un système de fichiers virtuel supporte jusqu'à 20 fichiers .tsx/.ts/.css avec imports relatifs et une palette QuickOpen (Cmd+P) pour la navigation rapide. La persistance passe par localStorage avec 30 emplacements de sauvegarde nommés, auto-save périodique et import/export JSON. L'app embarque une bibliothèque de 15+ snippets, une console capturant log/warn/error/info, une cheat sheet Tailwind et des panneaux redimensionnables. L'aperçu tourne dans une iframe sandbox qui résout les imports relatifs, monte React 19 et Tailwind via CDN, et renvoie la console au parent.