Documentation

tui.builders is a visual drag-and-drop editor for designing terminal interfaces. It currently generates production-ready Rust code for SuperLightTUI (SLT), with additional framework support planned.

How to use

Open the editor.
Pick a template or start from a blank project.
Add widgets from the palette.
Customize props, layout, and style in the inspector.
Export generated Rust code.

Prerequisites: Install Rust and ensure cargo is available in your shell.

Editor Guide

Palette

Drag widgets into the tree or click to insert at the current selection.

Canvas

Live visual terminal preview of your current widget tree.

Inspector

Edit widget props, flex layout values, and style tokens in one place.

Code Preview

See generated Rust updates in real time while editing.

Export

Download as a Cargo project zip, export a single .rs file, or copy code to clipboard.

Widget Catalog

All available widgets grouped by category.

Layout (7)

Widget	SLT Function	Description
Container	`ui.container().col(...) / ui.row(...)`	Flexible parent container with border, spacing, and layout controls.
Spacer	`ui.spacer()`	Consumes remaining space to align surrounding content.
Separator	`ui.separator()`	Draws a horizontal divider line.
Scrollable	`ui.scrollable(&mut state)`	Adds scroll behavior to tall content regions.
Grid	`ui.grid(cols, ...)`	Places children into a responsive multi-column layout.
Divider Text	`ui.divider_text(label)`	Renders a labeled section divider.
Accordion	`ui.accordion(title, &mut open, ...)`	Expandable section for progressively revealed content.

Text (4)

Widget	SLT Function	Description
Text	`ui.text(value)`	Renders plain terminal text.
Markdown	`ui.markdown(value)`	Renders markdown with SLT inline formatting.
Link	`ui.link(label, url)`	Creates clickable terminal hyperlinks (OSC 8).
Code Block	`ui.code_block(value)`	Shows syntax-styled code snippets.

Input (10)

Widget	SLT Function	Description
Text Input	`ui.text_input(&mut state)`	Single-line text entry field.
Textarea	`ui.textarea(&mut state, rows)`	Multi-line text editing area.
Button	`ui.button(label)`	Clickable action trigger with variant support.
Slider	`ui.slider(label, &mut value, min..=max)`	Adjusts a numeric value over a range.
Confirm	`ui.confirm(question, &mut state)`	Binary confirmation interaction.
Checkbox	`ui.checkbox(label, &mut checked)`	Boolean option toggle with checkmark UI.
Toggle	`ui.toggle(label, &mut on)`	Switch-style boolean control.
Select	`ui.select(&mut state)`	Dropdown-style single choice selector.
Radio	`ui.radio(&mut state)`	Mutually exclusive option set.
Multi-Select	`ui.multi_select(&mut state)`	Selects multiple options from a list.

Data (6)

Widget	SLT Function	Description
Table	`ui.table(&mut state)`	Structured rows and columns with selection support.
List	`ui.list(&mut state)`	Vertical selectable list for menu-like flows.
Tree	`ui.tree(&mut state)`	Hierarchical expandable node viewer.
Virtual List	`ui.virtual_list(&mut state, visible, ...)`	Virtualized list for large datasets.
Stat	`ui.stat(label, value)`	Compact metric card with optional trend/color variants.
Def. List	`ui.definition_list(&[(term, value)])`	Aligned key/value detail list.

Navigation (5)

Widget	SLT Function	Description
Tabs	`ui.tabs(&mut state)`	Tabbed navigation across content panes.
Cmd Palette	`ui.command_palette(&mut state)`	Searchable command launcher overlay.
Help Bar	`ui.help(&[(key, desc)])`	Bottom helper bar for key bindings.
Breadcrumb	`ui.breadcrumb(&[segments])`	Path-style navigation trail.
Key Hint	`ui.key_hint(key)`	Inline keyboard hint chip.

Feedback (7)

Widget	SLT Function	Description
Progress	`ui.progress(value)`	Minimal progress meter.
Progress Bar	`ui.progress_bar(value, width)`	Width-controlled progress bar.
Spinner	`ui.spinner(&state)`	Animated loading indicator.
Toast	`ui.toast(&mut state)`	Timed notification stack.
Alert	`ui.alert(message, level)`	Inline severity callout banner.
Badge	`ui.badge(label)`	Compact status or metadata label.
Empty State	`ui.empty_state(title, subtitle)`	Placeholder content for empty screens.

DataViz (7)

Widget	SLT Function	Description
Bar Chart	`ui.bar_chart(&[(label, value)], h)`	Comparative categorical bar visualization.
Sparkline	`ui.sparkline(&values, width)`	Tiny inline trend graph.
Chart	`ui.chart(builder, w, h)`	Configurable chart builder for multiple series.
Candlestick	`ui.candlestick(&candles, up, down)`	OHLC market-style chart rendering.
Heatmap	`ui.heatmap(&grid, w, h, low, high)`	Color-intensity matrix visualization.
Scatter	`ui.scatter(&points, w, h)`	Plots point distributions on two axes.
Histogram	`ui.histogram(&values, w, h)`	Frequency distribution buckets.

Overlay (2)

Widget	SLT Function	Description
Modal	`ui.modal(\|ui\| { ... })`	Dimmed overlay dialog layer.
Overlay	`ui.overlay(\|ui\| { ... })`	Floating content layer without dimming.

AI (3)

Widget	SLT Function	Description
Streaming Text	`ui.streaming_text(&mut state)`	Token-by-token text stream output.
Stream MD	`ui.streaming_markdown(&mut state)`	Streaming markdown renderer.
Context Bar	`ui.context_bar(&items)`	Context token/source chips for AI workflows.

Form (1)

Widget	SLT Function	Description
Form Field	`ui.form_field(&mut field)`	Composable form input field unit.

Media (1)

Widget	SLT Function	Description
Image	`ui.image(&img)`	Half-block image rendering from RGBA data.

Code Generation

tui.builders transforms your editor tree into Rust through generateRustCode() and emits a ready-to-run main.rs targeting SLT v0.12.x with slt::run_with() and RunConfig.

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

Running Your Code

All code generated by tui.builders compiles directly against SuperLightTUI. Here's how to run it.

Option 1: Export as Cargo project (.zip)

Click Export → Cargo Project in the editor toolbar. Unzip and run:

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

Option 2: Export as .rs file

Click Export → .rs File. Create a Cargo project manually:

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

Option 3: Copy to clipboard

Click Export → Copy. Paste into an existing Cargo project with superlighttui as a dependency.

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

Note: Rust and Cargo must be installed. All generated code targets SLT v0.12.x and is verified to compile via automated testing. Press q to quit the running TUI app.

Templates

tui.builders ships with 19 templates spanning dashboards, forms, navigation flows, and operational tooling.

Browse /templates Open /editor

Keyboard Shortcuts

`q`	Quit in generated TUI apps.
`Tab`	Move focus to the next widget.
`Enter`	Select or activate focused controls.
`Ctrl+C`	Exit the app immediately.

Supported Frameworks

tui.builders currently generates code for SuperLightTUI. We plan to expand to other TUI ecosystems.

Supported

SuperLightTUI (Rust)

Immediate-mode, zero-unsafe, flexbox layout, 50+ widgets, theming, animation, AI-native widgets

Up Next

Ink (TypeScript)

React-based terminal UI framework by Vadim Demedes

Planned

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