# Le format JSON d’un design UI Builder

> Les champs du fichier JSON qu’enregistre UI Builder : métadonnées, le CSS avec le marqueur CLASS, l’arbre des composants, entrées, sorties et arguments, avec les modèles de départ comme exemples.

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

Un design UI Builder est un seul objet JSON. Les modèles de départ du dépôt (`public/templates/*.json`) montrent ses champs.

| Champ | Signification |
|---|---|
| `name`, `description`, `icon`, `version` | les métadonnées du design (l’icône est une classe de la police d’icônes, comme `ti ti-totaljs`) |
| `type` | le type de design : `app`, `dashboard`, `flowboard` ou `part` |
| `css` | le style du design. Le marqueur `CLASS` est remplacé par une classe unique du design, de sorte que ses règles ne fuient jamais (par exemple `.CLASS:root{--radius:5px}`) |
| `csspublish` | le style d’un `part` publié pour que d’autres l’utilisent |
| `editor` | options de l’éditeur : `download` (un indicateur) et les champs de texte `paths`, `codes` et `upload` (les modèles les laissent vides au départ ; voir la documentation officielle pour leur usage) |
| `components` | d’où viennent les composants : un objet avec `cdn`, l’adresse de la bibliothèque (`https://cdn.componentator.com/uibuilder/app.json` dans le modèle app), et dans un `part` un objet qui associe l’id de chaque composant à l’adresse de son formulaire d’éditeur |
| `children` | l’arbre des composants du design |
| `inputs`, `outputs` | les connexions du design avec l’extérieur ; les modèles commencent avec des listes vides |
| `args` | arguments du design |

## L’arbre des composants

`children` est une liste de nœuds. Chaque nœud a :

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

- `id` : l’identifiant de l’instance dans le design.
- `component` : l’id du composant qui le rend (les designs de départ commencent par un `container` appelé `root`).
- `config` : la configuration que modifie le formulaire de réglages du composant.
- `children` : les nœuds qu’il contient, de même forme.

Un composant peut en suivre un autre : quand son `config.path` commence par `@`, il lit et écrit la valeur du composant dont l’id vient après le `@` ([créer un composant](/en/uibuilder/build-a-component/)).

## Pourquoi c’est important

Le design est une donnée simple : vous pouvez le stocker dans une base de données, comparer deux versions, le générer depuis votre propre outil ou laisser votre application choisir un design par client. Pour en afficher un, lisez [rendre un design dans votre page](/en/uibuilder/render-an-app-in-your-page/).