Element

button

Creates an HTML button element.

Inputs:

• label (Text) — button text
• channel (Text) — event channel to emit on click
• variant (Text) — visual style: primary, secondary, or danger
• disabled (Boolean) — whether the button is disabled

Output: html (Text) — HTML button fragment

See also: form

checkbox

Creates an HTML checkbox with label.

Inputs:

• label (Text) — checkbox label
• checked (Boolean) — default checked state
• channel (Text) — event channel to emit on change

Output: html (Text) — HTML checkbox fragment

See also: radio, form

color

Creates an HTML color picker.

Inputs:

• label (Text) — color picker label
• value (Text) — default color
• channel (Text) — event channel to emit on change

Output: html (Text) — HTML color picker fragment

See also: form

container

Wraps content in a flexbox container for layout control.

Inputs:

• content (Text) — HTML content to wrap
• direction (Text) — flex direction: row or column
• gap (Number) — gap between items in pixels
• align (Text) — align-items: stretch, center, start, or end
• justify (Text) — justify-content: start, center, end, between, or around
• wrap (Boolean) — whether items wrap to next line

Output: html (Text) — HTML container fragment

See also: form, tabs

form

Assembles HTML element fragments into a complete interactive form document. Use ‘Test Form’ from the context menu to launch a live preview window.

Inputs:

• content (Text) — HTML content (composed element fragments)
• css (Text) — custom CSS appended after base styles
• title (Text) — window title
• width (Number) — window width
• height (Number) — window height
• theme (Text) — color theme: light or dark

Output: html (Text) — complete HTML form document

See also: button, text_input, container, drawing/html

image

Creates an HTML image element. Accepts data URIs from drawing/html, svg/render, or any image-producing node.

Inputs:

• src (Image) — image source (data URI or URL)
• alt (Text) — alt text
• width (Number) — display width in pixels — 0 uses intrinsic size
• height (Number) — display height in pixels — 0 uses intrinsic size

Output: html (Text) — HTML image fragment

See also: form, drawing/html, svg/render

label

Creates an HTML label or heading.

Inputs:

• text (Text) — display text
• style (Text) — visual style: heading, body, or caption

Output: html (Text) — HTML label fragment

See also: form

progress

Creates an HTML progress bar.

Inputs:

• label (Text) — progress bar label
• value (Number) — current value
• max (Number) — maximum value

Output: html (Text) — HTML progress bar fragment

See also: form

radio

Creates an HTML radio button group.

Inputs:

• name (Text) — radio group name
• options (Text) — comma-separated list of options
• value (Text) — default selected value
• channel (Text) — event channel to emit on change

Output: html (Text) — HTML radio group fragment

See also: select, form

select

Creates an HTML select dropdown.

Inputs:

• label (Text) — dropdown label
• options (Text) — comma-separated list of options
• value (Text) — default selected value
• channel (Text) — event channel to emit on change

Output: html (Text) — HTML select fragment

See also: radio, form

slider

Creates an HTML range slider.

Inputs:

• label (Text) — slider label
• min (Number) — minimum value
• max (Number) — maximum value
• step (Number) — step increment
• value (Number) — default value
• channel (Text) — event channel to emit on change

Output: html (Text) — HTML slider fragment

See also: text_input, form

tabs

Creates a tabbed container with switchable panels.

Inputs:

• labels (Text) — comma-separated tab labels
• tab_1 (Text) — content for tab 1
• tab_2 (Text) — content for tab 2
• tab_3 (Text) — content for tab 3
• tab_4 (Text) — content for tab 4
• channel (Text) — event channel to emit on tab switch

Output: html (Text) — HTML tabs fragment

See also: container, form

text_input

Creates an HTML text input with label.

Inputs:

• label (Text) — input label
• placeholder (Text) — placeholder text
• value (Text) — default value
• channel (Text) — event channel to emit on change

Output: html (Text) — HTML text input fragment

See also: textarea, form

textarea

Creates an HTML textarea with label.

Inputs:

• label (Text) — textarea label
• placeholder (Text) — placeholder text
• value (Text) — default value
• rows (Number) — visible rows
• channel (Text) — event channel to emit on change

Output: html (Text) — HTML textarea fragment

See also: text_input, form