# Format JSON projektu UI Builder

> Pola pliku JSON zapisywanego przez UI Builder: metadane, CSS z symbolem CLASS, drzewo komponentów, wejścia, wyjścia i argumenty, z szablonami startowymi jako przykładami.

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

Projekt UI Builder to jeden obiekt JSON. Szablony startowe repozytorium (`public/templates/*.json`) pokazują jego pola.

| Pole | Znaczenie |
|---|---|
| `name`, `description`, `icon`, `version` | metadane projektu (ikona to klasa czcionki ikon, jak `ti ti-totaljs`) |
| `type` | rodzaj projektu: `app`, `dashboard`, `flowboard` lub `part` |
| `css` | styl projektu. Symbol `CLASS` jest zastępowany unikalną klasą projektu, więc jego reguły nigdy nie wyciekają (na przykład `.CLASS:root{--radius:5px}`) |
| `csspublish` | styl `part`, który jest publikowany do użycia przez innych |
| `editor` | opcje edytora: `download` (flaga) oraz pola tekstowe `paths`, `codes` i `upload` (szablony zaczynają z nimi pustymi; zobacz oficjalną dokumentację, jak ich używać) |
| `components` | skąd pochodzą komponenty: obiekt z `cdn`, adresem biblioteki (`https://cdn.componentator.com/uibuilder/app.json` w szablonie app), a w `part` obiekt przypisujący id każdego komponentu do adresu jego formularza edytora |
| `children` | drzewo komponentów projektu |
| `inputs`, `outputs` | połączenia projektu ze światem zewnętrznym; szablony zaczynają z pustymi listami |
| `args` | argumenty projektu |

## Drzewo komponentów

`children` to lista węzłów. Każdy węzeł ma:

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

- `id`: identyfikator instancji w projekcie.
- `component`: id komponentu, który go renderuje (projekty startowe zaczynają od `container` o nazwie `root`).
- `config`: konfiguracja edytowana przez formularz ustawień komponentu.
- `children`: węzły w nim, o tym samym kształcie.

Komponent może podążać za innym: gdy jego `config.path` zaczyna się od `@`, odczytuje i zapisuje wartość komponentu, którego id następuje po `@` ([tworzenie komponentu](/en/uibuilder/build-a-component/)).

## Dlaczego to ważne

Projekt to zwykłe dane: możesz zapisać go w bazie danych, porównać dwie wersje, wygenerować z własnego narzędzia lub pozwolić aplikacji wybierać projekt dla każdego klienta. Jak wyświetlić projekt, przeczytasz w [renderowanie projektu na Twojej stronie](/en/uibuilder/render-an-app-in-your-page/).