# O formato JSON de um design do UI Builder

> Os campos do ficheiro JSON que o UI Builder guarda: metadados, o CSS com o marcador CLASS, a árvore de componentes, entradas, saídas e argumentos, com os modelos iniciais como exemplos.

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

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:

```json
{
	"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](/en/uibuilder/build-a-component/)).

## 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](/en/uibuilder/render-an-app-in-your-page/).