The JSON format of a UI Builder design

UI Builder · uibuilder@1 uibuilderjsonschema

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:

{
	"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).

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.