ドキュメント
tui.builders は、ターミナルインターフェースを設計するためのビジュアルなドラッグ&ドロップエディタです。現在は SuperLightTUI (SLT) 向けの本番対応 Rust コードを生成し、今後さらに多くのフレームワークに対応予定です。
使い方
- エディタを開きます。
- テンプレートを選ぶか、空のプロジェクトから開始します。
- パレットからウィジェットを追加します。
- インスペクタで props、レイアウト、スタイルを調整します。
- 生成された Rust コードをエクスポートします。
前提条件: Rustをインストールし、 cargo がシェルで利用可能であることを確認してください。
エディタガイド
パレット
ウィジェットをツリーへドラッグするか、クリックして現在の選択位置に挿入します。
キャンバス
現在のウィジェットツリーを表示するライブのターミナルプレビューです。
インスペクタ
ウィジェットの props、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) | 1行のテキスト入力フィールドです。 | SLTInk |
| Textarea | ui.textarea(&mut state, rows) | 複数行のテキスト編集エリアです。 | SLTInk |
| Button | ui.button(label) | バリアントに対応したクリック可能なアクショントリガーです。 | 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) | トレンドや色のバリアントを選択できるコンパクトな指標カードです。 | 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) | 2軸上に点の分布をプロットします。 | 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 以上のウィジェットでベータ版として提供中。