Documentación

tui.builders es un editor visual de arrastrar y soltar para diseñar interfaces de terminal. Actualmente genera código Rust listo para producción para SuperLightTUI (SLT), con soporte para más frameworks planificado.

Cómo usarlo

  1. Abre el editor.
  2. Elige un template o empieza desde un proyecto en blanco.
  3. Añade widgets desde la paleta.
  4. Personaliza propiedades, diseño y estilo en el inspector.
  5. Exporta el código Rust generado.

Requisitos previos: Instala Rust y asegúrate de que cargo esté disponible en tu shell.

Guía del editor

Paleta

Arrastra widgets al árbol o haz clic para insertarlos en la selección actual.

Canvas

Vista previa visual del terminal en vivo de tu árbol de widgets actual.

Inspector

Edita propiedades de widgets, valores de diseño flex y tokens de estilo en un solo lugar.

Vista previa del código

Ve las actualizaciones del código Rust generado en tiempo real mientras editas.

Exportar

Descarga como proyecto Cargo (.zip), exporta un archivo .rs único, o copia el código al portapapeles.

Catálogo de widgets

Todos los widgets disponibles agrupados por categoría.

Diseño (8)

WidgetFunción SLTDescripciónFrameworks
Containerui.container().col(...) / ui.row(...)Contenedor padre flexible con borde, espaciado y controles de diseño.SLTInk
Spacerui.spacer()Consume el espacio restante para alinear el contenido circundante.SLTInk
Separatorui.separator()Dibuja una línea divisoria horizontal.SLTInk
Scrollableui.scrollable(&mut state)Añade comportamiento de desplazamiento a regiones de contenido extenso.SLTInk
Screenui.screen(...)SLT
Gridui.grid(cols, ...)Distribuye los hijos en un diseño de múltiples columnas adaptable.SLTInk
Divider Textui.divider_text(label)Renderiza un divisor de sección con etiqueta.SLTInk
Accordionui.accordion(title, &mut open, ...)Sección expandible para contenido revelado progresivamente.SLTInk

Texto (4)

WidgetFunción SLTDescripciónFrameworks
Textui.text(value)Renderiza texto plano en la terminal.SLTInk
Markdownui.markdown(value)Renderiza markdown con formato inline de SLT.SLTInk
Linkui.link(label, url)Crea hipervínculos clicables en la terminal (OSC 8).SLTInk
Code Blockui.code_block(value)Muestra fragmentos de código con resaltado de sintaxis.SLTInk

Entrada (11)

WidgetFunción SLTDescripciónFrameworks
Text Inputui.text_input(&mut state)Campo de entrada de texto de una sola línea.SLTInk
Textareaui.textarea(&mut state, rows)Área de edición de texto multilínea.SLTInk
Buttonui.button(label)Disparador de acción clicable con soporte de variantes.SLTInk
Sliderui.slider(label, &mut value, min..=max)Ajusta un valor numérico dentro de un rango.SLTInk
Confirmui.confirm(question, &mut state)Interacción de confirmación binaria.SLTInk
Checkboxui.checkbox(label, &mut checked)Opción booleana con UI de marca de verificación.SLTInk
Toggleui.toggle(label, &mut on)Control booleano estilo interruptor.SLTInk
Selectui.select(&mut state)Selector de opción única estilo desplegable.SLTInk
Radioui.radio(&mut state)Conjunto de opciones mutuamente excluyentes.SLTInk
Multi-Selectui.multi_select(&mut state)Selecciona múltiples opciones de una lista.SLTInk
Calendarui.calendar(...)SLT

Datos (8)

WidgetFunción SLTDescripciónFrameworks
Tableui.table(&mut state)Filas y columnas estructuradas con soporte de selección.SLTInk
Listui.list(&mut state)Lista vertical seleccionable para flujos tipo menú.SLTInk
Treeui.tree(&mut state)Visor jerárquico de nodos expandibles.SLTInk
Dir Treeui.directory_tree(...)SLT
File Pickerui.file_picker(...)SLT
Virtual Listui.virtual_list(&mut state, visible, ...)Lista virtualizada para conjuntos de datos grandes.SLT
Statui.stat(label, value)Tarjeta de métrica compacta con variantes opcionales de tendencia y color.SLTInk
Def. Listui.definition_list(&[(term, value)])Lista de detalles clave/valor alineados.SLTInk

Navegación (5)

WidgetFunción SLTDescripciónFrameworks
Tabsui.tabs(&mut state)Navegación por pestañas entre paneles de contenido.SLTInk
Cmd Paletteui.command_palette(&mut state)Superposición de lanzador de comandos con búsqueda.SLT
Help Barui.help(&[(key, desc)])Barra de ayuda inferior para atajos de teclado.SLTInk
Breadcrumbui.breadcrumb(&[segments])Rastro de navegación estilo ruta.SLTInk
Key Hintui.key_hint(key)Chip de atajo de teclado inline.SLTInk

Retroalimentación (10)

WidgetFunción SLTDescripciónFrameworks
Progressui.progress(value)Indicador de progreso mínimo.SLTInk
Progress Barui.progress_bar(value, width)Barra de progreso con ancho controlable.SLTInk
Spinnerui.spinner(&state)Indicador de carga animado.SLTInk
Toastui.toast(&mut state)Pila de notificaciones con temporizador.SLTInk
Timerui.timer_display(...)SLT
Rich Logui.rich_log(...)SLT
Tooltipui.tooltip(...)SLTInk
Alertui.alert(message, level)Banner de aviso inline con nivel de severidad.SLTInk
Badgeui.badge(label)Etiqueta compacta de estado o metadatos.SLTInk
Empty Stateui.empty_state(title, subtitle)Contenido de marcador para pantallas vacías.SLTInk

Visualización de datos (7)

WidgetFunción SLTDescripciónFrameworks
Bar Chartui.bar_chart(&[(label, value)], h)Visualización de barras comparativa por categorías.SLTInk
Sparklineui.sparkline(&values, width)Pequeño gráfico de tendencia inline.SLTInk
Chartui.chart(builder, w, h)Constructor de gráficos configurable para múltiples series.SLT
Candlestickui.candlestick(&candles, up, down)Renderizado de gráfico OHLC estilo mercado.SLT
Heatmapui.heatmap(&grid, w, h, low, high)Visualización de matriz por intensidad de color.SLT
Scatterui.scatter(&points, w, h)Representa distribuciones de puntos en dos ejes.SLT
Histogramui.histogram(&values, w, h)Intervalos de distribución de frecuencia.SLT

Superposición (2)

WidgetFunción SLTDescripciónFrameworks
Modalui.modal(|ui| { ... })Capa de diálogo con superposición oscurecida.SLTInk
Overlayui.overlay(|ui| { ... })Capa de contenido flotante sin oscurecimiento.SLTInk

IA (3)

WidgetFunción SLTDescripciónFrameworks
Streaming Textui.streaming_text(&mut state)Salida de texto en streaming token a token.SLT
Stream MDui.streaming_markdown(&mut state)Renderizador de markdown en streaming.SLT
Context Barui.context_bar(&items)Chips de token/fuente de contexto para flujos de IA.SLTInk

Formulario (1)

WidgetFunción SLTDescripciónFrameworks
Form Fieldui.form_field(&mut field)Unidad de campo de formulario composable.SLTInk

Multimedia (2)

WidgetFunción SLTDescripciónFrameworks
Sixel Imageui.sixel_image(...)SLT
Imageui.image(&img)Renderizado de imagen con semibloques a partir de datos RGBA.SLT

Generación de código

tui.builders transforma tu árbol del editor en Rust mediante generateRustCode() y emite un main.rs listo para ejecutar apuntando a SLT v0.17.1 con slt::run_with() y RunConfig.

Ejemplo: contenedor + texto + botón

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")]);
            });
        },
    )
}

Ejecutar tu código

Todo el código generado por tui.builders compila directamente contra SuperLightTUI. Así es como ejecutarlo.

Opción 1: Exportar como proyecto Cargo (.zip)

Haz clic en Export → Cargo Project en la barra de herramientas del editor. Descomprime y ejecuta:

unzip my-tui-app.zip
cd my-tui-app
cargo run

Opción 2: Exportar como archivo .rs

Haz clic en Export → .rs File. Crea un proyecto Cargo manualmente:

cargo new my-tui-app
cd my-tui-app
cargo add superlighttui
# Replace src/main.rs with your exported file
cargo run

Opción 3: Copiar al portapapeles

Haz clic en Export → Copy. Pega en un proyecto Cargo existente con superlighttui como dependencia.

# In your Cargo.toml:
[dependencies]
superlighttui = "0.17.1"
Nota: Rust y Cargo deben estar instalados. Todo el código generado apunta a SLT v0.17.1 y se verifica que compila mediante pruebas automatizadas. Presiona q para salir de la aplicación TUI en ejecución.

Templates

tui.builders incluye 25 templates que abarcan paneles, formularios, flujos de navegación y herramientas operativas.

Atajos de teclado

qSalir en aplicaciones TUI generadas.
TabDesplazar el foco al siguiente widget.
EnterSeleccionar o activar controles enfocados.
Ctrl+CSalir de la aplicación inmediatamente.

Frameworks compatibles

tui.builders genera código para múltiples frameworks TUI. SuperLightTUI tiene soporte completo e Ink está disponible en beta.

Compatible
SuperLightTUI (Rust) · v0.17.1

Modo inmediato, sin código unsafe, diseño flexbox, 50+ widgets, temas, animación, widgets nativos de IA

Beta
Ink (TypeScript) · v6

Framework de interfaz de terminal basado en React por Vadim Demedes. Disponible en beta con más de 37 widgets.

Planificado
Ratatui (Rust) · Textual (Python) · Bubbletea (Go)