❯ tui.builders

ターミナルUIを
Webのように作る

SuperLightTUI搭載 — unsafeを使わない即時モードRust TUIライブラリ。50+ウィジェット、ライブプレビュー、本番コードをエクスポート。Ink (TypeScript) にも対応。

$cargo add superlighttui

作成を始めるテンプレートを見る ->

無料・サインアップ不要・オープンソース

tui.builders/editor

dashboard.rs

● NORMAL65×22SLT v0.16.0UTF-8

プロパティ

幅

方向

col

row

ボーダー

rounded

パディング

50+ウィジェット

テンプレート

よく使うTUIパターン向けの事前構築レイアウト。エディタで開いて調整し、エクスポートできます。

すべて見る

dashboard.rs

ダッシュボード

ゲージ・チャート・テーブルを含むマルチパネルレイアウト

カウンター

フォーム

50+ ウィジェット7 テーマ出力 < 2MB

ワークフロー

01. 設計

02. 設定

let mut ui = Context::new();
ui.col(|ui| {
  ui.text("Hello");
});

03. エクスポート

✓コンパイル完了

0.42秒で完了

04. 実行

仕組み

1つのエディタに4つの機能。視覚的に設計し、プロパティを確認し、Rustへ出力し、テーマを切り替えます。

ウィジェット

text

button

input

list

table

tabs

progress

gauge

sparkline

checkbox

toggle

select

+11 さらに

キャンバス

ライブ

パレットからキャンバスへウィジェットをドラッグします。コンテナをネストして複雑なレイアウトも作成できます。

プレビュー

プロパティ

タイプ

container

名前

カウンター

方向

col

row

間隔

パディング

ボーダー

rounded&blacktriangledown;

各ウィジェットのAPIはすべて視覚的なコントロールとして利用できます。方向、余白、色、ボーダーまで編集可能です。

counter.rsSLT v0.16.0

use slt::{Context, Border, Color};

fn main() -> std::io::Result<()> {
    let mut count: i32 = 0;
    slt::run(|ui: &mut Context| {
        if ui.key('q') { ui.quit(); }
        if ui.key('k') { count += 1; }

        ui.bordered(Border::Rounded)
          .pad(1).gap(1).col(|ui| {
            ui.text("Counter")
              .bold().fg(Color::Cyan);
            ui.row(|ui| {
                ui.text("Count:");
                ui.text(format!("{count}"))
                  .bold().fg(Color::Green);
            });
        });
    })
}

$cargo run&check; 問題なくコンパイルできます

生成コードは実際のSuperLightTUI APIを使用します。コピーしてプロジェクトに貼り付け、cargo runで実行できます。

Dark

Catppuccin

Tokyo

Dracula

Nord

Gruvbox

Solarized

SLTライブラリに含まれる7つのテーマを搭載。ワンクリックで切り替え、即座にプレビューできます。

tui.builders で作られた例

dashboard.rs

ダッシュボード

system-monitor.rs

システムモニター

chat-app.rs

チャットアプリケーション

file-browser.rs

ファイルエクスプローラー

基盤: SuperLightTUI - 即時モードのRust TUIフレームワーク。依存は2つ、unsafeはゼロ、60fpsレンダーループ。

50+ウィジェット

7テーマ

2依存

0unsafe

60fps

Ink (TypeScript) Beta

Same visual editor, same drag-and-drop. Export as a React-based terminal app powered by Ink.

44 widgets · ink v6 · TypeScript

Try Ink Editor

App.tsxInk v6

import React from 'react';
import { render, Box, Text, useApp } from 'ink';

function App() {
  const { exit } = useApp();

  return (
    <Box flexDirection="column" padding={1}
         borderStyle="round" borderColor="cyan">
      <Text bold color="green">
        Hello from tui.builders
      </Text>
      <Text dimColor>
        Press q to quit
      </Text>
    </Box>
  );
}

render(<App />);

ひとつのビルダー、すべてのTUIフレームワーク

一度デザインして、お好みのスタックにエクスポート。SuperLightTUIから始まり、さらに多くのフレームワークに対応予定。