O formato JSON de um design do UI Builder

UI Builder · uibuilder@1 uibuilderjsonschema

Um design do UI Builder é um único objeto JSON. Os modelos iniciais do repositório (public/templates/*.json) mostram os seus campos.

Campo	Significado
`name`, `description`, `icon`, `version`	os metadados do design (o ícone é uma classe da fonte de ícones, como `ti ti-totaljs`)
`type`	o tipo de design: `app`, `dashboard`, `flowboard` ou `part`
`css`	o estilo do design. O marcador `CLASS` é substituído por uma classe única do design, de modo que as suas regras nunca vazam (por exemplo `.CLASS:root{--radius:5px}`)
`csspublish`	o estilo de um `part` que é publicado para outros usarem
`editor`	opções do editor: `download` (um indicador) e os campos de texto `paths`, `codes` e `upload` (os modelos começam com eles vazios; consulte a documentação oficial para a sua utilização)
`components`	de onde vêm os componentes: um objeto com `cdn`, o endereço da biblioteca (`https://cdn.componentator.com/uibuilder/app.json` no modelo app), e num `part` um objeto que associa o id de cada componente ao endereço do seu formulário de editor
`children`	a árvore de componentes do design
`inputs`, `outputs`	as ligações do design com o exterior; os modelos começam com listas vazias
`args`	argumentos do design

A árvore de componentes

children é uma lista de nós. Cada nó tem:

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

id: o identificador da instância dentro do design.
component: o id do componente que o renderiza (os designs iniciais começam com um container chamado root).
config: a configuração que o formulário de definições do componente edita.
children: os nós dentro dele, com a mesma forma.

Um componente pode seguir outro: quando o seu config.path começa por @, lê e escreve o valor do componente cujo id vem depois do @ (criar um componente).

Porque isto importa

O design são dados simples: pode guardá-lo numa base de dados, comparar duas versões, gerá-lo a partir da sua própria ferramenta ou deixar que a sua aplicação escolha um design por cliente. Para mostrar um, leia renderizar um design na sua página.