Handbook · Reference · Layout components
Layout components
Where in the UI. Layout tab palette. Type-specific inspector under the shared box/style.
Each type also has the shared box and style. Value fields typically take a ValueSource (static, binding, expression).
| Type | Name | Parameters (summary) |
|---|---|---|
text | Text | String on the surface. source, optional href, format, editable, placeholder, multiline, maxLines, overflow. |
number | Number | Numeric display/edit. source, format, maxDigits, editable, placeholder. |
boolean | Boolean | Toggle, checkbox, or icon. true/false labels, colors, labelPlacement, editable. |
date | Date | ISO date/time. format preset, pickerMode date|time|datetime, editable. |
enum | Enum | Options from a category enum property. categoryId + propertyId, displayMode label|chip|icon. |
stringSelect | String select | Encoded dropdown (selected;opt;opt). separator, displayMode. |
image | Image | Photo or asset. fit contain|cover|fill, href, editable gallery replace, fallback. |
svg | SVG | Template-owned SVG. fit, pointerEvents, bindable fill/stroke/strokeWidth. |
qrCode | QR code | Live QR from payload string. color, backgroundColor, errorCorrection L|M|Q|H, fit. |
rating | Rating | Stars/dots/bars/hearts. maxRating, step, glyph, editable. |
color | Color | Fills the box with a bound color. editable opens a picker. format hex|rgba. |
button | Button | label, href, icon, variant, action, optional confirm dialog. |
icon | Icon | Lucide catalog name. Optional action + confirm (icon button). |
badge | Badge | Chip/label. source, color, backgroundColor. |
progress | Progress | Bar. value, min, max, color. |
timerDisplay | Timer display | Live countdown/stopwatch. timerId, maxUnit. |
slider | Slider | Draggable range. source, min, max, step, valueType, orientation, editable. |
group | Group | Container with children. clipContent. |
spacer | Spacer | Empty gap. optional flex. |
dragHandle | Drag handle | Grip for moving the item on the host canvas. Hidden on public share. |
line | Line | Horizontal or vertical stroke. strokeWidth, color. |
customToken | Custom token | Reserved/extension widget. |
table | Table | Grid from a list, CTBL, or file table. Fields: source (list), tableSource (CTBL/file table, optional itemFrom), editable, schema, visibleRowCount. List source wins over tableSource. |
chart | Chart | Plot from the same dual binding. Fields: chartType, orientation, binCount, source, tableSource, xColumn, series (yColumn/ySource, color, axis, yMin/yMax), xSource, color/label columns, titles, xMin/xMax. See details below. |
listView | List view | Repeating rows from a list. Fields: source, selectionSource (index), editable (tap-to-select). |
Table (inspector fields)
A table can read a list, a category table (CTBL), or a file table. List data wins when source resolves to an array.
| Field | Meaning |
|---|---|
| source | Optional list (local state or item variable). First row is headers when it is a list-of-lists. |
| tableSource | Binding to a category table / file table (or a variable holding that payload). Can read another item via itemFrom. |
| editable | In-place cell/row edits. Ignored for list-backed data. |
| schema | Column schema. Required when the table lives in an item variable (no category schema). |
| visibleRowCount | Max rows painted on the canvas (default: all). |
Chart (inspector fields)
Same dual binding as table: list source wins; else table columns; else separate X/Y list sources. Chart types: line, scatter, timeline, bar, barFrequencies, pie, pieFrequencies, histogram, box.
| Field | Meaning |
|---|---|
| chartType | Visualization kind (static, binding, or expression). |
| orientation | Bar/histogram/box: vertical or horizontal. |
| binCount | Histogram bins (default 10). |
| source | List-backed matrix (rows only, no header). |
| tableSource | CTBL or file-table binding. |
| xColumn / series[].yColumn | Table path: shared X column and per-series Y columns. |
| series | Named Y series (color, stroke, primary/secondary axis, yMin/yMax filters). Multi-series only for line/scatter/timeline (max 8). |
| xSource / series[].ySource | Non-table path: lists, scalars, or static CSV. |
| colorColumn / labelColumn | Optional per-point color and slice/point labels. |
| title, xAxisLabel, yAxisLabel, ySecondaryAxisLabel | Titles and axis labels. |
| xMin / xMax | Inclusive X data filters. Omit = Auto. |
List view
| Field | Meaning |
|---|---|
| source | List to render as rows. |
| selectionSource | 0-based selected index (−1 = none). |
| editable | Tap writes the index. Membership/order edits belong in scripts or Edit Entry. |
Source: containd/.../v2/types/component.ts ComponentType (editor types, aligned with the runtime).