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

  1. Ouvrez l'éditeur.
  2. Choisissez un template ou démarrez depuis un projet vide.
  3. Ajoutez des widgets depuis la palette.
  4. Personnalisez les props, la mise en page et le style dans l'inspecteur.
  5. 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)

WidgetFonction SLTDescriptionFrameworks
Containerui.container().col(...) / ui.row(...)Conteneur parent flexible avec contrôles de bordure, d'espacement et de mise en page.SLTInk
Spacerui.spacer()Consomme l'espace restant pour aligner le contenu environnant.SLTInk
Separatorui.separator()Trace une ligne de séparation horizontale.SLTInk
Scrollableui.scrollable(&mut state)Ajoute le défilement aux zones de contenu de grande hauteur.SLTInk
Screenui.screen(...)SLT
Gridui.grid(cols, ...)Dispose les enfants dans une mise en page multi-colonnes responsive.SLTInk
Divider Textui.divider_text(label)Affiche un séparateur de section avec étiquette.SLTInk
Accordionui.accordion(title, &mut open, ...)Section dépliable pour révéler progressivement du contenu.SLTInk

Texte (4)

WidgetFonction SLTDescriptionFrameworks
Textui.text(value)Affiche du texte brut dans le terminal.SLTInk
Markdownui.markdown(value)Affiche du Markdown avec le formatage inline SLT.SLTInk
Linkui.link(label, url)Crée des hyperliens cliquables dans le terminal (OSC 8).SLTInk
Code Blockui.code_block(value)Affiche des extraits de code avec coloration syntaxique.SLTInk

Saisie (11)

WidgetFonction SLTDescriptionFrameworks
Text Inputui.text_input(&mut state)Champ de saisie texte sur une seule ligne.SLTInk
Textareaui.textarea(&mut state, rows)Zone d'édition de texte multi-lignes.SLTInk
Buttonui.button(label)Déclencheur d'action cliquable avec support de variantes.SLTInk
Sliderui.slider(label, &mut value, min..=max)Ajuste une valeur numérique sur une plage donnée.SLTInk
Confirmui.confirm(question, &mut state)Interaction de confirmation binaire.SLTInk
Checkboxui.checkbox(label, &mut checked)Bascule booléenne avec interface à case à cocher.SLTInk
Toggleui.toggle(label, &mut on)Contrôle booléen en style interrupteur.SLTInk
Selectui.select(&mut state)Sélecteur à choix unique en style liste déroulante.SLTInk
Radioui.radio(&mut state)Ensemble d'options mutuellement exclusives.SLTInk
Multi-Selectui.multi_select(&mut state)Sélectionne plusieurs options dans une liste.SLTInk
Calendarui.calendar(...)SLT

Données (8)

WidgetFonction SLTDescriptionFrameworks
Tableui.table(&mut state)Lignes et colonnes structurées avec support de sélection.SLTInk
Listui.list(&mut state)Liste verticale sélectionnable pour les flux de type menu.SLTInk
Treeui.tree(&mut state)Visionneuse de nœuds hiérarchiques dépliables.SLTInk
Dir Treeui.directory_tree(...)SLT
File Pickerui.file_picker(...)SLT
Virtual Listui.virtual_list(&mut state, visible, ...)Liste virtualisée pour les grands jeux de données.SLT
Statui.stat(label, value)Carte de métrique compacte avec variantes de tendance et de couleur.SLTInk
Def. Listui.definition_list(&[(term, value)])Liste de détails clé/valeur alignés.SLTInk

Navigation (5)

WidgetFonction SLTDescriptionFrameworks
Tabsui.tabs(&mut state)Navigation par onglets entre les panneaux de contenu.SLTInk
Cmd Paletteui.command_palette(&mut state)Superposition de lancement de commandes avec recherche.SLT
Help Barui.help(&[(key, desc)])Barre d'aide en bas de l'écran pour les raccourcis clavier.SLTInk
Breadcrumbui.breadcrumb(&[segments])Fil d'Ariane pour la navigation.SLTInk
Key Hintui.key_hint(key)Puce d'indication de touche clavier en ligne.SLTInk

Retour utilisateur (10)

WidgetFonction SLTDescriptionFrameworks
Progressui.progress(value)Indicateur de progression minimal.SLTInk
Progress Barui.progress_bar(value, width)Barre de progression à largeur contrôlée.SLTInk
Spinnerui.spinner(&state)Indicateur de chargement animé.SLTInk
Toastui.toast(&mut state)Pile de notifications temporisées.SLTInk
Timerui.timer_display(...)SLT
Rich Logui.rich_log(...)SLT
Tooltipui.tooltip(...)SLTInk
Alertui.alert(message, level)Bannière d'alerte de sévérité en ligne.SLTInk
Badgeui.badge(label)Étiquette compacte de statut ou de métadonnée.SLTInk
Empty Stateui.empty_state(title, subtitle)Contenu de substitution pour les écrans vides.SLTInk

Visualisation de données (7)

WidgetFonction SLTDescriptionFrameworks
Bar Chartui.bar_chart(&[(label, value)], h)Visualisation en barres pour comparer des catégories.SLTInk
Sparklineui.sparkline(&values, width)Petit graphique de tendance en ligne.SLTInk
Chartui.chart(builder, w, h)Constructeur de graphiques configurable pour plusieurs séries.SLT
Candlestickui.candlestick(&candles, up, down)Rendu de graphique en chandeliers OHLC.SLT
Heatmapui.heatmap(&grid, w, h, low, high)Visualisation matricielle par intensité de couleur.SLT
Scatterui.scatter(&points, w, h)Représente des distributions de points sur deux axes.SLT
Histogramui.histogram(&values, w, h)Buckets de distribution de fréquences.SLT

Superposition (2)

WidgetFonction SLTDescriptionFrameworks
Modalui.modal(|ui| { ... })Couche de dialogue avec fond assombri.SLTInk
Overlayui.overlay(|ui| { ... })Couche de contenu flottante sans assombrissement.SLTInk

IA (3)

WidgetFonction SLTDescriptionFrameworks
Streaming Textui.streaming_text(&mut state)Sortie de flux de texte token par token.SLT
Stream MDui.streaming_markdown(&mut state)Moteur de rendu Markdown en streaming.SLT
Context Barui.context_bar(&items)Puces de contexte token/source pour les flux de travail IA.SLTInk

Formulaire (1)

WidgetFonction SLTDescriptionFrameworks
Form Fieldui.form_field(&mut field)Unité de champ de saisie de formulaire composable.SLTInk

Médias (2)

WidgetFonction SLTDescriptionFrameworks
Sixel Imageui.sixel_image(...)SLT
Imageui.image(&img)Rendu d'image en demi-blocs à partir de données RGBA.SLT

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.17.1 avec slt::run_with() et RunConfig.

Exemple : conteneur + texte + bouton

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

fn main() -> std::io::Result<()> {
    let config = RunConfig::default()
        .theme(Theme::dark())
        .mouse(true)
        .tick_rate(Duration::from_millis(16));

    slt::run_with(
        config,
        |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.17.1"
Remarque : Rust et Cargo doivent être installés. Tout le code généré cible SLT v0.17.1 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 25 templates couvrant les tableaux de bord, formulaires, flux de navigation et outils opérationnels.

Raccourcis clavier

qQuitter dans les applications TUI générées.
TabDéplacer le focus vers le widget suivant.
EnterSélectionner ou activer le contrôle en focus.
Ctrl+CQuitter l'application immédiatement.

Frameworks supportés

tui.builders génère du code pour plusieurs frameworks TUI. SuperLightTUI est entièrement supporté, et Ink est disponible en bêta.

Pris en charge
SuperLightTUI (Rust) · v0.17.1

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

Bêta
Ink (TypeScript) · v6

Framework d'interface terminal basé sur React par Vadim Demedes. Disponible en bêta avec plus de 37 widgets.

Prévu
Ratatui (Rust) · Textual (Python) · Bubbletea (Go)