# Het JSON-formaat van een UI Builder-ontwerp

> De velden van het JSON-bestand dat UI Builder opslaat: metagegevens, de CSS met de plaatshouder CLASS, de componentenboom, ingangen, uitgangen en argumenten, met de startsjablonen als voorbeelden.

Framework: uibuilder
Product: UI Builder (uibuilder@1)
Language: nl
Content-SHA256: 81f75720c9188b31eca6e655411d7c570069b5377f5d6c698d33c1b4219e2409
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: 
Review: not-recorded

Een UI Builder-ontwerp is één JSON-object. De startsjablonen van de repository (`public/templates/*.json`) tonen de velden.

| Veld | Betekenis |
|---|---|
| `name`, `description`, `icon`, `version` | de metagegevens van het ontwerp (het icoon is een klasse van het iconenlettertype, zoals `ti ti-totaljs`) |
| `type` | het soort ontwerp: `app`, `dashboard`, `flowboard` of `part` |
| `css` | de stijl van het ontwerp. De plaatshouder `CLASS` wordt vervangen door een unieke klasse van het ontwerp, zodat de regels nooit weglekken (bijvoorbeeld `.CLASS:root{--radius:5px}`) |
| `csspublish` | de stijl van een `part` die voor anderen wordt gepubliceerd |
| `editor` | opties van de editor: `download` (een vlag) en de tekstvelden `paths`, `codes` en `upload` (de sjablonen starten ermee leeg; zie de officiële documentatie voor het gebruik) |
| `components` | waar de componenten vandaan komen: een object met `cdn`, het adres van de bibliotheek (`https://cdn.componentator.com/uibuilder/app.json` in het app-sjabloon), en in een `part` een object dat de id van elke component koppelt aan het adres van zijn editorformulier |
| `children` | de componentenboom van het ontwerp |
| `inputs`, `outputs` | de verbindingen van het ontwerp met de buitenwereld; de sjablonen starten met lege lijsten |
| `args` | argumenten van het ontwerp |

## De componentenboom

`children` is een lijst van knopen. Elke knoop heeft:

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

- `id`: de identificatie van de instantie binnen het ontwerp.
- `component`: de id van de component die hem rendert (de startontwerpen beginnen met een `container` genaamd `root`).
- `config`: de configuratie die het instellingenformulier van de component bewerkt.
- `children`: de knopen erin, met dezelfde vorm.

Een component kan een andere volgen: wanneer zijn `config.path` met `@` begint, leest en schrijft hij de waarde van de component wiens id na de `@` komt ([een component bouwen](/en/uibuilder/build-a-component/)).

## Waarom dit ertoe doet

Het ontwerp is gewone data: je kunt het in een database opslaan, twee versies vergelijken, het uit je eigen hulpmiddel genereren of je toepassing per klant een ontwerp laten kiezen. Om er een te tonen, lees [een ontwerp in je pagina renderen](/en/uibuilder/render-an-app-in-your-page/).