# El formato JSON de un diseño de UI Builder

> Los campos del archivo JSON que guarda UI Builder: metadatos, el CSS con el marcador CLASS, el árbol de componentes, entradas, salidas y argumentos, con las plantillas iniciales como ejemplo.

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

Un diseño de UI Builder es un único objeto JSON. Las plantillas iniciales del repositorio (`public/templates/*.json`) muestran sus campos.

| Campo | Significado |
|---|---|
| `name`, `description`, `icon`, `version` | los metadatos del diseño (el icono es una clase de la fuente de iconos, como `ti ti-totaljs`) |
| `type` | el tipo de diseño: `app`, `dashboard`, `flowboard` o `part` |
| `css` | el estilo del diseño. El marcador `CLASS` se sustituye por una clase única del diseño, de modo que sus reglas nunca se filtran (por ejemplo `.CLASS:root{--radius:5px}`) |
| `csspublish` | el estilo de una `part` que se publica para que otros la usen |
| `editor` | opciones del editor: `download` (una bandera) y los campos de texto `paths`, `codes` y `upload` (las plantillas empiezan con ellos vacíos; consulta la documentación oficial para su uso) |
| `components` | de dónde vienen los componentes: un objeto con `cdn`, la dirección de la biblioteca (`https://cdn.componentator.com/uibuilder/app.json` en la plantilla app), y en una `part` un objeto que asigna el id de cada componente a la dirección de su formulario de editor |
| `children` | el árbol de componentes del diseño |
| `inputs`, `outputs` | las conexiones del diseño con el exterior; las plantillas empiezan con listas vacías |
| `args` | argumentos del diseño |

## El árbol de componentes

`children` es una lista de nodos. Cada nodo tiene:

```json
{
	"id": "root",
	"component": "container",
	"config": { "name": "Container" },
	"children": []
}
```

- `id`: el identificador de la instancia dentro del diseño.
- `component`: el id del componente que lo renderiza (los diseños iniciales empiezan con un `container` llamado `root`).
- `config`: la configuración que edita el formulario de ajustes del componente.
- `children`: los nodos que contiene, con la misma forma.

Un componente puede seguir a otro: cuando su `config.path` empieza por `@`, lee y escribe el valor del componente cuyo id va después de la `@` ([crear un componente](/en/uibuilder/build-a-component/)).

## Por qué importa

El diseño son datos simples: puedes guardarlo en una base de datos, comparar dos versiones, generarlo desde tu propia herramienta o dejar que tu aplicación elija un diseño por cliente. Para mostrar uno, lee [renderizar un diseño en tu página](/en/uibuilder/render-an-app-in-your-page/).