Manages a dynamic list of items with add/remove/reorder reconciliation. Each item is identified by a unique key. When the list changes, only the changed items are updated. component.each differs from component.each_live in that it does a full re-render of the HTML element instead of patches.

Avoid using each for list items that contain <input>, <textarea>, or <select> elements — each changed item replaces its DOM via innerHTML, destroying focus and in-progress user input. Use each_live with targeted patches instead.

slice must return a List rather than a single element, unlike component.simple.

While the type for key can be defined by the user, internally, these are converted to String.

The render function is called for each item and returns a Component. For plain HTML items, wrap with component.static.

component.each(
  slice: fn(model) { model.counters },
  key: fn(counter) { counter.id },
  render: fn(counter) {
    component.static(fn(_) {
      html.div([class("counter")], [
        html.text(int.to_string(counter.value))
      ])
    })
  }
)

Manages a dynamic list of items with add/remove/reorder reconciliation. Each item is identified by a unique key. When the list changes, only the changed items are updated. component.each_live differs from component.each in that patches to the DOM element are applied instead of a full re-render. This is useful when list items are updated frequently.

slice must return a List rather than a single element, unlike component.live.

While the type for key can be defined by the user, internally, these are converted to String.

The initial function returns a Component for each item’s first render. Wrap plain HTML with component.static. The patch function returns patches applied on updates (the item’s root must remain).

component.each_live(
  slice: fn(model) { model.series },
  key: fn(series) { series.id },
  initial: fn(series) {
    component.static(fn(_) {
      html.div([class("display-data")], [
        html.span([class("value")], [html.text("0")])
      ])
    })
  },
  patch: fn(series) {
    [SetText(".value", int.to_string(series.value))]
  },
)

Fragments allow you to return multiple components from a single function. The children are rendered in order and concatenated into the parent’s HTML. This is similar to Lustre’s [element.fragment][https://hexdocs.pm/lustre/lustre/element.html#fragment].

fn app(_model: Model) -> Component(Model, Message, Element(Message)) {
  component.fragment([
    component.static(fn(_) { html.h1([], [html.text("My App")]) }),
    component.simple(...),
    component.each(...),
  ])
}

Live components render an initial HTML structure once, then apply DOM patches on subsequent updates. This avoids the full innerHTML replacement of simple, which means existing nodes are never destroyed between updates.

Use live whenever the component contains <input>, <textarea>, or <select> elements. Because the DOM nodes are preserved, focus, cursor position, and any in-progress user input survive model updates. This also makes live the right choice for high-frequency updates such as drag-and-drop, animations, and real-time data (60fps rendering).

The patch function returns a list of Patch values. Each patch targets an element relative to the component’s root using a CSS selector.

The first parameter of initial is a Slotter — call slot(child_component) wherever you want a nested component to appear. Ignore it with _ if no children are needed.

Example

component.live(
  slice: fn(model) { model.data },
  initial: fn(_) {
    html.div([], [
      html.span([class("value")], [html.text("0")]),
      html.div([class("bar")], [])
    ])
  },
  patch: fn(data) {
    [
      SetText(".value", int.to_string(data)),
      SetStyle(".bar", "width", int.to_string(data) <> "%"),
    ]
  }
)

This is the entry point for rendering, mounting a component tree to a specific DOM element. It creates a subscription to the store and renders the entire component tree whenever the model changes.

• selector: CSS selector for the mount point (e.g., "#app")
• to_html: Function to convert html type to String (e.g., element.to_string for Lustre or fn(html) {html} for raw HTML strings)
• to_slot: Zero-argument function returning an html placeholder value that serialises to <lily-slot></lily-slot>. Used when nesting components via Slotter. For Lustre: fn() { element.element("lily-slot", [], []) }. For raw HTML strings: fn() { "<lily-slot></lily-slot>" }.
• view: Function that takes the model and returns the root component tree

runtime
|> component.mount(
  selector: "#app",
  to_html: element.to_string,
  to_slot: fn() { element.element("lily-slot", [], []) },
  view: app,
)

When you want to disable a component when the transport is disconnected, this allows you to do that. The connected function extracts the connection status from the model. When it returns False, Lily adds data-lily-disabled="true" and aria-disabled="true" attributes plus a lily-disconnected CSS class to the component’s root element, and prevents all event handlers from firing. Custom styling, such as greying the component out or changing opacity, can be achieved with simple CSS styling.

Pipe this after creating a component.

component.simple(
  slice: fn(model) { model.transfer_amount },
  render: fn(amount, _) {
    html.button([], [html.text("Transfer $" <> int.to_string(amount))])
  },
)
|> component.require_connection(fn(model) { model.connected })

This is the most common component type. It subscribes to a slice of the model and re-renders the entire component when that slice changes.

The render function receives the slice value and a Slotter. Call slot(child_component) wherever you want a nested component to appear, or ignore the slot parameter with _ if no children are needed.

Avoid using simple for components that contain <input>, <textarea>, or <select> elements — every slice change replaces the component’s entire DOM via innerHTML, which destroys focus and any in-progress user input. Use live with targeted patches instead.

component.simple(
  slice: fn(model) { model.count },
  render: fn(count, _) {
    html.div([], [html.text("Count: " <> int.to_string(count))])
  }
)

Static components render once and never update. Useful for headers, static text, or any content that doesn’t depend on the model.

The content function receives a Slotter. Call slot(child_component) wherever you want a nested component to appear, or ignore the slot parameter with _ if no children are needed.

component.static(fn(_) { html.h1([], [html.text("My App")]) })

Switch a component’s comparison strategy from reference to structural equality. By default, components use reference equality (===) to detect slice changes. This works well for primitives and unchanged references.

Use structural() when your slice function returns new tuples, lists, or other constructed values on every call.

Also see component.CompareStrategy.

component.simple(
  slice: fn(model) { #(model.x, model.y) },  // Returns new tuple each time
  render: fn(pos, _) { ... }
)
|> component.structural  // Enable deep equality check