Color or gradient that fills the widget

True when fill is a gradient

Color or gradient that fills the widget's border

True when borderFill is a gradient

The widget's border thickness (px)

Top-left corner radius of the widget (px)

Top-right corner radius of the widget (px)

Bottom-left corner radius of the widget (px)

Bottom-right corner radius of the widget (px)

Color of text and icons

Left space outside the widget (handled by parent layout)

Top space outside the widget (handled by parent layout)

Right space outside the widget (handled by parent layout)

Bottom space outside the widget (handled by parent layout)

Left space between the widget's border and its content

Top space between the widget's border and its content

Right space between the widget's border and its content

Bottom space between the widget's border and its content

Font family name for text. The generic "monospace" maps to the platform's default. "" is the reconciler default.

Pixel size for text; 0 is reconciler default

Numeric text weight (100-900); 0 is reconciler default

Direction that children are laid out.

Cross-axis alignment of children. If direction == "Row", then this controls the vertical alignment, whereas direction == "Column" means this controls the horizontal alignment.

The associated margins of the children are factored into each result. For example, if direction == "Row" and this == "Start", the children are aligned to the top-side offset by their individual marginT distances.

Main-axis placement of the child block, when there's leftover space.

Unlike the cross-axis where children are aligned within their own lanes, on the main-axis, children sit one after another, and justify shifts the whole group. If direction == "Row" and there is free space available:

Start:   [A][B][C]·········
Center:  ····[A][B][C]·····
End:     ·········[A][B][C]

If any of the children in the block are set to grow, the justify field is irrelevant because a growing child leaves no free space.

Start:   [A][B][C·········]  // Since `C` grows, justify is irrelevant
Center:  [A][B][C·········]
End:     [A][B][C·········]

Enabled scrolling directions.

Gap between children (px)

Growth factor of this child along the parent's main-axis. When applied, the parent's leftover space is split between this child and any other growing siblings. No factor (the default value of 0) means the node keeps its content size.

The leftover space consumed by this child is calculated using a ratio of its factor divided by the factor total of all the parent's growing children:

ratio   = factor / total
consume = ratio * leftover

Two Grow: 1 children divide the space evenly (both get 1/2). If they are Grow: 1 and Grow: 2, then the space is divided into thirds (1/3 and 2/3). A single growing child takes all of the leftover space regardless of its growth factor (a lone Grow: 3 produces 3/3).

[A......][B......]  // `A/Grow: 1` & `B/Grow: 1`
[A....][B........]  // `A/Grow: 1` & `B/Grow: 2`
[A...............]  // `A/Grow: 3`

If any of the children are set to grow, justify is irrelevant because a growing child leaves no free space, unless the growing children have their sizes capped.

Static-web only: Prevents shrinking below the content size when set to a value of 0.

Fixed width (px).

A value of 0 means the width is unfixed (the width of the content unless the node grows or is stretched).

Fixed height (px).

A value of 0 means the height is unfixed (the height of the content unless the node grows or is stretched).

Fills the width up to the set value (px), or up to the available space if it's narrower.

A value of 0 means no constraint is applied. If a fixed width is set, then this field is ignored.

Image/Video nodes only Ratio of horizontal-to-vertical pixels used to derive a height value by dividing the width by the ratio.

If an aspect ratio is set, then height is ignored. A value of 0 means no ratio is applied.

ratio  = horizontal pixels / vertical pixels
height = width / ratio

// For example: a width of `1920` & a desired 16:9 aspect ratio
ratio  = 16 / 9          // 1.7778; This is what you set `aspectRatio` to
height = 1920 / ratio    // 1080

The aspect ratio frames the rendering of an Image/Video node, whereas fit controls how the actual image/video fits within that frame.

Render-time opacity; value in the range [0,1]

When false, the node is dropped from the render tree

When true, the reconciler animates the node's height to 0, and then back to the natural content height when false (un-collapsed).

Unlike visible which removes the node from the tree, a collapsed node stays in the tree to permit the collapsing/expanding animation.

Sliding overlays only: Render-time horizontal offset expressed as a fraction of the node's width (a value of 0 keeps the node in place, while a value of 1 fully shifts it by its own width).

Sliding overlays only: Render-time vertical offset expressed as a fraction of the node's height (a value of 0 keeps the node in place, while a value of 1 fully shifts it by its own height).

Icon nodes only: Render-time clockwise rotation in degrees.

Optional semantic action for binding a platform behavior, like "window:close" on an exit button or "window:drag" on a titlebar box. Platforms ignore intents that they don't handle.

Overlay mode. "" == this node lays out normally in its parent's flow. "Modal" == the reconciler lifts this node out of the flow and presents it as a dialog centered over a darkening backdrop covering the rest of the UI (desktop = a movable, modal frameless window; web/Android = a fixed, centered element). The node is shown/hidden via the normal visibility overlay (bind_visible), so opening/closing the dialog rides the diff as a single Insert / Remove. "PinnedBottom" == the reconciler floats this node over the content, anchored to the bottom edge (rather than occupying a slot in the flow), so it can slide off-screen via translateY without reflowing content. Used by the titlebar in @Narrow (where the bar sits at the bottom) to drive hide-away- on-scroll. Empty for most nodes. "BottomSheet" == like PinnedBottom (floated at the anchor's bottom edge, centered up to Size.Max Width), but reserves NO bottom space: the node OVERLAYS the content instead of pushing it. Used by the dashboard drawers, which peek as just a header (their body carries a Visible "@Expanded" variant) and grow upward over the list when expanded; the list reserves the collapsed peek with its own bottom padding. "SideSheet" == a modal detail panel floated at the anchor's RIGHT edge, full anchor height, right-aligned and capped at Size.Max Width (0 == fill, i.e. edge-to-edge in @Narrow). The reconciler draws a darkening scrim over the rest of the anchor (click-to-dismiss; dispatches a "click" to THIS node's path) and slides the panel in/out horizontally via translateX (rest at 1 off-screen; an @Open variant pulls it to 0), the scrim's opacity tracking the slide. Stays in the tree across open/close (state-driven, like the titlebar's translateY hide-away) so the slide animates both ways. Used by the profile post-detail.

Editor nodes: mask the typed value (password field) when true. Defaults false (a normal visible field).

Editor nodes: a multi-line text box (wrapping, top-aligned) instead of the single-line field. The floating placeholder is a single-line affordance, so multi-line fields show a STATIC placeholder that fills the box while empty. Height comes from the style's Size.Height (no auto-grow). Defaults false.

Editor nodes: a display surface the user can select/copy from but not type into (Docuriser's streamed build log). The value still moves via app rebinds (bind_text); a read-only multi-line editor additionally pins its scroll to the bottom on each rebind — log semantics. Defaults false.

Text nodes wrap long lines to the available width by default (like web + Android); "Wrap": 0 keeps them single-line. Editor nodes (multi-line): wrap long lines to the box width (the default). "Wrap": 0 disables wrapping and scrolls horizontally instead — the log/code look (long paths stay on one line). Single-line fields ignore it.

Image / Video nodes: how the media fills its box when its aspect ratio differs from the box's — "Cover" (fill + crop) or "Contain" (fit whole, letterbox). Maps to CSS object-fit. Empty == the reconciler's default (Cover). Ignored by non-media nodes.

Video nodes only: playback flags. autoplay starts on load (browsers require muted to honor it), loop restarts at the end, muted starts silent, controls shows the native scrubber/volume UI. All default false. Ignored elsewhere.

Text nodes: static, design-owned literal copy authored directly in the style (mirrors iconSource for icons). The base value for node.text; a runtime bind_text() value or a dynamic "Bind" override takes precedence. Empty when the style supplies no literal (text then comes from code/bind). NOTE: literal copy here is not localizable — when i18n lands this should become a string-table key (e.g. "@app.title") resolved against app data.

Editor nodes: the floating placeholder copy — shown filling the field while it is empty and unfocused, animating up + smaller to a label once the user focuses or types (the legacy desktop line-editor behavior, now portable to every reconciler). The editor's INITIAL/default value rides the normal text field (the style's literal Text, overridable via bind_text); the user's typed value is owned by the reconciler and read back via VApp::editor_text(). Empty for non-editor nodes.

Icon nodes: the .svg asset name (no extension) the reconciler loads and recolors (to textColor). Empty for non-icon nodes.

Image / Video nodes: the media file path or URL the reconciler loads and displays (a photo, an mp4, an SVG logo). Raster/video render verbatim; an SVG Image renders as a live vector and — unlike a photo, but like an icon — recolors to textColor when the style sets Text Color (else full color is preserved). Resolves the same "Source" attribute icons use; the reconciler reads whichever of iconSource/mediaSource matches the node type. Empty otherwise.

QR nodes: the payload string encoded into the QR matrix (a node URL, a key blob, …). Resolves the "Data" attribute (a separate attribute from Source, so a QR and an icon/image can't be confused). The matrix is derived from this on demand — by the core when serializing for web/Android, by the desktop reconciler directly — so only the payload rides the resolved style. Empty for non-QR nodes (an empty payload paints just the box fill).

Link nodes: the target URL (the "Href" attribute; overridable at runtime via bind_href and per-row via a "Href:" bind). The static-web emitter writes it as the ; runtime reconcilers ignore it.