Dokumentation

tui.builders ist ein visueller Drag-and-Drop-Editor zum Gestalten von Terminal-Interfaces. Er generiert derzeit produktionsreifen Rust-Code für SuperLightTUI (SLT), weitere Framework-Unterstützung ist geplant.

Verwendung

  1. Öffne den Editor.
  2. Wähle ein Template oder starte mit einem leeren Projekt.
  3. Füge Widgets aus der Palette hinzu.
  4. Passe Props, Layout und Stil im Inspektor an.
  5. Exportiere den generierten Rust-Code.

Voraussetzungen: Installiere Rust und stelle sicher, dass cargo in deiner Shell verfügbar ist.

Editor-Anleitung

Palette

Ziehe Widgets in den Baum oder klicke, um sie an der aktuellen Auswahl einzufügen.

Canvas

Live-Terminal-Vorschau deines aktuellen Widget-Baums.

Inspektor

Bearbeite Widget-Props, Flex-Layout-Werte und Style-Tokens an einem Ort.

Code-Vorschau

Sieh dir die generierten Rust-Änderungen in Echtzeit an, während du bearbeitest.

Export

Als Cargo-Projekt (.zip) herunterladen, eine einzelne .rs-Datei exportieren oder Code in die Zwischenablage kopieren.

Widget-Katalog

Alle verfügbaren Widgets nach Kategorie gruppiert.

Layout (8)

WidgetSLT-FunktionBeschreibungFrameworks
Containerui.container().col(...) / ui.row(...)Flexibler Eltern-Container mit Rahmen, Abstand und Layout-Steuerung.SLTInk
Spacerui.spacer()Verbraucht den verbleibenden Platz, um umliegende Inhalte auszurichten.SLTInk
Separatorui.separator()Zeichnet eine horizontale Trennlinie.SLTInk
Scrollableui.scrollable(&mut state)Fügt Scroll-Verhalten für lange Inhaltsbereiche hinzu.SLTInk
Screenui.screen(...)SLT
Gridui.grid(cols, ...)Ordnet Kindelemente in einem responsiven Mehrspaltenlayout an.SLTInk
Divider Textui.divider_text(label)Rendert einen beschrifteten Abschnittstrenner.SLTInk
Accordionui.accordion(title, &mut open, ...)Aufklappbarer Bereich für schrittweise eingeblendete Inhalte.SLTInk

Text (4)

WidgetSLT-FunktionBeschreibungFrameworks
Textui.text(value)Rendert einfachen Terminal-Text.SLTInk
Markdownui.markdown(value)Rendert Markdown mit SLT-Inline-Formatierung.SLTInk
Linkui.link(label, url)Erstellt anklickbare Terminal-Hyperlinks (OSC 8).SLTInk
Code Blockui.code_block(value)Zeigt syntaxformatierte Code-Ausschnitte.SLTInk

Eingabe (11)

WidgetSLT-FunktionBeschreibungFrameworks
Text Inputui.text_input(&mut state)Einzeiliges Texteingabefeld.SLTInk
Textareaui.textarea(&mut state, rows)Mehrzeiliger Textbearbeitungsbereich.SLTInk
Buttonui.button(label)Anklickbarer Aktionsauslöser mit Variantenunterstützung.SLTInk
Sliderui.slider(label, &mut value, min..=max)Passt einen numerischen Wert innerhalb eines Bereichs an.SLTInk
Confirmui.confirm(question, &mut state)Binäre Bestätigungsinteraktion.SLTInk
Checkboxui.checkbox(label, &mut checked)Boolescher Optionsschalter mit Häkchen-UI.SLTInk
Toggleui.toggle(label, &mut on)Boolesches Steuerelement im Schalter-Stil.SLTInk
Selectui.select(&mut state)Einzelauswahl-Selektor im Dropdown-Stil.SLTInk
Radioui.radio(&mut state)Sich gegenseitig ausschließende Optionsgruppe.SLTInk
Multi-Selectui.multi_select(&mut state)Wählt mehrere Optionen aus einer Liste aus.SLTInk
Calendarui.calendar(...)SLT

Daten (8)

WidgetSLT-FunktionBeschreibungFrameworks
Tableui.table(&mut state)Strukturierte Zeilen und Spalten mit Auswahlunterstützung.SLTInk
Listui.list(&mut state)Vertikale auswählbare Liste für menüartige Abläufe.SLTInk
Treeui.tree(&mut state)Hierarchischer Viewer für aufklappbare Knoten.SLTInk
Dir Treeui.directory_tree(...)SLT
File Pickerui.file_picker(...)SLT
Virtual Listui.virtual_list(&mut state, visible, ...)Virtualisierte Liste für große Datensätze.SLT
Statui.stat(label, value)Kompakte Metrikkarte mit optionalen Trend- und Farbvarianten.SLTInk
Def. Listui.definition_list(&[(term, value)])Ausgerichtete Schlüssel/Wert-Detailliste.SLTInk

Navigation (5)

WidgetSLT-FunktionBeschreibungFrameworks
Tabsui.tabs(&mut state)Tab-Navigation zwischen Inhaltsbereichen.SLTInk
Cmd Paletteui.command_palette(&mut state)Durchsuchbares Befehlsstarter-Overlay.SLT
Help Barui.help(&[(key, desc)])Untere Hilfsleiste für Tastenbelegungen.SLTInk
Breadcrumbui.breadcrumb(&[segments])Navigationspfad im Breadcrumb-Stil.SLTInk
Key Hintui.key_hint(key)Inline-Tastaturhinweis-Chip.SLTInk

Feedback (10)

WidgetSLT-FunktionBeschreibungFrameworks
Progressui.progress(value)Minimaler Fortschrittsanzeiger.SLTInk
Progress Barui.progress_bar(value, width)Fortschrittsbalken mit steuerbarer Breite.SLTInk
Spinnerui.spinner(&state)Animierter Ladeindikator.SLTInk
Toastui.toast(&mut state)Zeitgesteuerte Benachrichtigungsreihe.SLTInk
Timerui.timer_display(...)SLT
Rich Logui.rich_log(...)SLT
Tooltipui.tooltip(...)SLTInk
Alertui.alert(message, level)Inline-Hinweisbanner mit Schweregrad.SLTInk
Badgeui.badge(label)Kompaktes Status- oder Metadaten-Label.SLTInk
Empty Stateui.empty_state(title, subtitle)Platzhalterinhalt für leere Ansichten.SLTInk

Datenvisualisierung (7)

WidgetSLT-FunktionBeschreibungFrameworks
Bar Chartui.bar_chart(&[(label, value)], h)Vergleichende kategorische Balkenvisualisierung.SLTInk
Sparklineui.sparkline(&values, width)Kleines Inline-Trenddiagramm.SLTInk
Chartui.chart(builder, w, h)Konfigurierbarer Diagramm-Builder für mehrere Datenreihen.SLT
Candlestickui.candlestick(&candles, up, down)OHLC-Marktdiagramm-Rendering.SLT
Heatmapui.heatmap(&grid, w, h, low, high)Farbintensitäts-Matrix-Visualisierung.SLT
Scatterui.scatter(&points, w, h)Stellt Punktverteilungen auf zwei Achsen dar.SLT
Histogramui.histogram(&values, w, h)Häufigkeitsverteilungs-Buckets.SLT

Overlay (2)

WidgetSLT-FunktionBeschreibungFrameworks
Modalui.modal(|ui| { ... })Abgedunkelter Overlay-Dialog.SLTInk
Overlayui.overlay(|ui| { ... })Schwebende Inhaltsebene ohne Abdunkelung.SLTInk

KI (3)

WidgetSLT-FunktionBeschreibungFrameworks
Streaming Textui.streaming_text(&mut state)Token-für-Token-Textstrom-Ausgabe.SLT
Stream MDui.streaming_markdown(&mut state)Streaming-Markdown-Renderer.SLT
Context Barui.context_bar(&items)Kontext-Token/Quell-Chips für KI-Workflows.SLTInk

Formular (1)

WidgetSLT-FunktionBeschreibungFrameworks
Form Fieldui.form_field(&mut field)Komponierbares Formulareingabefeld.SLTInk

Medien (2)

WidgetSLT-FunktionBeschreibungFrameworks
Sixel Imageui.sixel_image(...)SLT
Imageui.image(&img)Halbblock-Bild-Rendering aus RGBA-Daten.SLT

Code-Generierung

tui.builders wandelt deinen Editor-Baum über generateRustCode() in Rust um und erzeugt eine ausführfertige main.rs für SLT v0.17.1 mit slt::run_with() und RunConfig.

Beispiel: Container + Text + Button

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")]);
            });
        },
    )
}

Deinen Code ausführen

Der von tui.builders generierte Code kompiliert direkt gegen SuperLightTUI. So führst du ihn aus.

Option 1: Als Cargo-Projekt exportieren (.zip)

Klicke auf Export → Cargo Project in der Editor-Symbolleiste. Entpacke und führe aus:

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

Option 2: Als .rs-Datei exportieren

Klicke auf Export → .rs File. Erstelle manuell ein Cargo-Projekt:

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

Option 3: In Zwischenablage kopieren

Klicke auf Export → Copy. In ein bestehendes Cargo-Projekt mit superlighttui als Abhängigkeit einfügen.

# In your Cargo.toml:
[dependencies]
superlighttui = "0.17.1"
Hinweis: Rust und Cargo müssen installiert sein. Der gesamte generierte Code zielt auf SLT v0.17.1 ab und wird durch automatisierte Tests auf Kompilierbarkeit geprüft. Drücke q, um die laufende TUI-App zu beenden.

Templates

tui.builders enthält 25 Templates für Dashboards, Formulare, Navigationsabläufe und Betriebswerkzeuge.

Tastaturkürzel

qBeenden in generierten TUI-Apps.
TabFokus zum nächsten Widget verschieben.
EnterFokussierte Steuerelemente auswählen oder aktivieren.
Ctrl+CApp sofort beenden.

Unterstützte Frameworks

tui.builders generiert Code für mehrere TUI-Frameworks. SuperLightTUI wird vollständig unterstützt und Ink ist als Beta verfügbar.

Unterstützt
SuperLightTUI (Rust) · v0.17.1

Immediate-Mode, kein unsafe-Code, Flexbox-Layout, 50+ Widgets, Theming, Animation, KI-native Widgets

Beta
Ink (TypeScript) · v6

React-basiertes Terminal-UI-Framework von Vadim Demedes. Jetzt als Beta mit über 37 Widgets verfügbar.

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