文档

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，并输出可直接运行的 main.rs，目标为 SLT v0.12.x，使用 slt::run_with() 与 RunConfig。

示例: 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 个模板，覆盖仪表盘、表单、导航流程和运维工具场景。

浏览 /templates 打开 /editor

键盘快捷键

`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)