Components · engine v3.0.0

55 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.

Theme 31 themes · demos use the read-only demo data

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>

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>

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>

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 original 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, the 2001 original." />
</ACONTAINER>

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>

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)

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

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" />

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>

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)

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.

<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" />

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.
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>

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.
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>

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.
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" />

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.
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>

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" />

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" />

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)

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" />

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

Content

<TEXT>

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

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

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>

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" />

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>

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>

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>

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>

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>

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>

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>

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}." />

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>

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}" />

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>

Attribute	Default	What it does
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).

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" />

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" />

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

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.

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

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" />

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>

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.

<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" />

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" />

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.
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" />

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>

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

<AUDIO ID="deck" SRC="tracks" LIST="false" />
<WAVEFORM FOR="deck" HEIGHT="48px" />

Attribute	Default	What it does
BIND	—	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" />

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

<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" />

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}" />

Attribute	Default	What it does
DURATION	60	Length in seconds.
SRC	—	Collection of clips (fields start, end, label in seconds).
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" />

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" />

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" />

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" />

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" />

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" />

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" />

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" />

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

<ACTION-BAR>

data-boundGUID-bound

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

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

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" />

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.

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.