❯ tui.builders

构建终端 UI
像搭建网站一样

基于 SuperLightTUI — zero-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. 运行

工作原理

一个编辑器集成四种能力：可视化设计、属性检查、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

内置 7 套 SLT 主题。一次点击即可切换并立即预览。

使用 tui.builders 构建

dashboard.rs

仪表盘

system-monitor.rs

系统监控

chat-app.rs

聊天应用

file-browser.rs

文件浏览器

基于 SuperLightTUI - 即时模式 Rust TUI 框架。仅 2 个依赖，0 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 开始，更多框架即将支持。