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

Öffne den Editor.
Wähle ein Template oder starte mit einem leeren Projekt.
Füge Widgets aus der Palette hinzu.
Passe Props, Layout und Stil im Inspektor an.
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)

Widget	SLT-Funktion	Beschreibung
Container	`ui.container().col(...) / ui.row(...)`	Flexibler Eltern-Container mit Rahmen, Abstand und Layout-Steuerung.
Spacer	`ui.spacer()`	Verbraucht den verbleibenden Platz, um umliegende Inhalte auszurichten.
Separator	`ui.separator()`	Zeichnet eine horizontale Trennlinie.
Scrollable	`ui.scrollable(&mut state)`	Fügt Scroll-Verhalten für lange Inhaltsbereiche hinzu.
Screen	`ui.screen(...)`
Grid	`ui.grid(cols, ...)`	Ordnet Kindelemente in einem responsiven Mehrspaltenlayout an.
Divider Text	`ui.divider_text(label)`	Rendert einen beschrifteten Abschnittstrenner.
Accordion	`ui.accordion(title, &mut open, ...)`	Aufklappbarer Bereich für schrittweise eingeblendete Inhalte.

Text (4)

Widget	SLT-Funktion	Beschreibung
Text	`ui.text(value)`	Rendert einfachen Terminal-Text.
Markdown	`ui.markdown(value)`	Rendert Markdown mit SLT-Inline-Formatierung.
Link	`ui.link(label, url)`	Erstellt anklickbare Terminal-Hyperlinks (OSC 8).
Code Block	`ui.code_block(value)`	Zeigt syntaxformatierte Code-Ausschnitte.

Eingabe (11)

Widget	SLT-Funktion	Beschreibung
Text Input	`ui.text_input(&mut state)`	Einzeiliges Texteingabefeld.
Textarea	`ui.textarea(&mut state, rows)`	Mehrzeiliger Textbearbeitungsbereich.
Button	`ui.button(label)`	Anklickbarer Aktionsauslöser mit Variantenunterstützung.
Slider	`ui.slider(label, &mut value, min..=max)`	Passt einen numerischen Wert innerhalb eines Bereichs an.
Confirm	`ui.confirm(question, &mut state)`	Binäre Bestätigungsinteraktion.
Checkbox	`ui.checkbox(label, &mut checked)`	Boolescher Optionsschalter mit Häkchen-UI.
Toggle	`ui.toggle(label, &mut on)`	Boolesches Steuerelement im Schalter-Stil.
Select	`ui.select(&mut state)`	Einzelauswahl-Selektor im Dropdown-Stil.
Radio	`ui.radio(&mut state)`	Sich gegenseitig ausschließende Optionsgruppe.
Multi-Select	`ui.multi_select(&mut state)`	Wählt mehrere Optionen aus einer Liste aus.
Calendar	`ui.calendar(...)`

Daten (6)

Widget	SLT-Funktion	Beschreibung
Table	`ui.table(&mut state)`	Strukturierte Zeilen und Spalten mit Auswahlunterstützung.
List	`ui.list(&mut state)`	Vertikale auswählbare Liste für menüartige Abläufe.
Tree	`ui.tree(&mut state)`	Hierarchischer Viewer für aufklappbare Knoten.
Virtual List	`ui.virtual_list(&mut state, visible, ...)`	Virtualisierte Liste für große Datensätze.
Stat	`ui.stat(label, value)`	Kompakte Metrikkarte mit optionalen Trend- und Farbvarianten.
Def. List	`ui.definition_list(&[(term, value)])`	Ausgerichtete Schlüssel/Wert-Detailliste.

Navigation (5)

Widget	SLT-Funktion	Beschreibung
Tabs	`ui.tabs(&mut state)`	Tab-Navigation zwischen Inhaltsbereichen.
Cmd Palette	`ui.command_palette(&mut state)`	Durchsuchbares Befehlsstarter-Overlay.
Help Bar	`ui.help(&[(key, desc)])`	Untere Hilfsleiste für Tastenbelegungen.
Breadcrumb	`ui.breadcrumb(&[segments])`	Navigationspfad im Breadcrumb-Stil.
Key Hint	`ui.key_hint(key)`	Inline-Tastaturhinweis-Chip.

Feedback (8)

Widget	SLT-Funktion	Beschreibung
Progress	`ui.progress(value)`	Minimaler Fortschrittsanzeiger.
Progress Bar	`ui.progress_bar(value, width)`	Fortschrittsbalken mit steuerbarer Breite.
Spinner	`ui.spinner(&state)`	Animierter Ladeindikator.
Toast	`ui.toast(&mut state)`	Zeitgesteuerte Benachrichtigungsreihe.
Tooltip	`ui.tooltip(...)`
Alert	`ui.alert(message, level)`	Inline-Hinweisbanner mit Schweregrad.
Badge	`ui.badge(label)`	Kompaktes Status- oder Metadaten-Label.
Empty State	`ui.empty_state(title, subtitle)`	Platzhalterinhalt für leere Ansichten.

Datenvisualisierung (7)

Widget	SLT-Funktion	Beschreibung
Bar Chart	`ui.bar_chart(&[(label, value)], h)`	Vergleichende kategorische Balkenvisualisierung.
Sparkline	`ui.sparkline(&values, width)`	Kleines Inline-Trenddiagramm.
Chart	`ui.chart(builder, w, h)`	Konfigurierbarer Diagramm-Builder für mehrere Datenreihen.
Candlestick	`ui.candlestick(&candles, up, down)`	OHLC-Marktdiagramm-Rendering.
Heatmap	`ui.heatmap(&grid, w, h, low, high)`	Farbintensitäts-Matrix-Visualisierung.
Scatter	`ui.scatter(&points, w, h)`	Stellt Punktverteilungen auf zwei Achsen dar.
Histogram	`ui.histogram(&values, w, h)`	Häufigkeitsverteilungs-Buckets.

Overlay (2)

Widget	SLT-Funktion	Beschreibung
Modal	`ui.modal(\|ui\| { ... })`	Abgedunkelter Overlay-Dialog.
Overlay	`ui.overlay(\|ui\| { ... })`	Schwebende Inhaltsebene ohne Abdunkelung.

KI (3)

Widget	SLT-Funktion	Beschreibung
Streaming Text	`ui.streaming_text(&mut state)`	Token-für-Token-Textstrom-Ausgabe.
Stream MD	`ui.streaming_markdown(&mut state)`	Streaming-Markdown-Renderer.
Context Bar	`ui.context_bar(&items)`	Kontext-Token/Quell-Chips für KI-Workflows.

Formular (1)

Widget	SLT-Funktion	Beschreibung
Form Field	`ui.form_field(&mut field)`	Komponierbares Formulareingabefeld.

Medien (2)

Widget	SLT-Funktion	Beschreibung
Sixel Image	`ui.sixel_image(...)`
Image	`ui.image(&img)`	Halbblock-Bild-Rendering aus RGBA-Daten.

Code-Generierung

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

Beispiel: Container + Text + Button

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

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.12"

Hinweis: Rust und Cargo müssen installiert sein. Der gesamte generierte Code zielt auf SLT v0.12.x 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 20 Templates für Dashboards, Formulare, Navigationsabläufe und Betriebswerkzeuge.

/templates durchsuchen /editor öffnen

Tastaturkürzel

`q`	Beenden in generierten TUI-Apps.
`Tab`	Fokus zum nächsten Widget verschieben.
`Enter`	Fokussierte Steuerelemente auswählen oder aktivieren.
`Ctrl+C`	App sofort beenden.

Unterstützte Frameworks

tui.builders generiert derzeit Code für SuperLightTUI. Wir planen, auf weitere TUI-Ökosysteme zu erweitern.

Unterstützt

SuperLightTUI (Rust)

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

Als Nächstes

Ink (TypeScript)

React-basiertes Terminal-UI-Framework von Vadim Demedes

Geplant

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