# Das JSON-Format eines UI-Builder-Designs

> Die Felder der JSON-Datei, die UI Builder speichert: Metadaten, das CSS mit dem Platzhalter CLASS, der Komponentenbaum, Eingänge, Ausgänge und Argumente, mit den Startvorlagen als Beispiele.

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

Ein UI-Builder-Design ist ein einziges JSON-Objekt. Die Startvorlagen des Repositorys (`public/templates/*.json`) zeigen seine Felder.

| Feld | Bedeutung |
|---|---|
| `name`, `description`, `icon`, `version` | die Metadaten des Designs (das Icon ist eine Klasse der Icon-Schrift, etwa `ti ti-totaljs`) |
| `type` | die Art des Designs: `app`, `dashboard`, `flowboard` oder `part` |
| `css` | der Stil des Designs. Der Platzhalter `CLASS` wird durch eine eindeutige Klasse des Designs ersetzt, sodass seine Regeln nie auslaufen (zum Beispiel `.CLASS:root{--radius:5px}`) |
| `csspublish` | der Stil eines `part`, der zur Nutzung durch andere veröffentlicht wird |
| `editor` | Optionen des Editors: `download` (ein Flag) und die Textfelder `paths`, `codes` und `upload` (die Vorlagen starten damit leer; siehe die offizielle Dokumentation zur Verwendung) |
| `components` | woher die Komponenten kommen: ein Objekt mit `cdn`, der Adresse der Bibliothek (`https://cdn.componentator.com/uibuilder/app.json` in der app-Vorlage), und in einem `part` ein Objekt, das die Id jeder Komponente der Adresse ihres Editorformulars zuordnet |
| `children` | der Komponentenbaum des Designs |
| `inputs`, `outputs` | die Verbindungen des Designs nach außen; die Vorlagen starten mit leeren Listen |
| `args` | Argumente des Designs |

## Der Komponentenbaum

`children` ist eine Liste von Knoten. Jeder Knoten hat:

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

- `id`: die Kennung der Instanz innerhalb des Designs.
- `component`: die Id der Komponente, die ihn rendert (die Start-Designs beginnen mit einem `container` namens `root`).
- `config`: die Konfiguration, die das Einstellungsformular der Komponente bearbeitet.
- `children`: die Knoten darin, mit derselben Form.

Eine Komponente kann einer anderen folgen: Beginnt ihr `config.path` mit `@`, liest und schreibt sie den Wert der Komponente, deren Id nach dem `@` kommt ([Eine Komponente bauen](/en/uibuilder/build-a-component/)).

## Warum das wichtig ist

Das Design sind einfache Daten: Sie können es in einer Datenbank speichern, zwei Versionen vergleichen, es aus Ihrem eigenen Werkzeug erzeugen oder Ihre Anwendung pro Kunde ein Design wählen lassen. Wie Sie eines anzeigen, lesen Sie unter [Ein Design in Ihrer Seite rendern](/en/uibuilder/render-an-app-in-your-page/).