clipboard
→
cmd
→
common
→
dialog
→
dom
→
html
→
http
→
js
→
nav
→
sub
→
svg
→
url
→
variant
→
websocket
→
README
U
Cell
U
Cmd
U
Emit
U
Enumerate
U
Html
U
Resource
T
App
- ::renderApp::render
T
Status
T
Val
- ::assocVal::assoc
- ::assoc_byVal::assoc_by
- ::constantVal::constant
- ::enumerateVal::enumerate
- ::enumerate_byVal::enumerate_by
- ::mapVal::map
- ::map2Val::map2
- ::map3Val::map3
- ::map4Val::map4
- ::map5Val::map5
- ::map6Val::map6
- ::map7Val::map7
- ::map8Val::map8
- ::map9Val::map9
- ::switchVal::switch
- ::switch_byVal::switch_by
- ::viewVal::view
- ::view2Val::view2
- ::view3Val::view3
- ::view4Val::view4
- ::view5Val::view5
- ::view6Val::view6
- ::view7Val::view7
- ::view8Val::view8
- ::view9Val::view9
V
batch
V
cell
V
cell_with_emit
V
create_pure_state
V
create_resource
V
create_state
V
create_state_with_init
V
create_state_with_input
V
create_variable
V
delay
V
elmish
V
new
V
none
V
simple_cell
V
simple_cell_with_emit
V
static_cell

README

#HTML

The html package provides wrapper functions for all HTML elements. Basic usage:

///|
fn view(emit : Emit[Msg], model : Model) -> Html {
  div(id="counter", style=["border: 1px solid black"], [
    h1(id="title", "the count is \{model.count}"),
    button(class="...", on_click=emit(Inc), "+"),
    button(class="...", on_click=emit(Dec), "-"),
  ])
}

Frequently used attributes are exposed as optional arguments. To access any HTML attribute, see Attribute Builder. Most HTML wrappers accept a positional argument whose type is constrained by IsChildren, so you can pass an Array[Html] or a String. See Children for details.

There are also a few special helpers you will use frequently:

text()

To represent text in HTML, use the text function.

///|
let _ = p([text("hello world")])
let _ = p("hello world") // equivalent to above

nothing

It does not represent an actual HTML element. This is useful when handling multiple Option values in your model:

///|
fn bad(path : Path, tag : Tag?) {
  let path = foo(path)
  let tag = match tag {
    None => []
    Some(x) => [view(x)] // Yuck!
  }
  div([path] + tag) // Don't do this
}

///|
fn good(path : Path, tag : Tag?) {
  let path = foo(path)
  let tag = match tag {
    None => nothing
    Some(x) => view(x)
  }
  div([path, tag]) // Use @html.nothing
}

#Children

Almost every HTML element accepts a positional argument whose type is bounded by the IsChildren trait. This means you can pass any type that implements this trait as children to the HTML wrapper.

Currently it accepts the following types:

type	example
Array[Html]	div([html1, html2])
String	div("string here")
Html	div(p([...]))
Map[String,Html]	div({"k1": html1, "k2": html2})

#Keyed Children

When children are passed as Map[String, Html], Rabbita treats them as keyed children. Keys are used to match and reuse nodes across updates, which helps preserve DOM and Cell state when items are inserted, removed, or reordered.

Keys must be unique and stable (use a business ID, not an array index).
Changing a key means the old node is removed and a new one is created.

Example:

///|
let html : Html = ul({
  "todo-1": li("Buy milk"),
  "todo-2": li("Write docs"),
  "todo-3": li("Write code"),
})

#Event Handlers

Rabbita separates event callbacks from UI views to manage side effects and avoid stale state, keeping UI predictable as code grows.

HTML wrappers provide common events as optional arguments like on_click, on_mouseup, on_scroll, and on_submit. Each requires a Cmd binding to a Msg you define. When an event fires, the Msg (and any extra payload) is forwarded to the centralized state update function.

Registering the same event more than once composes the handlers in registration order. When a wrapper receives both an event in attrs and its matching named event argument, the attrs handler runs first and the named handler runs second. Non-event attributes and properties keep their usual last-write-wins behavior.

Example:

///|
#cfg(target="js")
fn update2(msg : Msg2, _ : Model2) -> Model2 {
  match msg {
    StartDraw(mouse) => println("start at \{mouse.offset_pos()}")
    EndDraw(mouse) => println("end at \{mouse.offset_pos()}")
  }
}

///|
fn view2(emit : Emit[Msg2], _ : Model2) -> Html {
  canvas(
    on_mousedown=m => emit(StartDraw(m)),
    on_mouseup=m => emit(EndDraw(m)),
    nothing,
  )
}

#Advanced Usage

#Attribute Builder

The attribute builder is a workaround for cases where the HTML wrapper does not expose a specific attribute or event. It is not the primary API and may be less ergonomic or less type-safe than the dedicated wrapper parameters. Prefer the wrapper options when available, and fall back to the builder only when needed.

Example:

///|
let html1 : Html = div(
  attrs=Attrs::build().class("card").style("gap", "12px").data("..."),
  [text("Hello")],
)

#Escape Hatch

The wrapper functions and properties provided here may not cover all possible use cases. If you encounter missing functionality, feel free to file an issue or use the node() function as a workaround. The node() function allows you to manually specify the tag name, attributes, and children for your HTML element, offering flexibility for advanced or uncommon scenarios.

///|
let html2 : Html = node(
  "div",
  Attrs::build().class("card").style("gap", "12px").data("..."),
  [p("text1"), p("text2")],
)

#HTML

#Children

#Keyed Children

#Event Handlers

#Advanced Usage

#Attribute Builder

#Escape Hatch

#Keyboard

#Mouse

#Scroll

#IsChildren

#Attrs

#Attrs::abbr

#Attrs::accept

#Attrs::accept_charset

#Attrs::accesskey

#Attrs::action

#Attrs::align

#Attrs::allow

#Attrs::allowfullscreen

#Attrs::alpha

#Attrs::alt

#Attrs::anchor

#Attrs::aria_activedescendant

#Attrs::aria_atomic

#Attrs::aria_autocomplete

#Attrs::aria_braillelabel

#Attrs::aria_brailleroledescription

#Attrs::aria_busy

#Attrs::aria_checked

#Attrs::aria_colcount

#Attrs::aria_colindex

#Attrs::aria_colindextext

#Attrs::aria_colspan

#Attrs::aria_controls

#Attrs::aria_current

#Attrs::aria_describedby

#Attrs::aria_description

#Attrs::aria_details

#Attrs::aria_disabled

#Attrs::aria_dropeffect

#Attrs::aria_errormessage

#Attrs::aria_expanded

#Attrs::aria_flowto

#Attrs::aria_grabbed

#Attrs::aria_haspopup

#Attrs::aria_hidden

#Attrs::aria_invalid

#Attrs::aria_keyshortcuts

#Attrs::aria_label

#Attrs::aria_labelledby

#Attrs::aria_level

#Attrs::aria_live

#Attrs::aria_modal

#Attrs::aria_multiline

#Attrs::aria_multiselectable

#Attrs::aria_orientation

#Attrs::aria_owns

#Attrs::aria_placeholder

#Attrs::aria_posinset

#Attrs::aria_pressed

#Attrs::aria_readonly

#Attrs::aria_relevant

#Attrs::aria_required

#Attrs::aria_roledescription

#Attrs::aria_rowcount

#Attrs::aria_rowindex

#Attrs::aria_rowindextext

#Attrs::aria_rowspan

#Attrs::aria_selected

#Attrs::aria_setsize

#Attrs::aria_sort

#Attrs::aria_valuemax

#Attrs::aria_valuemin

#Attrs::aria_valuenow

#Attrs::aria_valuetext

#Attrs::as_

#Attrs::async_

#Attrs::autocapitalize

#Attrs::autocomplete

#
Keyboard

#
Mouse

#
Scroll

#
IsChildren

#
Attrs

#
Attrs::abbr

#
Attrs::accept

#
Attrs::accept_charset

#
Attrs::accesskey

#
Attrs::action

#
Attrs::align

#
Attrs::allow

#
Attrs::allowfullscreen

#
Attrs::alpha

#
Attrs::alt

#
Attrs::anchor

#
Attrs::aria_activedescendant

#
Attrs::aria_atomic

#
Attrs::aria_autocomplete

#
Attrs::aria_braillelabel

#
Attrs::aria_brailleroledescription

#
Attrs::aria_busy

#
Attrs::aria_checked

#
Attrs::aria_colcount

#
Attrs::aria_colindex

#
Attrs::aria_colindextext

#
Attrs::aria_colspan

#
Attrs::aria_controls

#
Attrs::aria_current

#
Attrs::aria_describedby

#
Attrs::aria_description

#
Attrs::aria_details

#
Attrs::aria_disabled

#
Attrs::aria_dropeffect

#
Attrs::aria_errormessage

#
Attrs::aria_expanded

#
Attrs::aria_flowto

#
Attrs::aria_grabbed

#
Attrs::aria_haspopup

#
Attrs::aria_hidden

#
Attrs::aria_invalid

#
Attrs::aria_keyshortcuts

#
Attrs::aria_label

#
Attrs::aria_labelledby

#
Attrs::aria_level

#
Attrs::aria_live

#
Attrs::aria_modal

#
Attrs::aria_multiline

#
Attrs::aria_multiselectable

#
Attrs::aria_orientation

#
Attrs::aria_owns

#
Attrs::aria_placeholder

#
Attrs::aria_posinset

#
Attrs::aria_pressed

#
Attrs::aria_readonly

#
Attrs::aria_relevant

#
Attrs::aria_required

#
Attrs::aria_roledescription

#
Attrs::aria_rowcount

#
Attrs::aria_rowindex

#
Attrs::aria_rowindextext

#
Attrs::aria_rowspan

#
Attrs::aria_selected

#
Attrs::aria_setsize

#
Attrs::aria_sort

#
Attrs::aria_valuemax

#
Attrs::aria_valuemin

#
Attrs::aria_valuenow

#
Attrs::aria_valuetext

#
Attrs::as_

#
Attrs::async_

#
Attrs::autocapitalize

#
Attrs::autocomplete

#
Attrs::autocorrect

#
Attrs::autofocus

#
Attrs::autoplay

#
Attrs::background

#
Attrs::bgcolor

#
Attrs::border

#
Attrs::build