ドキュメント

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)