See Plushie.Canvas.Shape.arc/5.

See Plushie.Canvas.Shape.arc_to/5.

See Plushie.Canvas.Shape.bezier_to/6.

Clickable button.

Emits %WidgetEvent{type: :click, id: id} when clicked.

Example

button("save", "Save", style: :primary)

button "save", "Save" do
  style :primary
end

Canvas for drawing shapes organized into named layers.

Keyword form

canvas("drawing",
  layers: %{"main" => [%{type: "circle", x: 50, y: 50, r: 20}]},
  width: 400,
  height: 300
)

Do-block form

Use layer/2 to collect layers declaratively:

canvas "chart", width: 400, height: 300 do
  layer "grid" do
    rect(0, 0, 400, 300, stroke: "#eee")
  end
  layer "data" do
    for bar <- bars do
      rect(bar.x, bar.y, bar.w, bar.h, fill: bar.color)
    end
  end
end

Options

• :layers -- map of layer names to shape descriptor lists
• :width / :height -- dimensions
• :background -- background color

Boolean checkbox toggle.

Emits %WidgetEvent{type: :toggle, id: id, value: boolean} when toggled.

Example

checkbox("agree", model.agreed, label: "I agree")

checkbox "agree", model.agreed do
  label "I agree"
end

Builds a circle shape. See Plushie.Canvas.Shape.circle/4.

See Plushie.Canvas.Shape.clip/4.

See Plushie.Canvas.Shape.close/0.

Vertical flex layout.

Options

• :spacing -- gap between children
• :padding -- padding around children
• :width / :height -- :fill, :shrink, or number
• :align_x -- :left, :center, :right
• :id -- explicit ID (otherwise auto-generated from call site)
• :children -- child nodes (function-form shorthand)

Example

column spacing: 8 do
  text("Hello")
  text("World")
end

Combo box with free-text input and dropdown suggestions.

Example

combo_box("lang", ["Elixir", "Rust", "Go"], model.lang, placeholder: "Type...")

combo_box "lang", ["Elixir", "Rust", "Go"], model.lang do
  placeholder "Type..."
end

Generic box with alignment and padding.

Example

container "hero", padding: 16 do
  text("Welcome")
end

See Plushie.Canvas.Shape.ellipse/7.

@spec exists?(tree :: Plushie.Widget.ui_node() | nil, id :: String.t()) :: boolean()

Returns true if a node with id exists in the tree.

@spec find(tree :: Plushie.Widget.ui_node(), id :: String.t()) ::
  Plushie.Widget.ui_node() | nil

Finds the first node in a tree whose :id matches id.

Delegates to Plushie.Tree.find/2. Returns the node map or nil.

Example

tree = MyApp.view(model)
Plushie.UI.find(tree, "save_button")

@spec find(
  tree :: Plushie.Widget.ui_node(),
  id :: String.t(),
  window_id :: String.t()
) :: Plushie.Widget.ui_node() | nil

See Plushie.Tree.find/3.

@spec find_all(
  tree :: Plushie.Widget.ui_node() | nil,
  id_or_pred :: String.t() | (Plushie.Widget.ui_node() -> boolean())
) :: [Plushie.Widget.ui_node()]

Finds all nodes matching a predicate.

Floating overlay layout.

Example

floating "popup" do
  text("Floating content")
end

Grid layout.

Options

• :columns -- number of columns
• :column_width -- width of each column
• :row_height -- height of each row
• :spacing -- gap between cells
• :padding -- padding around grid
• :width / :height -- dimensions
• :id -- explicit ID (otherwise auto-generated from call site)

Example

grid columns: 3, spacing: 8 do
  for item <- items do
    text(item.name)
  end
end

Groups child shapes with optional positioning and interaction.

Do-block form

group "btn", x: 4, y: 4, on_click: true do
  rect(0, 0, 32, 32, radius: 4)
end

List form

group([rect(0, 0, 100, 40)], x: 10, y: 50)

@spec ids(tree :: Plushie.Widget.ui_node() | nil) :: [String.t()]

Returns all node IDs in the tree.

Raster image display.

Example

image("logo", "/assets/logo.png", width: 200, content_fit: :cover)

image "logo", "/assets/logo.png" do
  width 200
  content_fit :cover
end

Keyed column for efficient list diffing.

Options

Same as column/1.

Example

keyed_column spacing: 8 do
  for item <- items do
    text(item.id, item.name)
  end
end

Collects shapes into a named layer for use inside canvas blocks.

canvas "chart", width: 400 do
  layer "grid" do
    rect(0, 0, 400, 300, stroke: "#eee")
  end
end

Builds a line shape. See Plushie.Canvas.Shape.line/5.

See Plushie.Canvas.Shape.line_to/2.

See Plushie.Canvas.Shape.linear_gradient/3.

Creates a looping transition descriptor.

Sets repeat: :forever and auto_reverse: true by default. Requires from: and to:.

Examples

opacity: loop(800, to: 0.4, from: 1.0)
rotation: loop(1000, to: 360, from: 0, auto_reverse: false)
opacity: loop(to: 0.4, from: 1.0, duration: 800, cycles: 3)

Markdown content renderer.

Forms

• markdown(content) -- auto-generated ID
• markdown(id, content) -- explicit ID
• markdown(id, content, opts) -- explicit ID with options

Example

markdown("# Hello\n\nSome **bold** text")
markdown("my_md", "# Hello", code_theme: "dracula")

See Plushie.Canvas.Shape.move_to/2.

Overlay container. First child is the anchor, second is the overlay content.

Options

• :position -- :below, :above, :left, :right
• :gap -- space between anchor and overlay in pixels
• :offset_x -- horizontal offset in pixels
• :offset_y -- vertical offset in pixels

Example

overlay "popup", position: :below, gap: 4 do
  button("anchor", "Click me")
  container "dropdown" do
    text("dropdown_text", "Dropdown content")
  end
end

Pane grid for resizable tiled panes.

Options

• :spacing -- gap between panes
• :min_size -- minimum pane size
• :on_resize -- resize event tag
• :on_drag -- drag event tag
• :on_click -- click event tag

Children are pane content keyed by ID.

Example

pane_grid "editor_panes", spacing: 2 do
  column id: "left" do
    text("Left pane")
  end
  column id: "right" do
    text("Right pane")
  end
end

Builds a path shape. See Plushie.Canvas.Shape.path/2.

Dropdown pick list for selecting from a list of options.

Example

pick_list("country", ["UK", "US", "DE"], model.country, placeholder: "Choose...")

pick_list "country", ["UK", "US", "DE"], model.country do
  placeholder "Choose..."
end

Pin layout for absolute positioning.

Example

pin "overlay" do
  text("Pinned content")
end

Pointer area for capturing mouse events on children.

Options

• :on_press, :on_release, :on_right_press, :on_middle_press
• :on_enter, :on_exit

Example

pointer_area "clickable" do
  text("Click me")
end

Progress indicator.

Forms

• progress_bar(range, value) -- auto-generated ID (sugar)
• progress_bar(id, range, value) -- explicit ID
• progress_bar(id, range, value, opts) -- explicit ID with options

Arguments

• range -- {min, max} tuple defining the full range
• value -- current value within the range

Example

progress_bar({0, 100}, model.progress)
progress_bar("dl_progress", {0, 100}, model.progress, height: 8)

QR code display. No children.

Arguments

• id -- unique identifier
• data -- the string to encode

Options

• :cell_size -- size of each QR module in pixels (default 4.0)
• :cell_color -- color of dark modules
• :background -- color of light modules
• :error_correction -- :low, :medium (default), :quartile, :high

Example

qr_code("my_qr", "https://example.com", cell_size: 6)

qr_code "my_qr", "https://example.com" do
  cell_size 6
end

See Plushie.Canvas.Shape.quadratic_to/4.

Radio button for single-value selection from a group.

Use the group option so all radios in the same group emit select events with the group name as the ID instead of each radio's individual ID.

Example

radio("size_sm", "small", model.size, label: "Small", group: "size")
radio("size_lg", "large", model.size, label: "Large", group: "size")

radio "size_sm", "small", model.size do
  label "Small"
  group "size"
end

Builds a rectangle shape. See Plushie.Canvas.Shape.rect/5.

Responsive layout that adapts to available size.

Options

• :width / :height -- dimensions
• :id -- explicit ID (otherwise auto-generated from call site)

Example

responsive do
  column do
    text("Adapts to size")
  end
end

Rich text display with styled spans.

Options

• :spans -- list of span descriptors
• :width -- width

Example

rich_text("styled", spans: [%{text: "bold", weight: :bold}, %{text: " normal"}])

rich_text "styled" do
  spans [%{text: "bold", weight: :bold}, %{text: " normal"}]
end

See Plushie.Canvas.Shape.rotate/1.

See Plushie.Canvas.Shape.rounded_rect/5.

Horizontal flex layout.

Options

Same as column/1.

Example

row spacing: 4 do
  button("yes", "Yes")
  button("no", "No")
end

Horizontal or vertical divider.

Example

rule(width: :fill)

rule do
  direction :vertical
  style :weak
end

See Plushie.Canvas.Shape.scale/1.

See Plushie.Canvas.Shape.scale/2.

Scrollable region.

Example

scrollable "feed" do
  for item <- items do
    text(item.title)
  end
end

Sensor for detecting layout changes on children.

Options

• :on_resize, :on_appear

Example

sensor "tracked" do
  text("Monitored content")
end

Creates a sequential animation chain.

Steps execute one after another on the same prop. Accepts a list of transition/spring descriptors.

Examples

opacity: sequence([
  transition(200, to: 1.0, from: 0.0),
  loop(800, to: 0.7, from: 1.0, cycles: 3),
  transition(300, to: 0.0)
])

opacity: sequence do
  transition(200, to: 1.0, from: 0.0)
  transition(300, to: 0.0)
end

Horizontal slider for numeric range input.

Arguments

• range -- {min, max} tuple or min..max Range
• value -- current value

Example

slider("volume", {0, 100}, model.volume, step: 5)
slider("volume", 0..100, model.volume, step: 5)

slider "volume", {0, 100}, model.volume do
  step 5
end

Flexible spacer. No children.

Options

• :width -- :fill, :shrink, or number
• :height -- :fill, :shrink, or number

Example

space(width: :fill)

space do
  width :fill
end

Creates a physics-based spring descriptor.

Springs have no fixed duration -- they settle naturally based on stiffness and damping.

Examples

scale: spring(to: 1.05, preset: :bouncy)
scale: spring(to: 1.05, stiffness: 200, damping: 20)

scale: spring do
  to 1.05
  preset :bouncy
end

Z-axis stacking layout (overlays).

Example

stack do
  image("bg", "/path/to/bg.png")
  container "overlay", padding: 16 do
    text("Overlaid text")
  end
end

Builds a stroke descriptor. See Plushie.Canvas.Shape.stroke/3.

SVG image display.

Example

svg("icon", "/assets/icon.svg", width: 24, height: 24)

svg "icon", "/assets/icon.svg" do
  width 24
  height 24
end

Data table widget.

Options

• :columns -- list of column descriptors (%{key, label, width})
• :rows -- list of row data maps

The do block can contain row content templates (e.g. for custom cell rendering). Children from the block are stored in :children.

Examples

table("users", columns: cols, rows: data)

table "users", columns: cols, rows: data do
  text("custom footer")
end

Text label.

Forms

• text(content) -- auto-generated ID (sugar for quick labels)
• text(id, content) -- explicit ID
• text(id, content, opts) -- explicit ID with options

Example

text("Hello, world!")
text("greeting", "Hello, world!", size: 18)

Multi-line text editor.

Example

text_editor("notes", model.notes, width: :fill, height: 200)

text_editor "notes", model.notes do
  width :fill
  height 200
end

Single-line text input.

Emits %WidgetEvent{type: :input, id: id, value: value} on change and %WidgetEvent{type: :submit, id: id, value: value} on Enter.

Example

text_input("name", model.name, placeholder: "Your name")

text_input "name", model.name do
  placeholder "Your name"
end

Per-subtree theme override.

Options

• :theme -- theme name string or custom palette map

Example

themer "dark_section", theme: "Dark" do
  column do
    text("This subtree uses the dark theme")
  end
end

Toggle switch.

Emits %WidgetEvent{type: :toggle, id: id, value: boolean} when toggled.

Example

toggler("dark_mode", model.dark_mode, label: "Dark mode")

toggler "dark_mode", model.dark_mode do
  label "Dark mode"
end

Tooltip wrapper. Children are the content being tooltipped.

Forms

• tooltip(id, tip, do: block) -- with children
• tooltip(id, tip, opts, do: block) -- with children and options

Example

tooltip "save_tip", "Save your work", position: :top do
  button("save", "Save")
end

Creates a timed transition descriptor for animated prop values.

The renderer handles interpolation locally -- zero wire traffic during animation. Duration can be a positional argument or a keyword.

Examples

opacity: transition(300, to: 0.0)
opacity: transition(300, to: 0.0, easing: :ease_out)
opacity: transition(to: 0.0, duration: 300)

# Enter animation
opacity: transition(200, to: 1.0, from: 0.0)

# Do-block
opacity: transition 300 do
  to 0.0
  easing :ease_out
end

See Plushie.Canvas.Shape.translate/2.

Vertical slider for numeric range input.

Same as slider/4 but oriented vertically. Accepts {min, max} or min..max.

Example

vertical_slider("brightness", {0, 100}, model.brightness)
vertical_slider("brightness", 0..100, model.brightness)

vertical_slider "brightness", {0, 100}, model.brightness do
  step 1
end

Top-level window container.

Arguments

• id -- stable string identifier for this window
• opts -- keyword list; common option: :title

Example

window "main", title: "My App" do
  column do
    text("Hello")
  end
end