ドキュメント

tui.builders は、ターミナルインターフェースを設計するためのビジュアルなドラッグ&ドロップエディタです。現在は SuperLightTUI (SLT) 向けの本番対応 Rust コードを生成し、今後さらに多くのフレームワークに対応予定です。

使い方

  1. エディタを開きます。
  2. テンプレートを選ぶか、空のプロジェクトから開始します。
  3. パレットからウィジェットを追加します。
  4. インスペクタで props、レイアウト、スタイルを調整します。
  5. 生成された Rust コードをエクスポートします。

前提条件: Rustをインストールし、 cargo がシェルで利用可能であることを確認してください。

エディタガイド

パレット

ウィジェットをツリーへドラッグするか、クリックして現在の選択位置に挿入します。

キャンバス

現在のウィジェットツリーを表示するライブのターミナルプレビューです。

インスペクタ

ウィジェットの props、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)1行のテキスト入力フィールドです。SLTInk
Textareaui.textarea(&mut state, rows)複数行のテキスト編集エリアです。SLTInk
Buttonui.button(label)バリアントに対応したクリック可能なアクショントリガーです。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)トレンドや色のバリアントを選択できるコンパクトな指標カードです。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)2軸上に点の分布をプロットします。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)