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

Abre el editor.
Elige un template o empieza desde un proyecto en blanco.
Añade widgets desde la paleta.
Personaliza propiedades, diseño y estilo en el inspector.
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)

Widget	Función SLT	Descripción
Container	`ui.container().col(...) / ui.row(...)`	Contenedor padre flexible con borde, espaciado y controles de diseño.
Spacer	`ui.spacer()`	Consume el espacio restante para alinear el contenido circundante.
Separator	`ui.separator()`	Dibuja una línea divisoria horizontal.
Scrollable	`ui.scrollable(&mut state)`	Añade comportamiento de desplazamiento a regiones de contenido extenso.
Screen	`ui.screen(...)`
Grid	`ui.grid(cols, ...)`	Distribuye los hijos en un diseño de múltiples columnas adaptable.
Divider Text	`ui.divider_text(label)`	Renderiza un divisor de sección con etiqueta.
Accordion	`ui.accordion(title, &mut open, ...)`	Sección expandible para contenido revelado progresivamente.

Texto (4)

Widget	Función SLT	Descripción
Text	`ui.text(value)`	Renderiza texto plano en la terminal.
Markdown	`ui.markdown(value)`	Renderiza markdown con formato inline de SLT.
Link	`ui.link(label, url)`	Crea hipervínculos clicables en la terminal (OSC 8).
Code Block	`ui.code_block(value)`	Muestra fragmentos de código con resaltado de sintaxis.

Entrada (11)

Widget	Función SLT	Descripción
Text Input	`ui.text_input(&mut state)`	Campo de entrada de texto de una sola línea.
Textarea	`ui.textarea(&mut state, rows)`	Área de edición de texto multilínea.
Button	`ui.button(label)`	Disparador de acción clicable con soporte de variantes.
Slider	`ui.slider(label, &mut value, min..=max)`	Ajusta un valor numérico dentro de un rango.
Confirm	`ui.confirm(question, &mut state)`	Interacción de confirmación binaria.
Checkbox	`ui.checkbox(label, &mut checked)`	Opción booleana con UI de marca de verificación.
Toggle	`ui.toggle(label, &mut on)`	Control booleano estilo interruptor.
Select	`ui.select(&mut state)`	Selector de opción única estilo desplegable.
Radio	`ui.radio(&mut state)`	Conjunto de opciones mutuamente excluyentes.
Multi-Select	`ui.multi_select(&mut state)`	Selecciona múltiples opciones de una lista.
Calendar	`ui.calendar(...)`

Datos (6)

Widget	Función SLT	Descripción
Table	`ui.table(&mut state)`	Filas y columnas estructuradas con soporte de selección.
List	`ui.list(&mut state)`	Lista vertical seleccionable para flujos tipo menú.
Tree	`ui.tree(&mut state)`	Visor jerárquico de nodos expandibles.
Virtual List	`ui.virtual_list(&mut state, visible, ...)`	Lista virtualizada para conjuntos de datos grandes.
Stat	`ui.stat(label, value)`	Tarjeta de métrica compacta con variantes opcionales de tendencia y color.
Def. List	`ui.definition_list(&[(term, value)])`	Lista de detalles clave/valor alineados.

Navegación (5)

Widget	Función SLT	Descripción
Tabs	`ui.tabs(&mut state)`	Navegación por pestañas entre paneles de contenido.
Cmd Palette	`ui.command_palette(&mut state)`	Superposición de lanzador de comandos con búsqueda.
Help Bar	`ui.help(&[(key, desc)])`	Barra de ayuda inferior para atajos de teclado.
Breadcrumb	`ui.breadcrumb(&[segments])`	Rastro de navegación estilo ruta.
Key Hint	`ui.key_hint(key)`	Chip de atajo de teclado inline.

Retroalimentación (8)

Widget	Función SLT	Descripción
Progress	`ui.progress(value)`	Indicador de progreso mínimo.
Progress Bar	`ui.progress_bar(value, width)`	Barra de progreso con ancho controlable.
Spinner	`ui.spinner(&state)`	Indicador de carga animado.
Toast	`ui.toast(&mut state)`	Pila de notificaciones con temporizador.
Tooltip	`ui.tooltip(...)`
Alert	`ui.alert(message, level)`	Banner de aviso inline con nivel de severidad.
Badge	`ui.badge(label)`	Etiqueta compacta de estado o metadatos.
Empty State	`ui.empty_state(title, subtitle)`	Contenido de marcador para pantallas vacías.

Visualización de datos (7)

Widget	Función SLT	Descripción
Bar Chart	`ui.bar_chart(&[(label, value)], h)`	Visualización de barras comparativa por categorías.
Sparkline	`ui.sparkline(&values, width)`	Pequeño gráfico de tendencia inline.
Chart	`ui.chart(builder, w, h)`	Constructor de gráficos configurable para múltiples series.
Candlestick	`ui.candlestick(&candles, up, down)`	Renderizado de gráfico OHLC estilo mercado.
Heatmap	`ui.heatmap(&grid, w, h, low, high)`	Visualización de matriz por intensidad de color.
Scatter	`ui.scatter(&points, w, h)`	Representa distribuciones de puntos en dos ejes.
Histogram	`ui.histogram(&values, w, h)`	Intervalos de distribución de frecuencia.

Superposición (2)

Widget	Función SLT	Descripción
Modal	`ui.modal(\|ui\| { ... })`	Capa de diálogo con superposición oscurecida.
Overlay	`ui.overlay(\|ui\| { ... })`	Capa de contenido flotante sin oscurecimiento.

IA (3)

Widget	Función SLT	Descripción
Streaming Text	`ui.streaming_text(&mut state)`	Salida de texto en streaming token a token.
Stream MD	`ui.streaming_markdown(&mut state)`	Renderizador de markdown en streaming.
Context Bar	`ui.context_bar(&items)`	Chips de token/fuente de contexto para flujos de IA.

Formulario (1)

Widget	Función SLT	Descripción
Form Field	`ui.form_field(&mut field)`	Unidad de campo de formulario composable.

Multimedia (2)

Widget	Función SLT	Descripción
Sixel Image	`ui.sixel_image(...)`
Image	`ui.image(&img)`	Renderizado de imagen con semibloques a partir de datos RGBA.

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.12.x con slt::run_with() y RunConfig.

Ejemplo: contenedor + texto + botón

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

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.12"

Nota: Rust y Cargo deben estar instalados. Todo el código generado apunta a SLT v0.12.x y se verifica que compila mediante pruebas automatizadas. Presiona q para salir de la aplicación TUI en ejecución.

Templates

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

Explorar /templates Abrir /editor

Atajos de teclado

`q`	Salir en aplicaciones TUI generadas.
`Tab`	Desplazar el foco al siguiente widget.
`Enter`	Seleccionar o activar controles enfocados.
`Ctrl+C`	Salir de la aplicación inmediatamente.

Frameworks compatibles

tui.builders actualmente genera código para SuperLightTUI. Planeamos expandirnos a otros ecosistemas TUI.

Compatible

SuperLightTUI (Rust)

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

Ink (TypeScript)

Framework de interfaz de terminal basado en React por Vadim Demedes

Planificado

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