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.

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 should return HTML (in whatever type is defined on component.mount).

Example

component.each(
  slice: fn(model) { model.counters },
  key: fn(counter) { counter.id },
  render: fn(counter) {
    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 renders the initial HTML for each item. The patch function returns patches to apply on updates.

Example

component.each_live(
  items: fn(model) { model.series },
  key: fn(series) { series.data.id },
  initial: fn(data) {
    html.div([class("display-data")], [
      html.span([class("value")], [html.text("0")])
    ])
  },
  patch: fn(series) {
    [SetText(".value", int.to_string(series.data.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].

Example

fn app() -> Component(Model, Message, Element(Message)) {
  component.fragment([
    component.static(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 is much faster than innerHTML, replacement for frequent updates (e.g., drag-and-drop, animations, real-time data) for 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.

Example

component.live(
  slice: fn(model) { model.data },
  initial: 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.

Parameters

• store: The application store
• 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)
• view: Function that takes the model and returns the root component tree

Example

runtime
|> component.mount(selector: "#app", to_html: element.to_string, 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.

Example

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 should return HTML (in whatever type is defined on component.mount).

Example

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.

Example

component.static(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.

Example

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