# The JSON format of a UI Builder design

> The fields of the JSON file that UI Builder saves: metadata, the CSS with the CLASS placeholder, the component tree, inputs, outputs and arguments, with the starting templates as examples.

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

A UI Builder design is one JSON object. The starting templates of the repository (`public/templates/*.json`) show its fields.

| Field | Meaning |
|---|---|
| `name`, `description`, `icon`, `version` | the metadata of the design (the icon is a class of the icon font, like `ti ti-totaljs`) |
| `type` | the kind of design: `app`, `dashboard`, `flowboard` or `part` |
| `css` | the style of the design. The placeholder `CLASS` is replaced by a unique class of the design, so its rules never leak (for example `.CLASS:root{--radius:5px}`) |
| `csspublish` | the style of a `part` that is published for others to use |
| `editor` | options of the editor: `download` (a flag) and the text fields `paths`, `codes` and `upload` (the templates start with them empty; see the official documentation for their use) |
| `components` | where the components come from: an object with `cdn`, the address of the library (`https://cdn.componentator.com/uibuilder/app.json` in the app template), and in a `part` an object that maps the id of each component to the address of its editor form |
| `children` | the tree of components of the design |
| `inputs`, `outputs` | the connections of the design with the outside; the templates start with empty lists |
| `args` | arguments of the design |

## The tree of components

`children` is a list of nodes. Each node has:

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

- `id`: the identifier of the instance inside the design.
- `component`: the id of the component that renders it (the starting designs begin with a `container` called `root`).
- `config`: the configuration that the settings form of the component edits.
- `children`: the nodes inside it, with the same shape.

A component can follow another one: when its `config.path` starts with `@`, it reads and writes the value of the component whose id comes after the `@` ([build a component](/en/uibuilder/build-a-component/)).

## Why this matters

The design is plain data: you can store it in a database, compare two versions, generate it from your own tool, or let your application choose a design per customer. To show one, read [render a design in your page](/en/uibuilder/render-an-app-in-your-page/).