# Qué es UI Builder: diseña interfaces como un archivo JSON

> UI Builder es el editor visual de Total.js para interfaces de usuario: aplicaciones web, paneles, flowboards y partes, descritos por un archivo JSON y renderizados por un web component, sin código de servidor.

Framework: uibuilder
Product: UI Builder (uibuilder@1)
Language: es
Content-SHA256: fb8da8b991ce0b7f71507a79b5ecfa8524927c59cf7f9d7766a785894fc31587
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: 
Review: not-recorded

UI Builder es un **editor visual de interfaces de usuario**. Arrastras componentes a un lienzo, los configuras y los conectas, y el resultado no es código sino un **archivo JSON** que describe la interfaz. Un pequeño web component renderiza ese archivo en cualquier sitio, así que un diseño de UI Builder no necesita implementación en el servidor. Es de código abierto bajo la **licencia MIT**; el editor es el repositorio [totaljs/uibuilder](https://github.com/totaljs/uibuilder), y puedes usar la versión en la nube en [uibuilder.totaljs.com](https://uibuilder.totaljs.com).

Estas páginas describen UI Builder (revisión `620107a` del repositorio).

## Para qué sirve

Las plantillas del editor muestran los tipos de interfaces que construye:

| Plantilla | Uso |
|---|---|
| Web app | una aplicación web clásica |
| Dashboard | un panel de widgets de datos |
| Flowboard | un tablero conectado a un flujo de datos (funciona con [Total.js Flow](https://www.totaljs.com/flow/)) |
| Part | una pieza de interfaz reutilizable |

El editor también lista plantillas para aplicaciones móviles y paneles HMI, que están desactivadas en esta versión. Total.js presenta UI Builder para formularios web, paneles, intranets, pantallas IoT e interfaces ERP y CRM.

## Por qué encaja con Total.js

- **El diseño son datos.** Un archivo JSON es fácil de guardar en una base de datos, de versionar, de generar y de pasar a otra herramienta.
- **No necesita un entorno especial.** El renderizador es un web component de jComponent, así que cualquier página puede mostrar un diseño.
- **Tus propios componentes.** Un componente es un archivo HTML con su estilo, su código y su formulario de ajustes ([crear un componente](/en/uibuilder/build-a-component/)).
- **Se integra** con [Flow](https://www.totaljs.com/flow/) y con [OpenPlatform](/en/openplatform/what-is-openplatform/), y admite localización.

Continúa con [ejecutar el editor](/en/uibuilder/run-the-designer/), el [formato JSON](/en/uibuilder/the-ui-json-format/) y [renderizar un diseño en tu página](/en/uibuilder/render-an-app-in-your-page/). La documentación oficial está en [docs.totaljs.com/uibuilder](https://docs.totaljs.com/uibuilder/).