문서
tui.builders는 터미널 인터페이스를 설계하는 비주얼 드래그 앤 드롭 에디터입니다. 현재는 SuperLightTUI(SLT)용 프로덕션 준비 Rust 코드를 생성하며, 추가 프레임워크 지원도 예정되어 있습니다.
사용 방법
- 에디터를 엽니다.
- 템플릿을 고르거나 빈 프로젝트에서 시작합니다.
- 팔레트에서 위젯을 추가합니다.
- 인스펙터에서 props, 레이아웃, 스타일을 조정합니다.
- 생성된 Rust 코드를 내보냅니다.
사전 준비: Rust를 설치하고 cargo 가 쉘에서 사용 가능해야 합니다.
에디터 가이드
팔레트
위젯을 트리에 드래그하거나 클릭해서 현재 선택 위치에 삽입합니다.
캔버스
현재 위젯 트리를 실시간으로 보여주는 터미널 프리뷰입니다.
인스펙터
한 곳에서 위젯 props, flex 레이아웃 값, 스타일 토큰을 편집합니다.
코드 프리뷰
편집 중 생성되는 Rust 코드 변경을 실시간으로 확인합니다.
내보내기
Cargo 프로젝트 zip으로 다운로드하거나 단일 .rs 파일로 내보내거나 클립보드로 복사합니다.
위젯 카탈로그
사용 가능한 모든 위젯을 카테고리별로 정리했습니다.
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. |
코드 생성
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"템플릿
tui.builders는 대시보드, 폼, 내비게이션 플로우, 운영 도구를 포함한 19개의 템플릿을 제공합니다.
키보드 단축키
q | 생성된 TUI 앱에서 종료합니다. |
Tab | 다음 위젯으로 포커스를 이동합니다. |
Enter | 포커스된 컨트롤을 선택하거나 활성화합니다. |
Ctrl+C | 앱을 즉시 종료합니다. |
지원 프레임워크
tui.builders는 현재 SuperLightTUI 코드를 생성하며, 다른 TUI 생태계로 확장할 예정입니다.
즉시 모드, zero-unsafe, flexbox 레이아웃, 50+ 위젯, 테마, 애니메이션, AI 네이티브 위젯
Vadim Demedes가 만든 React 기반 터미널 UI 프레임워크