ドキュメント
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 フレームワーク