El formato JSON de un diseño de UI Builder

UI Builder · uibuilder@1 uibuilderjsonschema

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:

{
	"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).

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.