The language
A build takes one of three shapes:
| You send | Meaning |
|---|---|
| a node | build it |
| a list of nodes | build each, as separate top-level layers |
{"kit": {...}, "nodes": [...]} | keep the kit with the file, then build the nodes (either part may be left out) |
Nodes
A node is an object, or a string, which is a text. Containers are written with the container as the key:
{
"column": [
"Title",
{"row": ["Left", {"space": "fill"}, "Right"], "width": "fill"}
],
"padding": 16,
"gap": 8
}
| Container | What it does |
|---|---|
row, column | auto layout along one axis |
grid | rows of columns |
stack | children overlap; each is placed with [at](layout.md) and centered by default |
ring | children spread around a circle of radius r |
Any other node uses type (text, rectangle, ellipse, vector, frame), or one of the shorthands: text, icon, draw, space, set.
Names
A key that is not part of the language is a name, looked up in this order:
- a type preset of the kit:
{"title": "Today"}is a text in the presettitle; - a part of the kit:
{"chip": "May 2027"}builds the part with that argument; - a component in the file:
{"Button": {"Kind": "Primary", "Label": "Pay"}}is an instance.
A node uses at most one name. A name that matches nothing is reported with the nearest key, preset, part or component.
Keys of the language come first, so a preset or part cannot be called name, text, row, fill or any other key on the Keys page; the kit refuses such a name. A name is either a preset or a part, never both.
A component set built earlier in the same call is already a name: one call can hold a set and the screen that uses it.
Passing things down
A container's font, style and color reach every text inside it that does not set its own. That is why most texts can be plain strings.
A build into an existing layer (--parent ID) starts from what the texts already inside that layer share: their most common font and color. A row added to a card in Georgia comes out in Georgia without saying so.
Names of layers
Name every layer you will address later ("name": "Price"). A text nobody named is named after its content (its first 40 characters), and keeps following it when the text changes; instances nobody named are named after their variant (State=Locked). The reply to every build lists the ids of the layers by name; a component set's layers list one id per variant, joined by |.
Long forms
Every short form has a long form, and both work in one call: {"row": [...]} is {"type": "row", "children": [...]}, and @ink is "@Kit/ink". The long forms reach a few things the short ones do not name, such as $nodes overrides. The Keys page lists every key.