TUISTUDIO : un éditeur visuel pour concevoir des interfaces en terminal (TUI)
https://github.com/jalonsogo/tui-studio
📌 TUISTUDIO est un éditeur visuel qui permet de concevoir des interfaces en terminal sans coder. Contrairement aux TUI traditionnels où chaque layout est écrit manuellement en code, TUIStudio propose un canvas visuel où vous glissez-déposez les composants et voyez le rendu en temps réel en ANSI. L’interface ressemble à Figma mais pour le terminal : au lieu de boutons web, vous avez des boutons textes, des boîtes avec bordures, des tableaux, des menus. L’export automatique génère le code prêt pour 6 frameworks différents : Ink, BubbleTea, Blessed, Textual, OpenTUI et Tview.
Le canvas est votre espace de travail. Faites glisser les composants depuis la palette, organisez-les avec le moteur de layout (absolu, flexbox ou grid), et personnalisez les propriétés dans le panneau de droite. Vous voyez exactement ce que l’utilisateur verra dans le terminal, avec preview en temps réel à plusieurs niveaux de zoom. Les 21 composants inclus couvrent tout ce qu’il faut : écran, boîte, bouton, champ de texte, case à cocher, radio, select, toggle, texte, spinner, barre de progression, liste, arborescence, menu, onglets, fil d’Ariane, modal, info-bulle, tooltip et séparateur.
- 🎨 Éditeur visuel Figma-like pour TUI : drag-and-drop + preview ANSI temps réel
- 🧩 20+ composants : Screen, Box, Button, TextInput, Table, List, Tree, Tabs, Menu, Modal, etc.
- 📐 3 modes de layout : Absolu, Flexbox, Grid avec contrôle total des propriétés
- 🎨 8 thèmes colorés : Dracula, Nord, Solarized, Monokai, Gruvbox, Tokyo Night, Nightfox, Sonokai
- 🚀 Export multi-framework : Ink, BubbleTea, Blessed, Textual, OpenTUI, Tview (code prêt à l’emploi)
Le panneau Layers affiche l’arborescence de vos composants. Vous pouvez faire glisser-déposer pour réorganiser la hiérarchie, masquer des éléments, verrouiller pour empêcher les modifications, et renommer inline. L’historique complet undo/redo protège toutes les modifications de l’arbre. Les projets sont sauvegardés en format .tui (JSON), portable et partageable. Ouvrez n’importe quel projet depuis n’importe où, committez sur git, partagez avec votre équipe. Pas de compte ni cloud requis.
Les thèmes basculent le canvas en temps réel. Changer de thème modifie instantanément tous les composants et le preview. Vous pouvez aussi basculer entre dark mode et light mode dans l’éditeur, préférence qui persiste entre les sessions. Les arrière-plans gradient permettent d’ajouter des dégradés à n’importe quel élément : choisis l’angle, les stops de couleur et les gradients sont rendus en bandes de cellules de caractères pour correspondre au vrai rendu ANSI.
Les raccourcis clavier accélèrent le flux. Cmd/Ctrl+P ouvre la palette de commandes pour créer rapidement un composant, changer de thème ou basculer dark/light. Cmd/Ctrl+S sauve, Cmd/Ctrl+O ouvre, Cmd/Ctrl+E exporte. Quand vous ne tapez pas, des raccourcis clavier composants permettent d’ajouter des éléments sans la souris : b pour Button, t pour Tabs, l pour List, e pour Tree, a pour Radio, s pour Select, i pour TextInput, n pour Spinner.
L’installation dépend de votre plateforme. Sur Mac (Apple Silicon), téléchargez le DMG et glissez dans Applications. Sur Windows, double-cliquez l’EXE (SmartScreen peut bloquer, cliquez « More info » puis « Run anyway »). Sur Linux, installez via dpkg -i TUIStudio-amd64.deb ou double-clique dans un gestionnaire de fichiers. Pour le développement, clonez le repo, lancez npm install puis npm run dev et ouvrez http://localhost:5173.
Le projet est en Alpha statut. L’éditeur est gratuit à télécharger, les exports ne fonctionnent pas encore (en développement actif). Le code base est open source (LOLcense), construit avec React 19, TypeScript 5.8, Vite 7, Zustand 5 pour l’état, Tailwind CSS pour le style, et Lucide React pour les icônes. La documentation complète est sur GitHub et le site.
Sources
