문서

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

사용 방법

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

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

에디터 가이드

팔레트

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

캔버스

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

인스펙터

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

코드 프리뷰

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

내보내기

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

위젯 카탈로그

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

레이아웃 (8)

위젯SLT 함수설명프레임워크
Containerui.container().col(...) / ui.row(...)테두리, 간격, 레이아웃 제어를 갖춘 유연한 부모 컨테이너입니다.SLTInk
Spacerui.spacer()남은 공간을 채워 주변 콘텐츠를 정렬합니다.SLTInk
Separatorui.separator()수평 구분선을 그립니다.SLTInk
Scrollableui.scrollable(&mut state)높이가 긴 콘텐츠 영역에 스크롤 동작을 추가합니다.SLTInk
Screenui.screen(...)SLT
Gridui.grid(cols, ...)자식 요소를 반응형 다중 열 레이아웃으로 배치합니다.SLTInk
Divider Textui.divider_text(label)레이블이 있는 섹션 구분선을 렌더링합니다.SLTInk
Accordionui.accordion(title, &mut open, ...)점진적으로 내용을 펼쳐 보이는 확장 가능한 섹션입니다.SLTInk

텍스트 (4)

위젯SLT 함수설명프레임워크
Textui.text(value)일반 터미널 텍스트를 렌더링합니다.SLTInk
Markdownui.markdown(value)SLT 인라인 포맷팅으로 마크다운을 렌더링합니다.SLTInk
Linkui.link(label, url)클릭 가능한 터미널 하이퍼링크를 생성합니다 (OSC 8).SLTInk
Code Blockui.code_block(value)구문 강조된 코드 스니펫을 표시합니다.SLTInk

입력 (11)

위젯SLT 함수설명프레임워크
Text Inputui.text_input(&mut state)한 줄 텍스트 입력 필드입니다.SLTInk
Textareaui.textarea(&mut state, rows)여러 줄 텍스트 편집 영역입니다.SLTInk
Buttonui.button(label)variant를 지원하는 클릭 가능한 액션 트리거입니다.SLTInk
Sliderui.slider(label, &mut value, min..=max)범위 내에서 숫자 값을 조정합니다.SLTInk
Confirmui.confirm(question, &mut state)이진 확인 인터랙션입니다.SLTInk
Checkboxui.checkbox(label, &mut checked)체크마크 UI가 있는 불리언 옵션 토글입니다.SLTInk
Toggleui.toggle(label, &mut on)스위치 스타일의 불리언 컨트롤입니다.SLTInk
Selectui.select(&mut state)드롭다운 스타일의 단일 선택 셀렉터입니다.SLTInk
Radioui.radio(&mut state)상호 배타적인 옵션 세트입니다.SLTInk
Multi-Selectui.multi_select(&mut state)목록에서 여러 옵션을 선택합니다.SLTInk
Calendarui.calendar(...)SLT

데이터 (8)

위젯SLT 함수설명프레임워크
Tableui.table(&mut state)선택 기능을 갖춘 구조화된 행과 열입니다.SLTInk
Listui.list(&mut state)메뉴형 흐름을 위한 세로 방향 선택 가능한 목록입니다.SLTInk
Treeui.tree(&mut state)계층적으로 확장 가능한 노드 뷰어입니다.SLTInk
Dir Treeui.directory_tree(...)SLT
File Pickerui.file_picker(...)SLT
Virtual Listui.virtual_list(&mut state, visible, ...)대용량 데이터셋을 위한 가상화 목록입니다.SLT
Statui.stat(label, value)선택적 트렌드 및 색상 variant를 갖춘 간결한 지표 카드입니다.SLTInk
Def. Listui.definition_list(&[(term, value)])정렬된 키/값 상세 목록입니다.SLTInk

내비게이션 (5)

위젯SLT 함수설명프레임워크
Tabsui.tabs(&mut state)콘텐츠 패널 간 탭 내비게이션입니다.SLTInk
Cmd Paletteui.command_palette(&mut state)검색 가능한 커맨드 실행 오버레이입니다.SLT
Help Barui.help(&[(key, desc)])키 바인딩을 위한 하단 도움말 바입니다.SLTInk
Breadcrumbui.breadcrumb(&[segments])경로 스타일의 내비게이션 트레일입니다.SLTInk
Key Hintui.key_hint(key)인라인 키보드 힌트 칩입니다.SLTInk

피드백 (10)

위젯SLT 함수설명프레임워크
Progressui.progress(value)최소한의 진행률 표시기입니다.SLTInk
Progress Barui.progress_bar(value, width)너비로 제어하는 진행률 바입니다.SLTInk
Spinnerui.spinner(&state)애니메이션 로딩 인디케이터입니다.SLTInk
Toastui.toast(&mut state)시간 제한이 있는 알림 스택입니다.SLTInk
Timerui.timer_display(...)SLT
Rich Logui.rich_log(...)SLT
Tooltipui.tooltip(...)SLTInk
Alertui.alert(message, level)인라인 심각도 콜아웃 배너입니다.SLTInk
Badgeui.badge(label)간결한 상태 또는 메타데이터 레이블입니다.SLTInk
Empty Stateui.empty_state(title, subtitle)빈 화면을 위한 플레이스홀더 콘텐츠입니다.SLTInk

데이터 시각화 (7)

위젯SLT 함수설명프레임워크
Bar Chartui.bar_chart(&[(label, value)], h)범주형 비교 막대 시각화입니다.SLTInk
Sparklineui.sparkline(&values, width)작은 인라인 트렌드 그래프입니다.SLTInk
Chartui.chart(builder, w, h)여러 시리즈를 위한 설정 가능한 차트 빌더입니다.SLT
Candlestickui.candlestick(&candles, up, down)OHLC 시장 스타일 차트 렌더링입니다.SLT
Heatmapui.heatmap(&grid, w, h, low, high)색상 강도 매트릭스 시각화입니다.SLT
Scatterui.scatter(&points, w, h)두 축에 점 분포를 플롯합니다.SLT
Histogramui.histogram(&values, w, h)빈도 분포 버킷입니다.SLT

오버레이 (2)

위젯SLT 함수설명프레임워크
Modalui.modal(|ui| { ... })어두운 오버레이 다이얼로그 레이어입니다.SLTInk
Overlayui.overlay(|ui| { ... })어둡게 처리하지 않는 플로팅 콘텐츠 레이어입니다.SLTInk

AI (3)

위젯SLT 함수설명프레임워크
Streaming Textui.streaming_text(&mut state)토큰 단위 텍스트 스트림 출력입니다.SLT
Stream MDui.streaming_markdown(&mut state)스트리밍 마크다운 렌더러입니다.SLT
Context Barui.context_bar(&items)AI 워크플로우를 위한 컨텍스트 토큰/소스 칩입니다.SLTInk

(1)

위젯SLT 함수설명프레임워크
Form Fieldui.form_field(&mut field)조합 가능한 폼 입력 필드 단위입니다.SLTInk

미디어 (2)

위젯SLT 함수설명프레임워크
Sixel Imageui.sixel_image(...)SLT
Imageui.image(&img)RGBA 데이터로부터 하프 블록 이미지를 렌더링합니다.SLT

코드 생성

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

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

코드 실행하기

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.17.1"
참고: Rust와 Cargo가 설치되어 있어야 합니다. 모든 생성 코드는 SLT v0.17.1 대상이며 자동 테스트로 컴파일이 검증됩니다. 실행 중인 TUI 앱에서 q를 눌러 종료하세요.

템플릿

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

키보드 단축키

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

지원 프레임워크

tui.builders는 여러 TUI 프레임워크용 코드를 생성합니다. SuperLightTUI는 정식 지원되며, Ink는 베타로 제공됩니다.

지원 중
SuperLightTUI (Rust) · v0.17.1

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

베타
Ink (TypeScript) · v6

Vadim Demedes가 만든 React 기반 터미널 UI 프레임워크. 37개 이상의 위젯과 함께 베타로 제공됩니다.

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