문서
tui.builders는 터미널 인터페이스를 설계하는 비주얼 드래그 앤 드롭 에디터입니다. 현재는 SuperLightTUI(SLT)용 프로덕션 준비 Rust 코드를 생성하며, 추가 프레임워크 지원도 예정되어 있습니다.
사용 방법
- 에디터를 엽니다.
- 템플릿을 고르거나 빈 프로젝트에서 시작합니다.
- 팔레트에서 위젯을 추가합니다.
- 인스펙터에서 속성, 레이아웃, 스타일을 조정합니다.
- 생성된 Rust 코드를 내보냅니다.
사전 준비: Rust를 설치하고 cargo 가 쉘에서 사용 가능해야 합니다.
에디터 가이드
팔레트
위젯을 트리에 드래그하거나 클릭해서 현재 선택 위치에 삽입합니다.
캔버스
현재 위젯 트리를 실시간으로 보여주는 터미널 프리뷰입니다.
인스펙터
한 곳에서 위젯 속성, flex 레이아웃 값, 스타일 토큰을 편집합니다.
코드 프리뷰
편집 중 생성되는 Rust 코드 변경을 실시간으로 확인합니다.
내보내기
Cargo 프로젝트 zip으로 다운로드하거나 단일 .rs 파일로 내보내거나 클립보드로 복사합니다.
위젯 카탈로그
사용 가능한 모든 위젯을 카테고리별로 정리했습니다.
레이아웃 (8)
| 위젯 | SLT 함수 | 설명 | 프레임워크 |
|---|---|---|---|
| Container | ui.container().col(...) / ui.row(...) | 테두리, 간격, 레이아웃 제어를 갖춘 유연한 부모 컨테이너입니다. | SLTInk |
| Spacer | ui.spacer() | 남은 공간을 채워 주변 콘텐츠를 정렬합니다. | SLTInk |
| Separator | ui.separator() | 수평 구분선을 그립니다. | SLTInk |
| Scrollable | ui.scrollable(&mut state) | 높이가 긴 콘텐츠 영역에 스크롤 동작을 추가합니다. | SLTInk |
| Screen | ui.screen(...) | SLT | |
| Grid | ui.grid(cols, ...) | 자식 요소를 반응형 다중 열 레이아웃으로 배치합니다. | SLTInk |
| Divider Text | ui.divider_text(label) | 레이블이 있는 섹션 구분선을 렌더링합니다. | SLTInk |
| Accordion | ui.accordion(title, &mut open, ...) | 점진적으로 내용을 펼쳐 보이는 확장 가능한 섹션입니다. | SLTInk |
텍스트 (4)
| 위젯 | SLT 함수 | 설명 | 프레임워크 |
|---|---|---|---|
| Text | ui.text(value) | 일반 터미널 텍스트를 렌더링합니다. | SLTInk |
| Markdown | ui.markdown(value) | SLT 인라인 포맷팅으로 마크다운을 렌더링합니다. | SLTInk |
| Link | ui.link(label, url) | 클릭 가능한 터미널 하이퍼링크를 생성합니다 (OSC 8). | SLTInk |
| Code Block | ui.code_block(value) | 구문 강조된 코드 스니펫을 표시합니다. | SLTInk |
입력 (11)
| 위젯 | SLT 함수 | 설명 | 프레임워크 |
|---|---|---|---|
| Text Input | ui.text_input(&mut state) | 한 줄 텍스트 입력 필드입니다. | SLTInk |
| Textarea | ui.textarea(&mut state, rows) | 여러 줄 텍스트 편집 영역입니다. | SLTInk |
| Button | ui.button(label) | variant를 지원하는 클릭 가능한 액션 트리거입니다. | SLTInk |
| Slider | ui.slider(label, &mut value, min..=max) | 범위 내에서 숫자 값을 조정합니다. | SLTInk |
| Confirm | ui.confirm(question, &mut state) | 이진 확인 인터랙션입니다. | SLTInk |
| Checkbox | ui.checkbox(label, &mut checked) | 체크마크 UI가 있는 불리언 옵션 토글입니다. | SLTInk |
| Toggle | ui.toggle(label, &mut on) | 스위치 스타일의 불리언 컨트롤입니다. | SLTInk |
| Select | ui.select(&mut state) | 드롭다운 스타일의 단일 선택 셀렉터입니다. | SLTInk |
| Radio | ui.radio(&mut state) | 상호 배타적인 옵션 세트입니다. | SLTInk |
| Multi-Select | ui.multi_select(&mut state) | 목록에서 여러 옵션을 선택합니다. | SLTInk |
| Calendar | ui.calendar(...) | SLT |
데이터 (8)
| 위젯 | SLT 함수 | 설명 | 프레임워크 |
|---|---|---|---|
| Table | ui.table(&mut state) | 선택 기능을 갖춘 구조화된 행과 열입니다. | SLTInk |
| List | ui.list(&mut state) | 메뉴형 흐름을 위한 세로 방향 선택 가능한 목록입니다. | SLTInk |
| Tree | ui.tree(&mut state) | 계층적으로 확장 가능한 노드 뷰어입니다. | SLTInk |
| Dir Tree | ui.directory_tree(...) | SLT | |
| File Picker | ui.file_picker(...) | SLT | |
| Virtual List | ui.virtual_list(&mut state, visible, ...) | 대용량 데이터셋을 위한 가상화 목록입니다. | SLT |
| Stat | ui.stat(label, value) | 선택적 트렌드 및 색상 variant를 갖춘 간결한 지표 카드입니다. | SLTInk |
| Def. List | ui.definition_list(&[(term, value)]) | 정렬된 키/값 상세 목록입니다. | SLTInk |
내비게이션 (5)
| 위젯 | SLT 함수 | 설명 | 프레임워크 |
|---|---|---|---|
| Tabs | ui.tabs(&mut state) | 콘텐츠 패널 간 탭 내비게이션입니다. | SLTInk |
| Cmd Palette | ui.command_palette(&mut state) | 검색 가능한 커맨드 실행 오버레이입니다. | SLT |
| Help Bar | ui.help(&[(key, desc)]) | 키 바인딩을 위한 하단 도움말 바입니다. | SLTInk |
| Breadcrumb | ui.breadcrumb(&[segments]) | 경로 스타일의 내비게이션 트레일입니다. | SLTInk |
| Key Hint | ui.key_hint(key) | 인라인 키보드 힌트 칩입니다. | SLTInk |
피드백 (10)
| 위젯 | SLT 함수 | 설명 | 프레임워크 |
|---|---|---|---|
| Progress | ui.progress(value) | 최소한의 진행률 표시기입니다. | SLTInk |
| Progress Bar | ui.progress_bar(value, width) | 너비로 제어하는 진행률 바입니다. | SLTInk |
| Spinner | ui.spinner(&state) | 애니메이션 로딩 인디케이터입니다. | SLTInk |
| Toast | ui.toast(&mut state) | 시간 제한이 있는 알림 스택입니다. | SLTInk |
| Timer | ui.timer_display(...) | SLT | |
| Rich Log | ui.rich_log(...) | SLT | |
| Tooltip | ui.tooltip(...) | SLTInk | |
| Alert | ui.alert(message, level) | 인라인 심각도 콜아웃 배너입니다. | SLTInk |
| Badge | ui.badge(label) | 간결한 상태 또는 메타데이터 레이블입니다. | SLTInk |
| Empty State | ui.empty_state(title, subtitle) | 빈 화면을 위한 플레이스홀더 콘텐츠입니다. | SLTInk |
데이터 시각화 (7)
| 위젯 | SLT 함수 | 설명 | 프레임워크 |
|---|---|---|---|
| Bar Chart | ui.bar_chart(&[(label, value)], h) | 범주형 비교 막대 시각화입니다. | SLTInk |
| Sparkline | ui.sparkline(&values, width) | 작은 인라인 트렌드 그래프입니다. | SLTInk |
| Chart | ui.chart(builder, w, h) | 여러 시리즈를 위한 설정 가능한 차트 빌더입니다. | SLT |
| Candlestick | ui.candlestick(&candles, up, down) | OHLC 시장 스타일 차트 렌더링입니다. | SLT |
| Heatmap | ui.heatmap(&grid, w, h, low, high) | 색상 강도 매트릭스 시각화입니다. | SLT |
| Scatter | ui.scatter(&points, w, h) | 두 축에 점 분포를 플롯합니다. | SLT |
| Histogram | ui.histogram(&values, w, h) | 빈도 분포 버킷입니다. | SLT |
오버레이 (2)
| 위젯 | SLT 함수 | 설명 | 프레임워크 |
|---|---|---|---|
| Modal | ui.modal(|ui| { ... }) | 어두운 오버레이 다이얼로그 레이어입니다. | SLTInk |
| Overlay | ui.overlay(|ui| { ... }) | 어둡게 처리하지 않는 플로팅 콘텐츠 레이어입니다. | SLTInk |
AI (3)
| 위젯 | SLT 함수 | 설명 | 프레임워크 |
|---|---|---|---|
| Streaming Text | ui.streaming_text(&mut state) | 토큰 단위 텍스트 스트림 출력입니다. | SLT |
| Stream MD | ui.streaming_markdown(&mut state) | 스트리밍 마크다운 렌더러입니다. | SLT |
| Context Bar | ui.context_bar(&items) | AI 워크플로우를 위한 컨텍스트 토큰/소스 칩입니다. | SLTInk |
폼 (1)
| 위젯 | SLT 함수 | 설명 | 프레임워크 |
|---|---|---|---|
| Form Field | ui.form_field(&mut field) | 조합 가능한 폼 입력 필드 단위입니다. | SLTInk |
미디어 (2)
| 위젯 | SLT 함수 | 설명 | 프레임워크 |
|---|---|---|---|
| Sixel Image | ui.sixel_image(...) | SLT | |
| Image | ui.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"템플릿
tui.builders는 대시보드, 폼, 내비게이션 플로우, 운영 도구를 포함한 25개의 템플릿을 제공합니다.
키보드 단축키
q | 생성된 TUI 앱을 종료합니다. |
Tab | 다음 위젯으로 포커스를 이동합니다. |
Enter | 포커스된 컨트롤을 선택하거나 활성화합니다. |
Ctrl+C | 앱을 즉시 종료합니다. |
지원 프레임워크
tui.builders는 여러 TUI 프레임워크용 코드를 생성합니다. SuperLightTUI는 정식 지원되며, Ink는 베타로 제공됩니다.
즉시 모드, unsafe 없는 설계, flexbox 레이아웃, 50+ 위젯, 테마, 애니메이션, AI 네이티브 위젯
Vadim Demedes가 만든 React 기반 터미널 UI 프레임워크. 37개 이상의 위젯과 함께 베타로 제공됩니다.