Components · engine v3.5.2

71 components, one registry

This page is generated from the engine's own component registry, so it always matches what the engine implements. Every demo runs live in the sandbox; switch the theme to see all of them change.

Sort Theme 71 components

Layout

<ROW>

container

Lays its children out side by side; wraps on narrow screens.

<ROW JUSTIFY="between">
  <TEXT STYLE="h3" TEXT="Inbox" />
  <ROW GAP="8px">
    <BUTTON LABEL="Archive" STYLE="secondary" />
    <BUTTON LABEL="Compose" ICON="pencil" />
  </ROW>
</ROW>

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
GAP	12px	Space between children.
JUSTIFY	start	Horizontal distribution.start · center · end · between · around
ALIGN	center	Vertical alignment.start · center · end · stretch · baseline
WRAP	true	Wrap children onto new lines when space runs out.true · false

<COL>

container

Stacks its children vertically. Inside a ROW, columns share the width.

<ROW ALIGN="start">
  <COL>
    <TEXT STYLE="h3" TEXT="Left" />
    <TEXT TEXT="Columns share the row." />
  </COL>
  <COL SPAN="2">
    <TEXT STYLE="h3" TEXT="Right, twice as wide" />
    <TEXT TEXT="On a phone they stack." />
  </COL>
</ROW>

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
GAP	8px	Space between children.
ALIGN	stretch	Horizontal alignment of children.start · center · end · stretch
JUSTIFY	—	Vertical distribution.start · center · end · between
MIN	—	Narrowest this column may get before the row wraps, e.g. 240px.
SPAN	—	Relative width inside a ROW, e.g. 2 for twice the width of a sibling.

<GRID>

container

A responsive grid; columns drop as the screen narrows.

<GRID COLS="3">
  <CARD><TEXT STYLE="h3" TEXT="One" /></CARD>
  <CARD><TEXT STYLE="h3" TEXT="Two" /></CARD>
  <CARD><TEXT STYLE="h3" TEXT="Three" /></CARD>
</GRID>

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
COLS	3	Columns at full width.
MIN	220px	Minimum column width before columns drop.
GAP	16px	Space between cells.

<ACONTAINER>

also DISPLAY, BOXcontainer

The general container: FLOW row or column, with gap, padding and background.

<ACONTAINER FLOW="row" GAP="16px" PAD="16px" COLOR="var(--bg-2)">
  <TEXT TEXT="An ACONTAINER holds any children in a row or a column." />
</ACONTAINER>

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
FLOW	column	Direction of children.column · row
GAP	12px	Space between children.
WRAP	false	Wrap children (row flow).true · false
JUSTIFY	—	Main-axis distribution.start · center · end · between
ALIGN	—	Cross-axis alignment.start · center · end · stretch
COLOR	—	Background colour (any CSS colour or var(--bg-2)).

<CARD>

container

A surface that groups related content. With ACTION it becomes clickable.

<CARD TITLE="Weekly digest" SUBTITLE="Every Monday at 9:00" ICON="mail">
  <TEXT TEXT="A short summary of what changed across your boards." />
  <ROW><BUTTON LABEL="Subscribe" SIZE="sm" /></ROW>
</CARD>

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
TITLE	—	Optional heading.
SUBTITLE	—	Optional line under the heading.
ICON	—	Icon or emoji beside the heading.
ACTION	—	Action fired on click.
GAP	12px	Space between children.
STYLE	—	flat (no border), raised, outline or accent.flat · raised · outline · accent

<HERO>

container

A page-opening block: eyebrow, headline, lead text and actions.

<HERO EYEBROW="New" TITLE="Ship the entire app as one spec" SUBTITLE="Declare the screens, wire them by label and let the engine do the rest.">
  <BUTTON LABEL="Get started" />
  <BUTTON LABEL="Read the guide" STYLE="ghost" />
</HERO>

Children: widgets (usually buttons)

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
EYEBROW	—	Small label above the title.
TITLE	—	Headline.
SUBTITLE	—	Lead paragraph.
IMAGE	—	Optional image shown beside (or behind, with STYLE="cover").
ALIGN	left	Text alignment.left · center
STYLE	—	cover puts the image behind the text.cover · plain

<TABS>

container

Tabbed panels. Each <TAB LABEL> holds its own widgets.

<TABS>
  <TAB LABEL="Overview"><TEXT TEXT="The overview panel." /></TAB>
  <TAB LABEL="Activity"><TEXT TEXT="Recent activity goes here." /></TAB>
  <TAB LABEL="Settings"><TEXT TEXT="Settings panel." /></TAB>
</TABS>

Children: <TAB LABEL ICON> containing widgets

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
ACTIVE	—	Label of the tab shown first.

<DIVIDER>

A hairline rule, optionally with a label.

<TEXT TEXT="Above" />
<DIVIDER LABEL="or" />
<TEXT TEXT="Below" />

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
LABEL	—	Text shown in the middle of the rule.

<SPACER>

Empty space. Inside a ROW with no SIZE it pushes siblings apart.

<ROW>
  <TEXT TEXT="Left" />
  <SPACER />
  <TEXT TEXT="Right" />
</ROW>

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
SIZE	—	Fixed size, e.g. 24px. Omit to fill the remaining space.

Data

<REPEAT>

data-boundcontainer

Renders its children once per record. Inside, {record.field} (or just {field}) reads the record.

<REPEAT SRC="threads" LIMIT="3" GAP="8px">
  <CARD>
    <TEXT STYLE="h3" TEXT="{title}" />
    <TEXT STYLE="muted" TEXT="{author} · {replies} replies" />
  </CARD>
</REPEAT>

Children: widgets (the template)

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
SRC	—	Collection to repeat over.
WHERE	—	Filter, e.g. board={boards.id} AND hot=1.
SORT	—	Sort, e.g. created desc.
LIMIT	—	Maximum number of records.
LAYOUT	column	How repeated items flow.column · row · grid
COLS	3	Columns when LAYOUT="grid".
MIN	220px	Minimum column width when LAYOUT="grid".
GAP	12px	Space between items.
ACTION	—	Action fired when an item is clicked; the item becomes the active record.
EMPTY	Nothing here yet.	Text shown when there are no records.

<RECORD-COMPARE>

data-bound

Choose two saved records and compare explicit scalar fields. Changed values are marked. This is a manual comparison, not a visual diff, version control system or semantic assessment.

<RECORD-COMPARE SRC="notes"><COL FIELD="title" LABEL="Title" /><COL FIELD="body" LABEL="Text" /></RECORD-COMPARE>

Children: <COL FIELD LABEL> (1 to 8 explicit scalar fields)

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
SRC	—	Collection containing the records.
TITLE	title	Scalar field identifying a record in the selectors.
SORT	created	Initial record order.
WHERE	—	Optional collection filter.
EMPTY	Save at least two revisions to compare them.	Message when fewer than two records exist.

<REVISIONS>

data-bound

Local snapshots for a record, with validated restore. Declare REVISIONS at app level to enable retention.

<REVISIONS SRC="projects" RECORD="{record.id}" />

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
SRC	—	Collection.
RECORD	—	Record ID; defaults to the active record.
EMPTY	No saved revisions.	Empty-state text.

<CARDS>

data-bound

A responsive grid of cards, one per record.

<CARDS SRC="products" TITLE="name" SUBTITLE="{price|money}" IMAGE="images" COLS="4" LIMIT="4" RATIO="1/1" />

Defaults and inference

TITLE: the first of title, name, label, subject or heading that the records have.
SUBTITLE: the first of author, owner or category that the records have and that no other line already shows.
IMAGE: the first of image, images, thumb, thumbnail, cover, photo or picture that the records have. Cards that set ICON keep their icons.
OPEN="book": clicking an item makes it the active record and goes to that state, which gets a back link unless it sets BACK="false".
FILTER="genre": filter pills from the distinct values of that field, filtering the list; the same as CATEGORY-NAV plus WHERE.

Attribute	Default	What it does
SRC	—	Collection.
WHERE	—	Filter.
SORT	—	Sort.
LIMIT	—	Maximum cards.
TITLE	title	Field or template for the title.
SUBTITLE	—	Field or template under the title.
BODY	—	Field or template for the body text (clamped to 3 lines).
IMAGE	—	Field holding an image URL (or list of URLs).
ICON	—	Field holding an icon name or emoji.
BADGE	—	Field or template shown as a badge.
META	—	Field or template for the footer line.
COLS	3	Columns at full width.
MIN	220px	Minimum card width.
RATIO	4/3	Image aspect ratio.
ACTION	—	Action fired when a card is clicked; the record becomes active.
OPEN	—	State to open the clicked item in: it becomes the active record. No WIRE needed.
FILTER	—	Field whose distinct values become filter pills above, filtering this list.
EMPTY	Nothing here yet.	Text when there are no records.

<LIST>

data-bound

A media list: thumbnails with title and meta, as a grid, rows or a horizontal strip.

<LIST SRC="videos" TITLE="title" SUBTITLE="channel" BADGE="{duration|dur}" COLS="3" LIMIT="3" />

Children: optional static <ITEM TITLE SUBTITLE THUMB ACTION>

Defaults and inference

TITLE: the first of title, name, label, subject or heading that the records have.
SUBTITLE: the first of author, owner or category that the records have and that no other line already shows.
THUMB: the first of image, images, thumb, thumbnail, cover, photo or picture that the records have.
LAYOUT: grid when the records have an image field, rows when they do not.
OPEN="book": clicking an item makes it the active record and goes to that state, which gets a back link unless it sets BACK="false".
FILTER="genre": filter pills from the distinct values of that field, filtering the list; the same as CATEGORY-NAV plus WHERE.

Attribute	Default	What it does
SRC	—	Collection.
WHERE	—	Filter.
SORT	—	Sort.
LIMIT	—	Maximum items.
THUMB	thumb	Field holding the thumbnail URL.
TITLE	title	Field or template for the title.
SUBTITLE	—	Field or template for the second line.
META	—	Field or template for the third line.
BADGE	—	Field or template overlaid on the thumbnail (e.g. a duration).
LAYOUT	grid	Arrangement.grid · rows · horizontal
COLS	4	Columns in grid layout.
RATIO	16/9	Thumbnail aspect ratio.
ACTIVE	—	Id of the item to highlight.
ACTION	—	Action fired when an item is clicked; the record becomes active.
OPEN	—	State to open the clicked item in: it becomes the active record. No WIRE needed.
FILTER	—	Field whose distinct values become filter pills above, filtering this list.
EMPTY	Nothing here yet.	Text when there are no records.

<TABLE>

data-bound

A table of records. Click a header to sort; MODE="edit" makes EDITABLE columns write back.

<TABLE SRC="threads" LIMIT="4">
  <COL FIELD="title" LABEL="Thread" />
  <COL FIELD="author" LABEL="Author" />
  <COL FIELD="replies" LABEL="Replies" TYPE="num" ALIGN="right" />
</TABLE>

Defaults and inference

COL LABEL: the FIELD humanised ("board_name" → "Board name").
COL TYPE: from the values: money for numbers in a price, amount, cost, total or revenue field, num for other numbers, date for dates.
OPEN="book": clicking an item makes it the active record and goes to that state, which gets a back link unless it sets BACK="false".
FILTER="genre": filter pills from the distinct values of that field, filtering the list; the same as CATEGORY-NAV plus WHERE.

Attribute	Default	What it does
SRC	—	Collection.
WHERE	—	Filter.
SORT	—	Initial sort.
LIMIT	—	Maximum rows.
MODE	read	read, or edit to allow inline edits (stored locally).read · edit
ACTION	—	Action fired when a row is clicked; the record becomes active.
OPEN	—	State to open the clicked item in: it becomes the active record. No WIRE needed.
FILTER	—	Field whose distinct values become filter pills above, filtering this list.
EMPTY	No rows.	Text when there are no records.

<BOARD>

data-bound

A kanban board: records grouped into columns by a field. Dragging a card rewrites that field.

<BOARD SRC="cards" GROUP="status" COLUMNS="todo:To do,doing:In progress,done:Done" BADGE="tag" />

Defaults and inference

TITLE: the first of title, name, label, subject or heading that the records have.
GROUP: status, or stage, whichever field the cards have.
OPEN="book": clicking an item makes it the active record and goes to that state, which gets a back link unless it sets BACK="false".

Attribute	Default	What it does
SRC	—	Collection of cards.
GROUP	status	Field whose value decides the column.
COLUMNS	—	Columns as value:Label pairs, e.g. todo:To do,doing:Doing,done:Done.
TITLE	title	Field or template for the card title.
SUBTITLE	—	Field or template for the second line.
BADGE	—	Field or template shown as a badge.
SORT	—	Sort within each column.
ACTION	—	Action fired when a card is clicked.
OPEN	—	State to open the clicked card in: it becomes the active record. No WIRE needed.
WHERE	—	Filter.

<CATEGORY-NAV>

also FILTERdata-bound

Filter pills. The chosen value is published into the pipe under ID, so WHERE="category={ID}" filters.

<CATEGORY-NAV ID="cat" SRC="products" FIELD="category" />
<CARDS SRC="products" WHERE="category={cat}" TITLE="name" SUBTITLE="category" COLS="4" LIMIT="4" />

Children: optional <NAV-ITEM ID LABEL>

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
SRC	—	Collection to take the choices from.
FIELD	category	Field whose distinct values become the pills (with SRC).
ALL	All	Label of the pill that clears the filter; empty to hide it.
ACTIVE	—	Initially selected value.
ACTION	—	Optional action fired on change ({id} is the chosen value).

<TOTAL>

data-bound

An aggregate over a collection: sum, count, average, min or max.

<TOTAL SRC="products" FIELD="price" OP="avg" FORMAT="money" LABEL="Average price" STYLE="stat" />

Defaults and inference

LABEL: from OP and FIELD ("Average score", "Total price", "Lowest price", "Highest price"; a count is the collection humanised), except in STYLE="badge".

Attribute	Default	What it does
SRC	—	Collection.
WHERE	—	Filter.
FIELD	—	Field to aggregate (not needed for count).
QTY	—	Optional quantity field; each row contributes FIELD × QTY.
OP	sum	Aggregate.sum · count · avg · min · max
FORMAT	num	Number format.num · money · compact
LABEL	—	Label shown before the value.
STYLE	inline	Presentation.inline · stat · badge

<RECORDBAR>

data-bound

VB-style record navigator: first, previous, next, last. Moves the active record of SRC.

<RECORDBAR SRC="products" LABEL="Product" FIELD="name" />
<TEXT STYLE="h3" TEXT="{products.name|default:Pick a record}" />
<PICTURE BIND="products.images" HEIGHT="220px" />

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
SRC	—	Collection.
WHERE	—	Filter.
LABEL	Record	Label.
FIELD	—	Field shown for the current record.

<TREE>

data-bound

A collapsible tree, from <NODE> children or from records with a PARENT field.

<TREE>
  <NODE LABEL="src" ICON="folder" OPEN="true">
    <NODE LABEL="app.appspec" ICON="file-code" />
    <NODE LABEL="themes" ICON="folder">
      <NODE LABEL="ocean.css" ICON="file" />
    </NODE>
  </NODE>
  <NODE LABEL="README.md" ICON="file-text" />
</TREE>

Children: <NODE LABEL ICON ACTION OPEN> (nested)

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
SRC	—	Collection (each record has id and PARENT).
PARENT	parent	Field naming the parent id.
LABEL	title	Field or template for the label.
ICON	icon	Field holding an icon.
ACTION	—	Action fired when a leaf is clicked; the record becomes active.

<DATAVIEWER>

data-bound

Renders a collection with a named presentation (RENDER), or as a table or text by default.

<DATAVIEWER SRC="threads" RENDER="cards" LIMIT="3" />

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
SRC	—	Collection.
WHERE	—	Filter.
SORT	—	Sort.
LIMIT	—	Maximum records.
RENDER	—	Presentation.table · cards · kpi · bar · line · area · donut · feed · alerts · ticker · bars · post_list

<DETAIL>

data-bound

The active record, laid out: its title as a heading, its image, and the other fields as a labelled list.

<RECORDBAR SRC="products" LABEL="Product" FIELD="name" />
<DETAIL SRC="products" FIELDS="category,price,rating" />

Defaults and inference

TITLE: the first of title, name, label, subject or heading that the records have.
IMAGE: the first of image, images, thumb, thumbnail, cover, photo or picture that the records have.
FIELDS: every other field of the record, in the order the records (or the form that saves them) give, leaving out id, guid, created and updated.
Labels are the field names humanised; lists of image URLs show as images.

Attribute	Default	What it does
SRC	—	Collection whose active record to show; defaults to the record that was opened.
FIELDS	—	Fields to list, in order, e.g. author,genre. Inferred from the record if omitted.
TITLE	—	Field used as the heading.
IMAGE	—	Field holding the image.
EMPTY	Nothing selected.	Text when there is no active record.

<RELATIONSHIP-GRAPH>

data-bound

An interactive node-link diagram from node and link collections or nested EDGE declarations.

<RELATIONSHIP-GRAPH SRC="people" LINKS="connections" LABEL="name" GROUP="team" />

Children: <EDGE FROM TO LABEL> (declarative links)

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
SRC	—	Node collection.
LINKS	—	Optional link collection.
ID	id	Node identifier field.
LABEL	name	Node label field or template.
GROUP	group	Node group field.
META	—	Optional second line field or template.
FROM	from	Link source identifier field.
TO	to	Link target identifier field.
RELATION	label	Link label field.
HEIGHT	440px	Diagram height.
ACTION	—	Action fired when a node is selected; its record becomes active.
OPEN	—	State to open when a node is selected.

Content

<TEXT>

A run of text. STYLE picks its role in the type scale.

<TEXT STYLE="h2" TEXT="Everything is a label" />
<TEXT STYLE="eyebrow" TEXT="Release notes" />
<TEXT STYLE="lead" TEXT="Wire any button to any state by giving both the same name." />
<TEXT STYLE="muted" TEXT="Signed in as {user}" />

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
TEXT	—	The text. {placeholders} read the pipe or the record in scope. Inner text works too.
STYLE	body	Role in the type scale.display · h1 · h2 · h3 · lead · body · muted · small · micro · eyebrow · mono · quote
SIZE	—	Explicit font size.
WEIGHT	—	Font weight, e.g. 600.
COLOR	—	Text colour.
ALIGN	—	Text alignment.left · center · right
LINES	—	Clamp to this many lines.
BIND	—	Read the text from a path instead, e.g. record.title.

<ARTICLE>

Long-form text written in a small, safe subset of Markdown.

<ARTICLE>
## Why a graph
States are **nodes**. Labels are *edges*.

- Declare the screens
- Wire them by label
- Bind components to data
</ARTICLE>

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
BIND	—	Path to the Markdown, e.g. record.body.
TEXT	—	Markdown given inline (inner text works too).
SIZE	—	Base font size, e.g. 17px.

<IMG>

also IMAGE

An image. SRC may be a {placeholder} bound to a record field.

<IMG SRC="media/covers/cover-2.svg" RATIO="1200/630" ALT="Lattice" />

Defaults and inference

ALT: the record's title (its title, name, label, subject or heading field) when the image comes from a record.

Attribute	Default	What it does
SRC	—	Image URL (relative URLs resolve against the site root).
BIND	—	Path to an image URL, e.g. record.cover.
ALT	—	Alternative text.
FIT	cover	How the image fills its box.cover · contain
RATIO	—	Aspect ratio, e.g. 16/9.
RADIUS	—	Corner radius.

<ICON>

An icon from the bundled Lucide set, or any emoji.

<ROW>
  <ICON NAME="rocket" SIZE="28" />
  <ICON NAME="heart" SIZE="28" COLOR="var(--error)" />
  <ICON NAME="🌈" SIZE="28" />
</ROW>

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
NAME	sparkles	Lucide icon name (lucide.dev) or an emoji.
SIZE	20	Size in px.
COLOR	—	Colour.

<BADGE>

A small status label.

<ROW GAP="8px">
  <BADGE TEXT="New" />
  <BADGE TEXT="Shipped" TONE="success" />
  <BADGE TEXT="Blocked" TONE="error" />
  <BADGE TEXT="Draft" TONE="muted" />
</ROW>

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
TEXT	—	Label text.
TONE	accent	Colour role.accent · success · warning · error · muted
ICON	—	Optional icon.

<BULLETS>

data-bound

A bulleted or numbered list of <ITEM TEXT> children, or of a field across SRC.

<BULLETS STYLE="check">
  <ITEM TEXT="No build step" />
  <ITEM TEXT="One file per app" />
  <ITEM TEXT="Themes by attribute" />
</BULLETS>

Children: <ITEM TEXT>

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
SRC	—	Optional collection; one bullet per record.
FIELD	title	Field shown for each record.
STYLE	dot	Marker style.dot · check · number
ICON	—	Icon used as the marker.

<CODE>

also TEXT-IDE

Code with line numbers and highlighting; EDITABLE turns it into an editor bound to the pipe.

<CODE LANG="xml">&lt;WIRE LABEL="open" TO="detail" /&gt;
&lt;BUTTON LABEL="Open" ACTION="open" /&gt;</CODE>

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
TEXT	—	The code (inner text works too).
BIND	—	Path to the code, e.g. record.source.
LANG	—	Language hint: xml, js, py, sql. Detected if omitted.
EDITABLE	false	Make it an editor; the text is published into the pipe under ID.true · false
LINES	true	Show line numbers.true · false

<AVATAR>

A round avatar showing an image, an emoji or the initial of a name.

<ROW GAP="8px">
  <AVATAR NAME="Ada" />
  <AVATAR NAME="Grace" TEXT="🚀" />
  <AVATAR NAME="{user}" SIZE="48" />
</ROW>

Defaults and inference

NAME: in a record's scope, its author, user, owner or name field.

Attribute	Default	What it does
NAME	—	Name; its initial is shown when there is no image.
SRC	—	Image URL.
TEXT	—	Emoji or text to show instead.
SIZE	36	Diameter in px.

Input

<BUTTON>

Fires an action. The action is a label: a WIRE with the same LABEL decides what happens.

<ROW GAP="8px">
  <BUTTON LABEL="Primary" />
  <BUTTON LABEL="Secondary" STYLE="secondary" />
  <BUTTON LABEL="Ghost" STYLE="ghost" />
  <BUTTON LABEL="Delete" STYLE="danger" ICON="trash-2" />
</ROW>

Defaults and inference

LABEL: a button with no LABEL, text or ICON is labelled from its ACTION: a state uses its nav label, anything else is humanised ("checkout" → "Checkout").
ACTION="back" with no LABEL or ICON reads "Back" with an arrow.

Attribute	Default	What it does
LABEL	Button	Text on the button.
ACTION	—	Action label, e.g. open, save(posts), back, theme(ocean).
ICON	—	Icon name or emoji.
STYLE	primary	Visual weight.primary · secondary · ghost · danger · link
SIZE	md	Size.sm · md · lg
FULL	false	Stretch to the full width.true · false
SET	—	KV assignments made before the action fires, e.g. status=done; filter=open.

<BUTTON-BAR>

A group of buttons. SEGMENTED makes it a toggle whose choice is published into the pipe.

<BUTTON-BAR ID="view" SEGMENTED="true" VALUE="grid">
  <BUTTON LABEL="Grid" ICON="layout-grid" VALUE="grid" />
  <BUTTON LABEL="List" ICON="list" VALUE="list" />
</BUTTON-BAR>
<TEXT STYLE="muted" TEXT="View: {view}" />

Children: <BUTTON LABEL ICON ACTION VALUE>

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
JUSTIFY	start	Alignment of the group.start · center · end · between
SEGMENTED	false	Behave as a single-choice toggle.true · false
VALUE	—	Initially selected value when segmented.

<INPUT>

A text field. Its value is published into the pipe under its ID, so any state can read {id}.

<INPUT ID="name" LABEL="Your name" PLACEHOLDER="Ada Lovelace" LIVE="true" />
<TEXT STYLE="muted" TEXT="Hello, {name|default:stranger}." />

Defaults and inference

TYPE: from the ID where it is unambiguous: email, phone/tel, url/website, date/*_date/birthday, password, and age/qty/quantity/count/price/amount as number.
LABEL: the ID humanised, unless the input already has a PLACEHOLDER. A search input (ID search, q or query, or TYPE="search") gets PLACEHOLDER "Search…" instead of a label.

Attribute	Default	What it does
TYPE	text	Field type.text · textarea · number · email · password · search · date · time · color · range · url
LABEL	—	Label shown above the field.
PLACEHOLDER	—	Hint text.
VALUE	—	Initial value; {record.field} prefills an edit form.
ACTION	—	Action fired on Enter.
LIVE	false	Refresh data-bound components as you type (live filtering).true · false
REQUIRED	false	Must be filled before a SAVE or UPDATE wire runs.true · false
ROWS	4	Rows for a textarea.
MIN	—	Minimum (number, range).
MAX	—	Maximum (number, range).
STEP	—	Step (number, range).
KEEP	false	Keep the value after a save.true · false

<SELECT>

data-bound

A drop-down. Options come from OPTIONS, <OPTION> children or a collection.

<SELECT ID="size" LABEL="Size" OPTIONS="s:Small,m:Medium,l:Large" VALUE="m" />
<TEXT STYLE="muted" TEXT="Chosen: {size}" />

Children: <OPTION VALUE LABEL>

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
LABEL	—	Label shown above.
OPTIONS	—	Comma-separated options; use value:Label to separate the two.
SRC	—	Collection to take options from.
VALUEFIELD	id	Record field used as the value.
TEXTFIELD	name	Record field shown to the user (falls back to title).
PLACEHOLDER	—	First, empty option.
VALUE	—	Initial value.
ACTION	—	Action fired on change. The chosen text is published as {ID_label}.
REQUIRED	false	Must be chosen before a SAVE runs.true · false

<CHECK>

also TOGGLE

A checkbox or switch whose true/false value is published into the pipe.

<CHECK ID="notify" LABEL="Email me about replies" STYLE="switch" VALUE="true" />
<TEXT STYLE="muted" TEXT="notify = {notify}" />

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
LABEL	—	Label.
VALUE	false	Initial state.true · false
STYLE	check	Appearance.check · switch
ACTION	—	Action fired on change.

<FORM>

container

A set of <FIELD>s and a submit button. Submitting fires ACTION with the fields in the pipe.

<FORM ACTION="subscribe" SUBMIT-LABEL="Subscribe" COLS="2">
  <FIELD NAME="name" LABEL="Name" REQUIRED="true" />
  <FIELD NAME="email" LABEL="Email" TYPE="email" />
</FORM>
<WIRE LABEL="subscribe" SAVE="subscribers" />

Children: <FIELD NAME LABEL TYPE PLACEHOLDER REQUIRED OPTIONS VALUE>

Defaults and inference

SAVE="books" saves the fields as a new record in that collection: the engine adds the wire itself.
SUBMIT-LABEL: "Add " plus the collection in the singular ("Add book") with SAVE, and "Save" with UPDATE.
FIELD LABEL: the NAME humanised ("first_name" and "firstName" → "First name").
FIELD TYPE: select when it has OPTIONS; otherwise from the NAME where it is unambiguous (email, tel, url, date, password, number, and textarea for notes, description, body, message or bio).
Flags need no value: REQUIRED is read as REQUIRED="true".
With UPDATE, each FIELD starts with the record's value ({books.title}).
After SAVE with no TO, a form on a screen of its own goes back to where you came from; a form on the same screen as the list it saves to stays put.

Attribute	Default	What it does
SAVE	—	Collection to add a record to on submit. No ACTION or WIRE is needed.
UPDATE	—	Collection whose active record the form edits; fields start with its values.
TO	—	State to go to after SAVE or UPDATE.
SET	—	Extra KV pairs written with the record, e.g. status=new; author={user}.
ACTION	—	Action fired on submit; a WIRE with SAVE="coll" turns the fields into a record.
SUBMIT-LABEL	Submit	Submit button text.
TITLE	—	Optional heading.
COLS	1	Lay fields out in this many columns (they stack on a phone).

<JSON-CHECK>

Check JSON against a flat, exact field contract. Reports syntax, missing fields, extra fields and type errors locally. Nested schemas, coercion and remote references are not supported.

<JSON-CHECK SHAPE="title:string,done:boolean" />

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
SHAPE	title:string,done:boolean	Comma-separated required name:type fields. All fields are required; extra fields are rejected. Maximum 12 fields.
LABEL	JSON input	Accessible input label.
VALUE	—	Initial JSON text. No data is sent or saved.

<REVIEW-IMPORT>

Validate and import bounded review findings into one local collection. Exact keys, no inference, no network or code execution. Identical findings are skipped; location grouping does not establish agreement or truth.

<REVIEW-IMPORT SRC="review_findings" />

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
SRC	review_findings	Local target collection. Maximum 200 active findings.
VALUE	—	Example JSON array.
TO	—	State to open after a successful import.

<UNICODE-INSPECTOR>

Inspect glyphs, Unicode code points and browser-native normalization forms locally. Code-point decomposition is not grapheme-cluster analysis.

<UNICODE-INSPECTOR VALUE="É" />

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
LABEL	Text to inspect	Accessible input label.
VALUE	É	Initial text, limited to 512 code units.

App

<LOGIN>

A sign-in card. On the public site any name works and nothing leaves the browser.

<LOGIN TITLE="Welcome back" SUBTITLE="Sign in to post and reply" />

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
TITLE	Sign in	Heading.
SUBTITLE	—	Line under the heading.
LABEL	Continue	Button text.
NOTE	Demo sign-in: any name works, and it is kept in this browser only.	Small print under the button.

<THEME-PICKER>

Lets the user switch the app between themes at runtime.

<THEME-PICKER THEMES="modern-minimal,ocean,ember,github,neon-grid" />

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
THEMES	—	Comma-separated theme names; all bundled themes if omitted.
LABEL	Theme	Label.

Workspace

<MENU-BAR>

An application menu bar containing named MENU groups and their standard AppSPEC actions.

<MENU-BAR><MENU LABEL="File"><BUTTON LABEL="Export" /></MENU></MENU-BAR>

Children: MENU groups with BUTTON children.

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
Universal attributes only.

Editors

<DOCUMENT-EDITOR>

A full-window persistent document with application menus, formatting ribbon, undo and safe HTML export.

<DOCUMENT-EDITOR ID="notes" TITLE="Project notes" />

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
ID	document	Project ID.
TITLE	Untitled document	Document name.
VALUE	—	Initial plain-text content.

<SPREADSHEET>

A full-window workbook with formula bar, keyboard navigation, formatting, bounded formulas and CSV export.

<SPREADSHEET ID="budget" ROWS="30" COLS="10" />

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
ID	sheet	Project ID.
ROWS	50	Rows, up to 100.
COLS	12	Columns, up to 26.
VALUE	—	Optional JSON object of initial cell values.
TITLE	Sheet1	Worksheet name.

<PRESENTATION>

A full-window slide workspace with thumbnail navigation, editing inspector, layouts, present mode and JSON export.

<PRESENTATION ID="pitch" TITLE="Project update" />

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
ID	deck	Project ID.
TITLE	Untitled presentation	Presentation title.

<PHOTO-EDITOR>

A full-window photo workspace with filmstrip, canvas, crop, transform, adjustments, compare and PNG export.

<PHOTO-EDITOR ID="retouch" SRC="photos" />

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
ID	photo	Project ID.
SRC	photos	Image collection with src and title fields.
IMAGE	—	Initial image ID.
MODE	develop	develop\|compare

<VIDEO-EDITOR>

A full-window video workspace with media bin, preview transport, inspector, multi-lane timeline, undo, split, effects and local exports.

<VIDEO-EDITOR ID="launch-film" SRC="clips" />

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
ID	video-project	Project ID.
SRC	clips	Clip collection with src, title, duration and thumb.

<AUDIO-STUDIO>

A full-window multitrack workspace with audio bin, arrangement, track inspector, gain, mute/solo, transport and WAV export.

<AUDIO-STUDIO ID="session" SRC="tracks" />

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
ID	audio-project	Project ID.
SRC	tracks	Audio collection with src, title and duration.

Media

<PICTURE>

data-bound

A picture viewer bound VB-style to a record, e.g. BIND="activeRecord.images". Runs small with thumbnails, full width, or as a slideshow.

<PICTURE BIND="products.images" MODE="small" HEIGHT="260px" />
<RECORDBAR SRC="products" LABEL="Product" FIELD="name" />

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
BIND	—	Path to an image URL or list of URLs, e.g. activeRecord.images.
SRC	—	An image URL, or a collection when FIELD is given.
FIELD	—	With a collection SRC: field holding the image(s).
MODE	small	small shows thumbnails beside the main image; full is edge to edge; slideshow advances on its own.small · full · slideshow
HEIGHT	360px	Height of the main image.
FIT	contain	How images fill the frame.contain · cover
INTERVAL	4000	Slideshow interval in ms.
CAPTION	—	Caption (or a field/template with a collection).

<SLIDESHOW>

data-bound

A full-width slideshow with captions, play/pause and optional thumbnails.

<SLIDESHOW SRC="articles" FIELD="cover" CAPTION="title" HEIGHT="240px" />

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
SRC	—	Collection.
FIELD	image	Field holding the image(s).
CAPTION	—	Field or template for the caption.
BIND	—	Or: path to a list of image URLs.
WHERE	—	Filter.
LIMIT	—	Maximum slides.
INTERVAL	5000	Milliseconds per slide.
AUTOPLAY	true	Start playing.true · false
THUMBNAILS	false	Show a thumbnail strip.true · false
HEIGHT	380px	Height.
FIT	cover	Image fit.cover · contain

<CAROUSEL>

data-bound

Hero slides with a title and subtitle over each image; from <SLIDE>s or a collection.

<CAROUSEL SRC="articles" IMAGE="cover" TITLE="title" SUBTITLE="excerpt" HEIGHT="260px" LIMIT="3" />

Children: <SLIDE IMAGE TITLE SUBTITLE ACTION>

Defaults and inference

IMAGE: the first of image, images, thumb, thumbnail, cover, photo or picture that the records have.
TITLE: the first of title, name, label, subject or heading.
OPEN="state" opens the clicked slide’s record there.

Attribute	Default	What it does
SRC	—	Collection (fields image, title, subtitle).
IMAGE	image	Image field (with SRC).
TITLE	title	Title field or template.
SUBTITLE	subtitle	Subtitle field or template.
LIMIT	—	Maximum slides.
AUTOPLAY	true	Advance automatically.true · false
INTERVAL	6000	Milliseconds per slide.
HEIGHT	360px	Height.
DOTS	true	Show dots.true · false
ARROWS	true	Show arrows.true · false
ACTION	—	Action when a slide is clicked.
OPEN	—	State to open the clicked slide’s record in. No WIRE needed.

<VIDEO>

A video player: a YouTube video (privacy-enhanced youtube-nocookie embed) or a video file.

<VIDEO YOUTUBE="aqz-KE-bpKQ" TITLE="Big Buck Bunny" />

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
YOUTUBE	—	YouTube video id, e.g. {record.youtube}.
SOURCE	—	URL of a video file (alternative to YOUTUBE).
POSTER	—	Poster image for a video file.
RATIO	16/9	Aspect ratio.
AUTOPLAY	false	Autoplay (files only, muted).true · false
TITLE	—	Accessible title.

<PLAYLIST>

data-bound

A numbered up-next list with thumbnails; the active item is highlighted.

<PLAYLIST SRC="videos" HEADING="Up next" META="{channel} · {duration|dur}" LIMIT="4" />

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
SRC	—	Collection.
WHERE	—	Filter.
SORT	—	Sort.
LIMIT	—	Maximum items.
TITLE	title	Field or template for the title.
META	—	Field or template for the second line.
THUMB	thumb	Thumbnail field.
ACTIVE	—	Id of the current item.
ACTION	—	Action when an item is clicked.
OPEN	—	State to open the clicked item in. No WIRE needed.
HEADING	—	Optional heading above the list.

<AUDIO>

data-bound

A music player: waveform scrubber, transport, volume and a track list from a collection.

<AUDIO SRC="tracks" LIST="false" />

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
SRC	—	Collection of tracks (fields src, title, artist, duration, peaks, color).
WHERE	—	Filter.
SORT	—	Sort.
SOURCE	—	A single audio file URL (instead of SRC).
FILE	src	Field holding the audio URL.
LIST	true	Show the track list.true · false
AUTONEXT	true	Continue to the next track.true · false
TITLE	title	Title field.
ARTIST	artist	Artist field.

<WAVEFORM>

data-bound

A waveform of peak values. FOR links it to an AUDIO player so it tracks and seeks.

<WAVEFORM SRC="tracks" HEIGHT="64px" />

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
SRC	—	Collection whose first record holds the peaks (with FIELD).
FIELD	peaks	Field holding the peaks.
WHERE	—	Filter.
BIND	—	Or: path to a list of peaks (0–1), e.g. tracks.peaks.
FOR	—	ID of an AUDIO component to follow.
HEIGHT	64px	Height.

<CANVAS>

A drawing surface with brush, eraser, shapes, fill, undo and PNG export. Other components drive it with actions: paint.tool(eraser), paint.clear(), paint.keep(sketches).

<CANVAS ID="sketch" HEIGHT="260px" />

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
TOOLS	brush,eraser,line,rect,ellipse,fill	Tools offered in the built-in toolbar.
TOOLBAR	true	Show the built-in toolbar.true · false
PALETTE	#111827,#ef4444,#f97316,#eab308,#22c55e,#06b6d4,#3b82f6,#8b5cf6,#ec4899,#ffffff	Comma-separated swatch colours.
BRUSH-COLOR	#111827	Starting colour.
BRUSH-SIZE	6	Starting brush size in px.
BACKGROUND	#ffffff	Canvas colour.
HEIGHT	480px	Height.
PERSIST	true	Keep the drawing in this browser between visits.true · false
BSAVE	show	Show the Save PNG button.show · hide
KEEP	—	Collection that receives a gallery copy from the built-in toolbar.

<MAP>

data-bound

A pannable, zoomable map using OpenStreetMap tiles, with markers from a collection.

<MAP CENTER="51.5072,-0.1276" ZOOM="11" HEIGHT="280px" />

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
CENTER	30.2672,-97.7431	Latitude,longitude of the centre (INIT-LOCATION also works).
ZOOM	12	Zoom level 2–18.
SRC	—	Collection of markers (fields lat, lon, title).
HEIGHT	360px	Height.
ACTION	—	Action when a marker is clicked; the record becomes active.

<TIMELINE>

data-bound

A time ruler with clips and a draggable playhead; the playhead time is published into the pipe.

<TIMELINE ID="t" DURATION="90" SRC="clips" />
<TEXT STYLE="muted" TEXT="Playhead at {t|dur}" />

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
DURATION	60	Length in seconds.
SRC	—	Collection of clips (fields start, end, label in seconds).
VALUE	—	JSON clip array for in-memory editor arrangements.
ACTIVE	—	Selected clip ID.
HEIGHT	96px	Height.

Charts

<CHART>

data-bound

Bar, horizontal bar, line, area and donut charts from a collection, with hover details.

<CHART SRC="revenue" TYPE="area" X="month" Y="revenue" UNIT="$" TITLE="Revenue" SUBTITLE="Last 12 months" />

Defaults and inference

X: label if the records have it, otherwise the first text or date field.
Y: value if the records have it, otherwise every numeric field (except id).

Attribute	Default	What it does
SRC	—	Collection.
WHERE	—	Filter.
SORT	—	Sort.
LIMIT	—	Maximum points.
TYPE	bar	Chart form.bar · hbar · line · area · donut
X	label	Field for categories (or dates).
Y	value	Field(s) for values; comma-separate for several series.
NAMES	—	Series names, comma-separated (defaults to the Y fields).
TITLE	—	Title above the chart.
SUBTITLE	—	Line under the title.
UNIT	—	Unit for values: $, % or a word.
HEIGHT	240px	Plot height.
STACKED	false	Stack multiple bar series.true · false

<KPI>

data-bound

Stat tiles: label, value, a signed change and an optional sparkline, one per record.

<KPI SRC="kpis" COLS="4" />

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
SRC	—	Collection (fields label, value, unit, delta, good, spark).
WHERE	—	Filter.
LIMIT	—	Maximum tiles.
COLS	4	Tiles per row at full width.
LABEL	—	For a single tile without SRC: its label.
VALUE	—	Single tile value.
DELTA	—	Single tile change, e.g. +4.2%.
UNIT	—	Unit.

<METER>

also PROGRESSdata-bound

Labelled progress bars whose fill colour carries severity; one per record, or a single VALUE.

<METER LABEL="Storage" VALUE="72" />
<METER LABEL="Build minutes" VALUE="1800" MAX="2000" UNIT=" min" />

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
SRC	—	Collection (fields label, value, max).
LABEL	—	Single meter label.
VALUE	—	Single meter value.
MAX	100	Maximum.
WARN	70	Percentage at which the fill turns amber.
ALERT	90	Percentage at which it turns red.
UNIT	%	Unit shown after the value.

<FEED>

data-bound

An activity feed or alert list: icon, text and time per record.

<FEED SRC="activity" LIMIT="4" />

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
SRC	—	Collection (fields icon, text or title, detail, time, tone).
WHERE	—	Filter.
SORT	—	Sort.
LIMIT	—	Maximum items.
STYLE	feed	feed for activity, alerts for status rows with a coloured edge.feed · alerts

<TICKER>

data-bound

A scrolling tape of symbols, prices and changes.

<TICKER SRC="tickers" />

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
SRC	—	Collection (fields symbol, price, change).
SPEED	40	Seconds per loop.

Social

<LIKES>

data-boundGUID-bound

A like button and count for the data asset in scope. No wiring needed.

<LIKES GUID="demo/hello" LABEL="likes" />

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
GUID	—	Data asset to bind to; defaults to the record in scope or the active record.
LABEL	—	Optional text beside the count.
ICON	heart	Icon.

<RATING>

data-boundGUID-bound

Average star rating and review count for the data asset in scope, from its comments.

<RATING GUID="products/mug" />

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
GUID	—	Data asset; defaults to the record in scope or the active record.
SRC	comments	Collection holding reviews with a rating field.
BASE	rating	Record field used when there are no reviews yet.

<COMMENT-THREAD>

also COMMENTSdata-boundGUID-bound

Threaded comments (or reviews, with RATING) for the data asset in scope. The same component works on a video, a product or a post.

<COMMENT-THREAD GUID="demo/hello" TITLE="Discussion" />

Defaults and inference

With RATING, TITLE is "Reviews" and PLACEHOLDER is "Write a review…" unless set.

Attribute	Default	What it does
GUID	—	Data asset; defaults to the record in scope or the active record.
SRC	comments	Collection that stores comments (each has a guid field).
TITLE	Comments	Heading.
RATING	false	Ask for a 1–5 star rating: reviews.true · false
PLACEHOLDER	Add a comment…	Hint in the text box.
MAX_DEPTH	2	How deep replies may nest.
SHOW_LIKES	true	Show like buttons on comments.true · false

<REVIEWS>

data-boundGUID-bound

Reviews for the data asset in scope: the star rating, likes and a threaded list with star input. No wiring needed.

<REVIEWS GUID="products/mug" />

Defaults and inference

Binds to the record in scope or the active record, like every social component: the same as RATING + LIKES + COMMENT-THREAD RATING="true" with that GUID.

Attribute	Default	What it does
GUID	—	Data asset; defaults to the record in scope or the active record.
TITLE	Reviews	Heading.
PLACEHOLDER	Write a review…	Hint in the text box.
LIKES	true	Show the like button beside the rating.true · false

<ACTION-BAR>

data-boundGUID-bound

Like, save and comment-count buttons for the data asset in scope.

<ACTION-BAR GUID="demo/hello" />

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
GUID	—	Data asset; defaults to the record in scope or the active record.
ITEMS	like,save,comments	Which buttons to show.

<RELATED>

data-boundGUID-bound

Other records like the active one, ranked by shared tags or category. It finds its collection from the active record.

<RELATED SRC="videos" HEADING="More like this" META="{channel} · {duration|dur}" LIMIT="3" />

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
SRC	—	Collection; defaults to the active record's collection.
BY	tags,category	Fields compared to rank similarity.
LIMIT	6	How many to show.
TITLE	title	Field or template for the title.
META	—	Field or template for the second line.
THUMB	thumb	Thumbnail field.
HEADING	Related	Heading.
ACTION	—	Action when an item is clicked; the item becomes the active record.
OPEN	—	State to open the clicked item in. No WIRE needed.

<CONVERSATION>

also CHATdata-bound

A collection-backed message conversation with a composer. Messages persist locally; live networking requires a separately configured data backend.

<CONVERSATION SRC="messages" ROOM="launch" TITLE="Launch team" />

Defaults and inference

Nothing beyond the defaults in the table: an attribute you leave out takes the value shown there.

Attribute	Default	What it does
SRC	messages	Collection containing messages.
ROOM	—	Only messages whose room field has this value; new messages receive it.
ROOMFIELD	room	Field containing the conversation identifier.
AUTHOR	author	Message author field.
TEXT	text	Message body field.
DATE	date	ISO date/time field.
TITLE	Conversation	Accessible heading.
PLACEHOLDER	Write a message…	Composer hint.
SEND	Send	Send button label.
HEIGHT	420px	Message list height.

Universal attributes

Every component accepts these.

Attribute	Default	What it does
ID	—	Names the element. Inputs publish their value into the pipe under this key.
IF	—	Render only when this value is non-empty, e.g. IF="{user}".
UNLESS	—	Render only when this value is empty.
WIDTH	—	CSS width, e.g. 320px or 50%.
HEIGHT	—	CSS height.
MARGIN	—	CSS margin.
PAD	—	CSS padding.
FLEX	—	CSS flex shorthand inside a ROW or COL.
TONE	—	Colour role: accent, success, warning, error or muted.