Documentation

tui.builders est un éditeur visuel par glisser-déposer pour concevoir des interfaces terminal. Il génère actuellement du code Rust prêt pour la production pour SuperLightTUI (SLT), avec d'autres frameworks prévus.

Comment l'utiliser

Ouvrez l'éditeur.
Choisissez un template ou démarrez depuis un projet vide.
Ajoutez des widgets depuis la palette.
Personnalisez les props, la mise en page et le style dans l'inspecteur.
Exportez le code Rust généré.

Prérequis : Installez Rust et assurez-vous que cargo est disponible dans votre shell.

Guide de l'éditeur

Palette

Faites glisser des widgets dans l'arbre ou cliquez pour les insérer à la sélection courante.

Canvas

Aperçu terminal visuel en direct de votre arbre de widgets actuel.

Inspecteur

Modifiez les props des widgets, les valeurs de mise en page flex et les tokens de style en un seul endroit.

Aperçu du code

Voyez les mises à jour du code Rust généré en temps réel pendant l'édition.

Export

Téléchargez le projet Cargo (.zip), exportez un fichier .rs, ou copiez le code dans le presse-papiers.

Catalogue de widgets

Tous les widgets disponibles regroupés par catégorie.

Mise en page (8)

Widget	Fonction SLT	Description
Container	`ui.container().col(...) / ui.row(...)`	Conteneur parent flexible avec contrôles de bordure, d'espacement et de mise en page.
Spacer	`ui.spacer()`	Consomme l'espace restant pour aligner le contenu environnant.
Separator	`ui.separator()`	Trace une ligne de séparation horizontale.
Scrollable	`ui.scrollable(&mut state)`	Ajoute le défilement aux zones de contenu de grande hauteur.
Screen	`ui.screen(...)`
Grid	`ui.grid(cols, ...)`	Dispose les enfants dans une mise en page multi-colonnes responsive.
Divider Text	`ui.divider_text(label)`	Affiche un séparateur de section avec étiquette.
Accordion	`ui.accordion(title, &mut open, ...)`	Section dépliable pour révéler progressivement du contenu.

Texte (4)

Widget	Fonction SLT	Description
Text	`ui.text(value)`	Affiche du texte brut dans le terminal.
Markdown	`ui.markdown(value)`	Affiche du Markdown avec le formatage inline SLT.
Link	`ui.link(label, url)`	Crée des hyperliens cliquables dans le terminal (OSC 8).
Code Block	`ui.code_block(value)`	Affiche des extraits de code avec coloration syntaxique.

Saisie (11)

Widget	Fonction SLT	Description
Text Input	`ui.text_input(&mut state)`	Champ de saisie texte sur une seule ligne.
Textarea	`ui.textarea(&mut state, rows)`	Zone d'édition de texte multi-lignes.
Button	`ui.button(label)`	Déclencheur d'action cliquable avec support de variantes.
Slider	`ui.slider(label, &mut value, min..=max)`	Ajuste une valeur numérique sur une plage donnée.
Confirm	`ui.confirm(question, &mut state)`	Interaction de confirmation binaire.
Checkbox	`ui.checkbox(label, &mut checked)`	Bascule booléenne avec interface à case à cocher.
Toggle	`ui.toggle(label, &mut on)`	Contrôle booléen en style interrupteur.
Select	`ui.select(&mut state)`	Sélecteur à choix unique en style liste déroulante.
Radio	`ui.radio(&mut state)`	Ensemble d'options mutuellement exclusives.
Multi-Select	`ui.multi_select(&mut state)`	Sélectionne plusieurs options dans une liste.
Calendar	`ui.calendar(...)`

Données (6)

Widget	Fonction SLT	Description
Table	`ui.table(&mut state)`	Lignes et colonnes structurées avec support de sélection.
List	`ui.list(&mut state)`	Liste verticale sélectionnable pour les flux de type menu.
Tree	`ui.tree(&mut state)`	Visionneuse de nœuds hiérarchiques dépliables.
Virtual List	`ui.virtual_list(&mut state, visible, ...)`	Liste virtualisée pour les grands jeux de données.
Stat	`ui.stat(label, value)`	Carte de métrique compacte avec variantes de tendance et de couleur.
Def. List	`ui.definition_list(&[(term, value)])`	Liste de détails clé/valeur alignés.

Navigation (5)

Widget	Fonction SLT	Description
Tabs	`ui.tabs(&mut state)`	Navigation par onglets entre les panneaux de contenu.
Cmd Palette	`ui.command_palette(&mut state)`	Superposition de lancement de commandes avec recherche.
Help Bar	`ui.help(&[(key, desc)])`	Barre d'aide en bas de l'écran pour les raccourcis clavier.
Breadcrumb	`ui.breadcrumb(&[segments])`	Fil d'Ariane pour la navigation.
Key Hint	`ui.key_hint(key)`	Puce d'indication de touche clavier en ligne.

Retour utilisateur (8)

Widget	Fonction SLT	Description
Progress	`ui.progress(value)`	Indicateur de progression minimal.
Progress Bar	`ui.progress_bar(value, width)`	Barre de progression à largeur contrôlée.
Spinner	`ui.spinner(&state)`	Indicateur de chargement animé.
Toast	`ui.toast(&mut state)`	Pile de notifications temporisées.
Tooltip	`ui.tooltip(...)`
Alert	`ui.alert(message, level)`	Bannière d'alerte de sévérité en ligne.
Badge	`ui.badge(label)`	Étiquette compacte de statut ou de métadonnée.
Empty State	`ui.empty_state(title, subtitle)`	Contenu de substitution pour les écrans vides.

Visualisation de données (7)

Widget	Fonction SLT	Description
Bar Chart	`ui.bar_chart(&[(label, value)], h)`	Visualisation en barres pour comparer des catégories.
Sparkline	`ui.sparkline(&values, width)`	Petit graphique de tendance en ligne.
Chart	`ui.chart(builder, w, h)`	Constructeur de graphiques configurable pour plusieurs séries.
Candlestick	`ui.candlestick(&candles, up, down)`	Rendu de graphique en chandeliers OHLC.
Heatmap	`ui.heatmap(&grid, w, h, low, high)`	Visualisation matricielle par intensité de couleur.
Scatter	`ui.scatter(&points, w, h)`	Représente des distributions de points sur deux axes.
Histogram	`ui.histogram(&values, w, h)`	Buckets de distribution de fréquences.

Superposition (2)

Widget	Fonction SLT	Description
Modal	`ui.modal(\|ui\| { ... })`	Couche de dialogue avec fond assombri.
Overlay	`ui.overlay(\|ui\| { ... })`	Couche de contenu flottante sans assombrissement.

IA (3)

Widget	Fonction SLT	Description
Streaming Text	`ui.streaming_text(&mut state)`	Sortie de flux de texte token par token.
Stream MD	`ui.streaming_markdown(&mut state)`	Moteur de rendu Markdown en streaming.
Context Bar	`ui.context_bar(&items)`	Puces de contexte token/source pour les flux de travail IA.

Formulaire (1)

Widget	Fonction SLT	Description
Form Field	`ui.form_field(&mut field)`	Unité de champ de saisie de formulaire composable.

Médias (2)

Widget	Fonction SLT	Description
Sixel Image	`ui.sixel_image(...)`
Image	`ui.image(&img)`	Rendu d'image en demi-blocs à partir de données RGBA.

Génération de code

tui.builders transforme votre arbre d'éditeur en Rust via generateRustCode() et émet un main.rs prêt à l'exécution ciblant SLT v0.12.x avec slt::run_with() et RunConfig.

Exemple : conteneur + texte + bouton

use slt::*;
use std::time::Duration;

fn main() -> std::io::Result<()> {
    slt::run_with(
        RunConfig {
            theme: Theme::dark(),
            mouse: true,
            tick_rate: Duration::from_millis(16),
            ..Default::default()
        },
        |ui: &mut Context| {
            if ui.key('q') { ui.quit(); }

            ui.bordered(Border::Rounded).pad(1).gap(1).col(|ui| {
                ui.text("Hello from tui.builders").bold().fg(Color::Cyan);
                if ui.button("Click me").clicked {
                    // handle click
                }
                ui.help(&[("q", "quit")]);
            });
        },
    )
}

Exécuter votre code

Tout le code généré par tui.builders compile directement contre SuperLightTUI. Voici comment l'exécuter.

Option 1 : Exporter en tant que projet Cargo (.zip)

Cliquez sur Export → Cargo Project dans la barre d'outils de l'éditeur. Décompressez et lancez :

unzip my-tui-app.zip
cd my-tui-app
cargo run

Option 2 : Exporter en tant que fichier .rs

Cliquez sur Export → .rs File. Créez un projet Cargo manuellement :

cargo new my-tui-app
cd my-tui-app
cargo add superlighttui
# Replace src/main.rs with your exported file
cargo run

Option 3 : Copier dans le presse-papiers

Cliquez sur Export → Copy. Collez dans un projet Cargo existant avec superlighttui comme dépendance.

# In your Cargo.toml:
[dependencies]
superlighttui = "0.12"

Remarque : Rust et Cargo doivent être installés. Tout le code généré cible SLT v0.12.x et est vérifié pour la compilation via des tests automatisés. Appuyez sur q pour quitter l'application TUI en cours d'exécution.

Templates

tui.builders est livré avec 20 templates couvrant les tableaux de bord, formulaires, flux de navigation et outils opérationnels.

Parcourir /templates Ouvrir /editor

Raccourcis clavier

`q`	Quitter dans les applications TUI générées.
`Tab`	Déplacer le focus vers le widget suivant.
`Enter`	Sélectionner ou activer le contrôle en focus.
`Ctrl+C`	Quitter l'application immédiatement.

Frameworks supportés

tui.builders génère actuellement du code pour SuperLightTUI. D'autres écosystèmes TUI seront pris en charge prochainement.

Pris en charge

SuperLightTUI (Rust)

Mode immédiat, zéro unsafe, mise en page flexbox, 50+ widgets, thèmes, animations, widgets natifs IA

Prochain

Ink (TypeScript)

Framework d'interface terminal basé sur React par Vadim Demedes

Prévu

Ratatui (Rust) · Textual (Python) · Bubbletea (Go)