# Il formato JSON di un design di UI Builder

> I campi del file JSON che UI Builder salva: metadati, il CSS con il segnaposto CLASS, l’albero dei componenti, ingressi, uscite e argomenti, con i modelli iniziali come esempi.

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

Un design di UI Builder è un unico oggetto JSON. I modelli iniziali del repository (`public/templates/*.json`) mostrano i suoi campi.

| Campo | Significato |
|---|---|
| `name`, `description`, `icon`, `version` | i metadati del design (l’icona è una classe del font di icone, come `ti ti-totaljs`) |
| `type` | il tipo di design: `app`, `dashboard`, `flowboard` o `part` |
| `css` | lo stile del design. Il segnaposto `CLASS` viene sostituito da una classe univoca del design, così le sue regole non si propagano mai (per esempio `.CLASS:root{--radius:5px}`) |
| `csspublish` | lo stile di un `part` pubblicato perché altri lo usino |
| `editor` | opzioni dell’editor: `download` (un flag) e i campi di testo `paths`, `codes` e `upload` (i modelli li iniziano vuoti; vedi la documentazione ufficiale per il loro uso) |
| `components` | da dove vengono i componenti: un oggetto con `cdn`, l’indirizzo della libreria (`https://cdn.componentator.com/uibuilder/app.json` nel modello app), e in un `part` un oggetto che associa l’id di ogni componente all’indirizzo del suo modulo dell’editor |
| `children` | l’albero dei componenti del design |
| `inputs`, `outputs` | le connessioni del design con l’esterno; i modelli iniziano con elenchi vuoti |
| `args` | argomenti del design |

## L’albero dei componenti

`children` è un elenco di nodi. Ogni nodo ha:

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

- `id`: l’identificativo dell’istanza all’interno del design.
- `component`: l’id del componente che lo renderizza (i design iniziali cominciano con un `container` chiamato `root`).
- `config`: la configurazione che il modulo di impostazioni del componente modifica.
- `children`: i nodi al suo interno, con la stessa forma.

Un componente può seguirne un altro: quando il suo `config.path` inizia con `@`, legge e scrive il valore del componente il cui id viene dopo la `@` ([creare un componente](/en/uibuilder/build-a-component/)).

## Perché è importante

Il design è un dato semplice: puoi salvarlo in un database, confrontare due versioni, generarlo dal tuo strumento o lasciare che la tua applicazione scelga un design per cliente. Per mostrarne uno, leggi [renderizzare un design nella tua pagina](/en/uibuilder/render-an-app-in-your-page/).