# JSON-formatet för en UI Builder-design

> Fälten i JSON-filen som UI Builder sparar: metadata, CSS med platshållaren CLASS, komponentträdet, ingångar, utgångar och argument, med startmallarna som exempel.

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

En UI Builder-design är ett enda JSON-objekt. Förrådets startmallar (`public/templates/*.json`) visar dess fält.

| Fält | Betydelse |
|---|---|
| `name`, `description`, `icon`, `version` | designens metadata (ikonen är en klass i ikontypsnittet, som `ti ti-totaljs`) |
| `type` | designens slag: `app`, `dashboard`, `flowboard` eller `part` |
| `css` | designens stil. Platshållaren `CLASS` ersätts av en unik klass för designen, så dess regler läcker aldrig (till exempel `.CLASS:root{--radius:5px}`) |
| `csspublish` | stilen för en `part` som publiceras för andra att använda |
| `editor` | editorns alternativ: `download` (en flagga) och textfälten `paths`, `codes` och `upload` (mallarna börjar med dem tomma; se den officiella dokumentationen för hur de används) |
| `components` | var komponenterna kommer ifrån: ett objekt med `cdn`, bibliotekets adress (`https://cdn.componentator.com/uibuilder/app.json` i mallen app), och i en `part` ett objekt som kopplar varje komponents id till adressen för dess editorformulär |
| `children` | designens komponentträd |
| `inputs`, `outputs` | designens kopplingar utåt; mallarna börjar med tomma listor |
| `args` | designens argument |

## Komponentträdet

`children` är en lista med noder. Varje nod har:

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

- `id`: instansens identifierare inuti designen.
- `component`: id för komponenten som renderar den (startdesignerna börjar med en `container` som heter `root`).
- `config`: konfigurationen som komponentens inställningsformulär redigerar.
- `children`: noderna inuti den, med samma form.

En komponent kan följa en annan: när dess `config.path` börjar med `@` läser och skriver den värdet för komponenten vars id kommer efter `@` ([bygga en komponent](/en/uibuilder/build-a-component/)).

## Varför det spelar roll

Designen är vanliga data: du kan lagra den i en databas, jämföra två versioner, generera den från ditt eget verktyg eller låta din applikation välja en design per kund. För att visa en, läs [rendera en design på din sida](/en/uibuilder/render-an-app-in-your-page/).