문서

tui.builders는 터미널 인터페이스를 설계하는 비주얼 드래그 앤 드롭 에디터입니다. 현재는 SuperLightTUI(SLT)용 프로덕션 준비 Rust 코드를 생성하며, 추가 프레임워크 지원도 예정되어 있습니다.

사용 방법

  1. 에디터를 엽니다.
  2. 템플릿을 고르거나 빈 프로젝트에서 시작합니다.
  3. 팔레트에서 위젯을 추가합니다.
  4. 인스펙터에서 props, 레이아웃, 스타일을 조정합니다.
  5. 생성된 Rust 코드를 내보냅니다.

사전 준비: Rust를 설치하고 cargo 가 쉘에서 사용 가능해야 합니다.

에디터 가이드

팔레트

위젯을 트리에 드래그하거나 클릭해서 현재 선택 위치에 삽입합니다.

캔버스

현재 위젯 트리를 실시간으로 보여주는 터미널 프리뷰입니다.

인스펙터

한 곳에서 위젯 props, flex 레이아웃 값, 스타일 토큰을 편집합니다.

코드 프리뷰

편집 중 생성되는 Rust 코드 변경을 실시간으로 확인합니다.

내보내기

Cargo 프로젝트 zip으로 다운로드하거나 단일 .rs 파일로 내보내거나 클립보드로 복사합니다.

위젯 카탈로그

사용 가능한 모든 위젯을 카테고리별로 정리했습니다.

Layout (7)

WidgetSLT FunctionDescription
Containerui.container().col(...) / ui.row(...)Flexible parent container with border, spacing, and layout controls.
Spacerui.spacer()Consumes remaining space to align surrounding content.
Separatorui.separator()Draws a horizontal divider line.
Scrollableui.scrollable(&mut state)Adds scroll behavior to tall content regions.
Gridui.grid(cols, ...)Places children into a responsive multi-column layout.
Divider Textui.divider_text(label)Renders a labeled section divider.
Accordionui.accordion(title, &mut open, ...)Expandable section for progressively revealed content.

Text (4)

WidgetSLT FunctionDescription
Textui.text(value)Renders plain terminal text.
Markdownui.markdown(value)Renders markdown with SLT inline formatting.
Linkui.link(label, url)Creates clickable terminal hyperlinks (OSC 8).
Code Blockui.code_block(value)Shows syntax-styled code snippets.

Input (10)

WidgetSLT FunctionDescription
Text Inputui.text_input(&mut state)Single-line text entry field.
Textareaui.textarea(&mut state, rows)Multi-line text editing area.
Buttonui.button(label)Clickable action trigger with variant support.
Sliderui.slider(label, &mut value, min..=max)Adjusts a numeric value over a range.
Confirmui.confirm(question, &mut state)Binary confirmation interaction.
Checkboxui.checkbox(label, &mut checked)Boolean option toggle with checkmark UI.
Toggleui.toggle(label, &mut on)Switch-style boolean control.
Selectui.select(&mut state)Dropdown-style single choice selector.
Radioui.radio(&mut state)Mutually exclusive option set.
Multi-Selectui.multi_select(&mut state)Selects multiple options from a list.

Data (6)

WidgetSLT FunctionDescription
Tableui.table(&mut state)Structured rows and columns with selection support.
Listui.list(&mut state)Vertical selectable list for menu-like flows.
Treeui.tree(&mut state)Hierarchical expandable node viewer.
Virtual Listui.virtual_list(&mut state, visible, ...)Virtualized list for large datasets.
Statui.stat(label, value)Compact metric card with optional trend/color variants.
Def. Listui.definition_list(&[(term, value)])Aligned key/value detail list.

Navigation (5)

WidgetSLT FunctionDescription
Tabsui.tabs(&mut state)Tabbed navigation across content panes.
Cmd Paletteui.command_palette(&mut state)Searchable command launcher overlay.
Help Barui.help(&[(key, desc)])Bottom helper bar for key bindings.
Breadcrumbui.breadcrumb(&[segments])Path-style navigation trail.
Key Hintui.key_hint(key)Inline keyboard hint chip.

Feedback (7)

WidgetSLT FunctionDescription
Progressui.progress(value)Minimal progress meter.
Progress Barui.progress_bar(value, width)Width-controlled progress bar.
Spinnerui.spinner(&state)Animated loading indicator.
Toastui.toast(&mut state)Timed notification stack.
Alertui.alert(message, level)Inline severity callout banner.
Badgeui.badge(label)Compact status or metadata label.
Empty Stateui.empty_state(title, subtitle)Placeholder content for empty screens.

DataViz (7)

WidgetSLT FunctionDescription
Bar Chartui.bar_chart(&[(label, value)], h)Comparative categorical bar visualization.
Sparklineui.sparkline(&values, width)Tiny inline trend graph.
Chartui.chart(builder, w, h)Configurable chart builder for multiple series.
Candlestickui.candlestick(&candles, up, down)OHLC market-style chart rendering.
Heatmapui.heatmap(&grid, w, h, low, high)Color-intensity matrix visualization.
Scatterui.scatter(&points, w, h)Plots point distributions on two axes.
Histogramui.histogram(&values, w, h)Frequency distribution buckets.

Overlay (2)

WidgetSLT FunctionDescription
Modalui.modal(|ui| { ... })Dimmed overlay dialog layer.
Overlayui.overlay(|ui| { ... })Floating content layer without dimming.

AI (3)

WidgetSLT FunctionDescription
Streaming Textui.streaming_text(&mut state)Token-by-token text stream output.
Stream MDui.streaming_markdown(&mut state)Streaming markdown renderer.
Context Barui.context_bar(&items)Context token/source chips for AI workflows.

Form (1)

WidgetSLT FunctionDescription
Form Fieldui.form_field(&mut field)Composable form input field unit.

Media (1)

WidgetSLT FunctionDescription
Imageui.image(&img)Half-block image rendering from RGBA data.

코드 생성

tui.builders는 generateRustCode()를 통해 에디터 트리를 Rust로 변환하고, slt::run_with() 및 RunConfig를 사용하는 SLT v0.12.x 대상 main.rs를 생성합니다.

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

코드 실행하기

tui.builders에서 생성한 코드는 SuperLightTUI에서 바로 컴파일됩니다. 실행 방법은 다음과 같습니다.

방법 1: Cargo 프로젝트로 내보내기 (.zip)

에디터 툴바에서 Export → Cargo Project를 클릭하세요. 압축 해제 후 실행:

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

방법 2: .rs 파일로 내보내기

Export → .rs File을 클릭하세요. Cargo 프로젝트를 직접 만들어서 실행:

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

방법 3: 클립보드에 복사

Export → Copy를 클릭하세요. superlighttui 의존성이 있는 기존 Cargo 프로젝트에 붙여넣기하세요.

# In your Cargo.toml:
[dependencies]
superlighttui = "0.12"
참고: Rust와 Cargo가 설치되어 있어야 합니다. 모든 생성 코드는 SLT v0.12.x 대상이며 자동 테스트로 컴파일이 검증됩니다. 실행 중인 TUI 앱에서 q를 눌러 종료하세요.

템플릿

tui.builders는 대시보드, 폼, 내비게이션 플로우, 운영 도구를 포함한 19개의 템플릿을 제공합니다.

키보드 단축키

q생성된 TUI 앱에서 종료합니다.
Tab다음 위젯으로 포커스를 이동합니다.
Enter포커스된 컨트롤을 선택하거나 활성화합니다.
Ctrl+C앱을 즉시 종료합니다.

지원 프레임워크

tui.builders는 현재 SuperLightTUI 코드를 생성하며, 다른 TUI 생태계로 확장할 예정입니다.

지원 중
SuperLightTUI (Rust)

즉시 모드, zero-unsafe, flexbox 레이아웃, 50+ 위젯, 테마, 애니메이션, AI 네이티브 위젯

다음 지원
Ink (TypeScript)

Vadim Demedes가 만든 React 기반 터미널 UI 프레임워크

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