mizchi/luna/dom does not have a README file

    AnimationEventHandler

    type AnimationEventHandler = (
    AnimationEvent
    ) -> Unit

    AnimationEventHandler[T] - Handler for CSS animation events T is the target element type The event provides animationName, elapsedTime, pseudoElement

    ChangeEventHandler

    type ChangeEventHandler = (
    ChangeEvent
    ) -> Unit

    ChangeEventHandler[T] - Handler for change events on form elements T is the target element type (e.g., HTMLInputElement, HTMLSelectElement)

    ChangeHandler

    type ChangeHandler = (
    ChangeEvent
    ) -> Unit

    Convenience alias: ChangeHandler = ChangeEventHandler[@js_dom.Element]

    ClipboardEventHandler

    type ClipboardEventHandler = (
    ClipboardEvent
    ) -> Unit

    ClipboardEventHandler[T] - Handler for clipboard events (copy, cut, paste) T is the target element type The event provides clipboardData

    DragEventHandler

    type DragEventHandler = (
    DragEvent
    ) -> Unit

    DragEventHandler[T] - Handler for drag and drop events T is the target element type The event provides dataTransfer for drag data

    DragHandler

    type DragHandler = (
    DragEvent
    ) -> Unit

    Convenience alias: DragHandler = DragEventHandler[@js_dom.Element]

    ElementRef

    type ElementRef = (
    Element
    ) -> Unit

    Convenience alias: ElementRef - RefCallback for generic Element Use when you don't need specific element type

    FocusEventHandler

    type FocusEventHandler = (
    FocusEvent
    ) -> Unit

    FocusEventHandler[T] - Handler for focus/blur events T is the target element type The event provides relatedTarget for focus transitions

    FocusHandler

    type FocusHandler = (
    FocusEvent
    ) -> Unit

    Convenience alias: FocusHandler = FocusEventHandler[@js_dom.Element]

    FormEventHandler

    type FormEventHandler = (
    FormEvent
    ) -> Unit

    FormEventHandler[T] - Handler for form submission events T is typically HTMLFormElement Call preventDefault() to prevent default form submission

    FormHandler

    type FormHandler = (
    FormEvent
    ) -> Unit

    Convenience alias: FormHandler = FormEventHandler[@js_dom.Element]

    GenericEventHandler

    type GenericEventHandler = (
    Event
    ) -> Unit

    GenericEventHandler[T] - Handler for any DOM event T is the target element type Use when you need to handle an event type not covered above

    Handler

    type Handler = (
    Any
    ) -> Unit

    Type alias for event handler

    InputEventHandler

    type InputEventHandler = (
    InputEvent
    ) -> Unit

    InputEventHandler[T] - Handler for input events on form elements T is the target element type (e.g., HTMLInputElement, HTMLTextAreaElement) The event provides inputType, data, isComposing, etc.

    InputHandler

    type InputHandler = (
    InputEvent
    ) -> Unit

    Convenience alias: InputHandler = InputEventHandler[@js_dom.Element]

    KeyboardEventHandler

    type KeyboardEventHandler = (
    KeyboardEvent
    ) -> Unit

    KeyboardEventHandler[T] - Handler for keyboard events (keydown, keyup, keypress) T is the target element type (e.g., HTMLInputElement) The event provides key, code, ctrlKey, shiftKey, etc.

    KeyboardHandler

    type KeyboardHandler = (
    KeyboardEvent
    ) -> Unit

    Convenience alias: KeyboardHandler = KeyboardEventHandler[@js_dom.Element]

    MouseEventHandler

    type MouseEventHandler = (
    MouseEvent
    ) -> Unit

    MouseEventHandler[T] - Handler for mouse events (click, dblclick, mouseenter, etc.) T is the target element type (e.g., HTMLButtonElement, HTMLDivElement) The event provides clientX, clientY, button, ctrlKey, etc.

    MouseHandler

    type MouseHandler = (
    MouseEvent
    ) -> Unit

    Convenience alias: MouseHandler = MouseEventHandler[@js_dom.Element]

    PointerEventHandler

    type PointerEventHandler = (
    PointerEvent
    ) -> Unit

    PointerEventHandler[T] - Handler for pointer events (unified mouse/touch/pen) T is the target element type The event provides pointerId, pointerType, pressure, etc.

    PointerHandler

    type PointerHandler = (
    PointerEvent
    ) -> Unit

    Convenience alias: PointerHandler = PointerEventHandler[@js_dom.Element]

    RefCallback

    type RefCallback[T] = (T) -> Unit

    RefCallback[T] - Callback for accessing the DOM element after creation T is the target element type (e.g., HTMLButtonElement, HTMLInputElement) Called when the element is created, before it connects to the DOM

    Usage: button(ref=fn(el) { myButtonRef = el }, children=[text("Click me")])

    Note: The ref callback receives the raw @js_dom element, not DomElement wrapper

    ScrollEventHandler

    type ScrollEventHandler = (
    ScrollEvent
    ) -> Unit

    ScrollEventHandler[T] - Handler for scroll events T is the target element type

    TouchEventHandler

    type TouchEventHandler = (
    TouchEvent
    ) -> Unit

    TouchEventHandler[T] - Handler for touch events on touch devices T is the target element type The event provides touches, targetTouches, changedTouches arrays

    TouchHandler

    type TouchHandler = (
    TouchEvent
    ) -> Unit

    Convenience alias: TouchHandler = TouchEventHandler[@js_dom.Element]

    TransitionEventHandler

    type TransitionEventHandler = (
    TransitionEvent
    ) -> Unit

    TransitionEventHandler[T] - Handler for CSS transition events T is the target element type The event provides propertyName, elapsedTime, pseudoElement

    WheelEventHandler

    type WheelEventHandler = (
    WheelEvent
    ) -> Unit

    WheelEventHandler[T] - Handler for wheel/scroll events T is the target element type The event provides deltaX, deltaY, deltaZ, deltaMode

    WheelHandler

    type WheelHandler = (
    WheelEvent
    ) -> Unit

    Convenience alias: WheelHandler = WheelEventHandler[@js_dom.Element]

    ToDomNode

    pub trait ToDomNode {
    fn to_dom_node(Self) -> DomNode
    }

    ToDomNode trait - types that can be converted to DomNode
    impl ToDomNode for String
    impl ToDomNode for Node
    impl ToDomNode for Text

    ToNode

    pub trait ToNode {
    fn to_node(Self) -> Node
    }

    ToNode trait - types that can be converted to Node
    impl ToNode for String
    impl ToNode for Element
    impl ToNode for Node
    impl ToNode for Text

    AnyValue

    #external
    pub type AnyValue

    Internal any value type

    Attr

    pub(all) enum Attr {
    AttrString(String)
    AttrNumber(Double)
    AttrInt(Int)
    AttrBool(Bool)
    }

    Attribute value type for attrs array Usage: Attr::AttrString("value"), Attr::AttrInt(42), etc.

    Attr::to_attr_value

    fn Attr::to_attr_value(self : Attr) -> AttrValue

    Convert Attr to AttrValue

    AttrValue

    pub(all) enum AttrValue {
    Static(String)
    Dynamic(() -> String)
    Handler((
    Any
    ) -> Unit)
    }

    Reactive attribute value type

    DomElement

    pub struct DomElement {
    // private fields
    }

    DomElement wraps a DOM element (internal @js_dom.Element)

    DomElement::from_dom

    Create DomElement from @js_dom.Element

    DomElement::to_dom

    Get the inner @js_dom.Element

    DomElement::to_node

    fn DomElement::to_node(self : DomElement) -> DomNode

    Convert DomElement to DomNode

    DomNode

    DomNode represents any DOM node for client-side rendering

    Variants:
    • El(DomElement): Element managed by Luna (reconciled, hydrated)
    • Txt(@js_dom.Text): Text node managed by Luna (reconciled)
    • Raw(@js_dom.Node): External node included in reconciliation Use for external DOM that may change (e.g., third-party widgets)
    • Static(@js_dom.Node): Pre-rendered node skipped during reconciliation/hydration Use for content that never changes (e.g., SSR output, static SVG)

    DomNode::to_dom

    Get the inner @js_dom.Node

    Element

    pub struct Element {
    // private fields
    }

    Element wraps a DOM element (internal @js_dom.Element)
    impl ToNode for Element

    Element::from_dom

    Create Element from @js_dom.Element

    Element::to_dom

    Get the inner @js_dom.Element

    Element::to_node

    fn Element::to_node(self : Element) -> Node

    Convert Element to Node

    HandlerMap

    pub type HandlerMap

    Event handlers collection - opaque JS object Internally stores { click?: fn, input?: fn, ... } (lowercase DOM event names) Note: Using opaque JS object instead of MoonBit struct to avoid code bloat

    HandlerMap::blur

    HandlerMap::change

    HandlerMap::click

    HandlerMap::compositionend

    fn HandlerMap::compositionend(self : HandlerMap, handler : (
    Any
    ) -> Unit) -> HandlerMap

    Composition end event (for IME input)

    HandlerMap::compositionstart

    fn HandlerMap::compositionstart(self : HandlerMap, handler : (
    Any
    ) -> Unit) -> HandlerMap

    Composition start event (for IME input)

    HandlerMap::contextmenu

    fn HandlerMap::contextmenu(self : HandlerMap, handler : (
    MouseEvent
    ) -> Unit) -> HandlerMap

    Context menu event (right-click)

    HandlerMap::dblclick

    HandlerMap::drag

    Drag event (during drag)

    HandlerMap::dragend

    Drag end event

    HandlerMap::dragenter

    fn HandlerMap::dragenter(self : HandlerMap, handler : (
    DragEvent
    ) -> Unit) -> HandlerMap

    Drag enter event (enters drop zone)

    HandlerMap::dragleave

    fn HandlerMap::dragleave(self : HandlerMap, handler : (
    DragEvent
    ) -> Unit) -> HandlerMap

    Drag leave event (leaves drop zone)

    HandlerMap::dragover

    fn HandlerMap::dragover(self : HandlerMap, handler : (
    DragEvent
    ) -> Unit) -> HandlerMap

    Drag over event (over drop zone)

    HandlerMap::dragstart

    fn HandlerMap::dragstart(self : HandlerMap, handler : (
    DragEvent
    ) -> Unit) -> HandlerMap

    Drag start event

    HandlerMap::drop

    Drop event

    HandlerMap::focus

    HandlerMap::input

    HandlerMap::keydown

    HandlerMap::keypress

    HandlerMap::keyup

    HandlerMap::mousedown

    fn HandlerMap::mousedown(self : HandlerMap, handler : (
    MouseEvent
    ) -> Unit) -> HandlerMap

    HandlerMap::mouseenter

    fn HandlerMap::mouseenter(self : HandlerMap, handler : (
    MouseEvent
    ) -> Unit) -> HandlerMap

    HandlerMap::mouseleave

    fn HandlerMap::mouseleave(self : HandlerMap, handler : (
    MouseEvent
    ) -> Unit) -> HandlerMap

    HandlerMap::mousemove

    fn HandlerMap::mousemove(self : HandlerMap, handler : (
    MouseEvent
    ) -> Unit) -> HandlerMap

    Mouse move event (for drag, hover tracking)

    HandlerMap::mouseout

    HandlerMap::mouseover

    fn HandlerMap::mouseover(self : HandlerMap, handler : (
    MouseEvent
    ) -> Unit) -> HandlerMap

    HandlerMap::mouseup

    HandlerMap::pointercancel

    fn HandlerMap::pointercancel(self : HandlerMap, handler : (
    PointerEvent
    ) -> Unit) -> HandlerMap

    Pointer cancel event

    HandlerMap::pointerdown

    Pointer down event (unified mouse/touch/pen)

    HandlerMap::pointerenter

    fn HandlerMap::pointerenter(self : HandlerMap, handler : (
    PointerEvent
    ) -> Unit) -> HandlerMap

    Pointer enter event

    HandlerMap::pointerleave

    fn HandlerMap::pointerleave(self : HandlerMap, handler : (
    PointerEvent
    ) -> Unit) -> HandlerMap

    Pointer leave event

    HandlerMap::pointermove

    Pointer move event

    HandlerMap::pointerup

    Pointer up event

    HandlerMap::resize

    fn HandlerMap::resize(self : HandlerMap, handler : (
    Any
    ) -> Unit) -> HandlerMap

    Resize event (for window/element resize)

    HandlerMap::scroll

    fn HandlerMap::scroll(self : HandlerMap, handler : (
    Any
    ) -> Unit) -> HandlerMap

    Scroll event

    HandlerMap::submit

    HandlerMap::touchcancel

    fn HandlerMap::touchcancel(self : HandlerMap, handler : (
    TouchEvent
    ) -> Unit) -> HandlerMap

    Touch cancel event

    HandlerMap::touchend

    Touch end event

    HandlerMap::touchmove

    fn HandlerMap::touchmove(self : HandlerMap, handler : (
    TouchEvent
    ) -> Unit) -> HandlerMap

    Touch move event

    HandlerMap::touchstart

    fn HandlerMap::touchstart(self : HandlerMap, handler : (
    TouchEvent
    ) -> Unit) -> HandlerMap

    Touch start event

    HandlerMap::wheel

    Wheel event (for scroll/zoom)

    ItemEntry

    pub(all) struct ItemEntry[T] {
    item : T
    dom :
    Node

    last :
    Node

    nodes : Array[
    Node
    ]
    dispose : () -> Unit
    }

    Item-DOM mapping entry Stores the association between an item reference and its DOM nodes Also stores a dispose function for cleanup when item is removed

    ItemEntry::new

    fn[T] ItemEntry::new(item : T, dom :
    Node
    ) -> ItemEntry[T]

    Create a new ItemEntry

    ItemEntry::new_with_dispose

    fn[T] ItemEntry::new_with_dispose(item : T, dom :
    Node
    , dispose : () -> Unit) -> ItemEntry[T]

    Create a new ItemEntry with dispose function

    ItemEntry::new_with_nodes_and_dispose

    fn[T] ItemEntry::new_with_nodes_and_dispose(item : T, nodes : Array[
    Node
    ], dispose : () -> Unit) -> ItemEntry[T]

    Create ItemEntry from multiple DOM nodes

    Node

    Node represents any DOM node
    impl ToNode for Node

    Node::to_dom

    Get the inner @js_dom.Node
    fn a(href? : String, target? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

    Create an anchor element

    article

    fn article(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

    Create an article element

    aside

    fn aside(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

    Create an aside element

    attr_dynamic

    fn attr_dynamic(getter : () -> String) -> AttrValue

    Create a dynamic attribute value

    attr_dynamic_style

    fn attr_dynamic_style(getter : () -> String) -> AttrValue

    Create a dynamic style attribute

    attr_handler

    fn attr_handler(handler : (
    Any
    ) -> Unit) -> AttrValue

    Create an event handler attribute

    attr_static

    fn attr_static(value : String) -> AttrValue

    Create a static attribute value

    attr_style

    fn attr_style(style : String) -> AttrValue

    Create a static style attribute (string form, e.g. "color: red; margin: 10px")
    fn br(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)]) -> DomNode

    Create br element

    button

    fn button(disabled? : Bool, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, dyn_disabled? : () -> Bool, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

    Create a button element

    children

    fn[T : ToNode] children(items : Array[T]) -> Array[Node]

    Collect children with ToNode conversion

    clear

    fn clear(container : DomElement) -> Unit

    Clear a container

    clear_jsdom

    fn clear_jsdom(container :
    Element
    ) -> Unit

    Clear a raw @js_dom.Element. clear is the DomElement equivalent.

    code

    fn code(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

    Create code element

    create_element

    fn create_element(tag : String, attrs : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

    Create an element with reactive attributes (returns Node for easy composition)

    create_element_ns

    fn create_element_ns(ns : String, tag : String, attrs : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

    Create an element with namespace (for SVG, MathML, etc.) Use this for SVG elements since they require the SVG namespace.

    Example:
    // Create an SVG rectangle
    let rect = create_element_ns(
    svg_ns,
    "rect",
    [
    ("x", Static("10")),
    ("y", Static("10")),
    ("width", Static("100")),
    ("height", Static("50")),
    ("fill", Static("blue")),
    ],
    [],
    )

    debounced

    fn[T] debounced(sig :
    Signal
    [T], delay_ms : Int) ->
    Signal
    [T]

    Debounce signal updates using setTimeout

    div

    fn div(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

    Create a div element

    dom_children

    fn[T : ToDomNode] dom_children(items : Array[T]) -> Array[DomNode]

    Collect children with ToDomNode conversion

    dom_node

    fn[T : ToDomNode] dom_node(value : T) -> DomNode

    Convert any ToDomNode value to DomNode

    Supported types:
    • @js_dom.Node -> Raw node (included in reconciliation)
    • @js_dom.Element -> Element node (wrapped as El)
    • @js_dom.Text -> Text node
    • String -> Text node (creates new text node)
    • DomNode -> Identity (returns as-is)

    Use this function to integrate external DOM nodes (e.g., SVG created with createElementNS) into Luna's DOM tree.

    Example - integrating SVG created with createElementNS:
    // Create SVG with namespace
    let svg = create_element_ns(svg_ns, "svg", [
    ("width", Static("200")),
    ("height", Static("200")),
    ], [
    create_element_ns(svg_ns, "circle", [
    ("cx", Static("100")),
    ("cy", Static("100")),
    ("r", Static("50")),
    ("fill", Static("blue")),
    ], [])
    ])

    // Use in a div
    div(children=[svg])

    Example - integrating raw @js_dom.Node:
    // Get external node from JS
    let external_node : @js_dom.Node = ...
    // Wrap and use in Luna tree
    div(children=[dom_node(external_node)])
    fn em(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

    Create em element

    events

    fn events() -> HandlerMap

    Create an empty HandlerMap, then chain event handlers Example: events().click(fn(_) { ... }).input(fn(e) { ... })

    Each handler receives the appropriate typed event:
    • click, dblclick, mouseenter, etc. -> MouseHandler (@js_dom.MouseEvent)
    • keydown, keyup, keypress -> KeyboardHandler (@js_dom.KeyboardEvent)
    • input -> InputHandler (@js_dom.InputEvent)
    • change -> ChangeHandler (@js_dom.ChangeEvent)
    • submit -> FormHandler (@js_dom.FormEvent)
    • focus, blur -> FocusHandler (@js_dom.FocusEvent)
    fn footer_(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

    Create a footer element

    for_each

    fn[T] for_each(items : () -> Array[T], render_item : (T, Int) -> DomNode) -> DomNode

    List rendering with reference-based DOM reuse (Solid-style)

    Items are tracked by reference equality (JavaScript ===). When items are reordered, their DOM nodes are moved rather than recreated. Each item gets its own owner scope for proper cleanup when removed.

    form

    fn form(action? : String, http_method? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

    Create a form element

    fragment

    fn fragment(children : Array[DomNode]) -> DomNode

    JSX runtime: Fragment (returns children as a DocumentFragment)
    fn h1(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

    Create h1 element
    fn h2(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

    Create h2 element
    fn h3(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

    Create h3 element
    fn h4(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

    Create h4 element
    fn h5(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

    Create h5 element
    fn h6(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

    Create h6 element

    header_

    fn header_(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

    Create a header element
    fn hr(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)]) -> DomNode

    Create hr element

    img

    fn img(src? : String, alt? : String, width? : String, height? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)]) -> DomNode

    Create img element

    index_each

    fn[T] index_each(items : () -> Array[T], render_item : (() -> T, Int) -> DomNode) -> DomNode

    Index-based list rendering - optimized for lists where items are identified by index Unlike for_each which tracks by reference, index_each tracks by index position. When items change at an index, only that element is re-rendered.

    Best used when:
    • Items are primitives (strings, numbers)
    • Item identity is by position, not by value
    • Lists are frequently mutated by index

    Example:
    index_each( fn() { items.get() }, fn(item_getter, index) { div(children=[ // item_getter() returns current item at this index text_node(fn() { item_getter().to_string() }) ]) } )

    input

    fn input(type_? : String, name? : String, value? : String, placeholder? : String, disabled? : Bool, readonly_? : Bool, required? : Bool, checked? : Bool, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, dyn_value? : () -> String, dyn_disabled? : () -> Bool, dyn_checked? : () -> Bool, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)]) -> DomNode

    Create an input element

    is_move_before_supported

    fn is_move_before_supported() -> Bool

    Check if moveBefore is supported in the current environment

    jsx

    fn jsx(tag : String, attrs : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

    JSX runtime: jsx function (maps directly to create_element) Usage in TSX: children

    jsxs

    fn jsxs(tag : String, attrs : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

    JSX runtime: jsxs function (same as jsx, for static children)

    label

    fn label(for_? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

    Create a label element
    fn li(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

    Create li element

    loading

    fn loading(when~ : () -> Bool, fallback~ : () -> DomNode, render_fn : () -> DomNode) -> DomNode

    Loading component - shows fallback during initial load, then maintains stale content during refetch (inspired by SolidJS v2 ).

    State machine: NeverLoaded + pending=true → show fallback NeverLoaded + pending=false → show content, transition to Loaded Loaded + pending=true → keep showing content (stale) Loaded + pending=false → show content (fresh)

    main_

    fn main_(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

    Create a main element

    mathml_ns

    let mathml_ns : String

    MathML namespace constant

    mount

    fn mount(container : DomElement, n : DomNode) -> Unit

    Mount a node to a container

    mount_to

    fn mount_to(container :
    Element
    , n : DomNode) -> Unit

    Append to a raw @js_dom.Element — the type document.getElementById hands back. Use mount when you already hold a DomElement.

    move_before

    Move a node before a reference node, preserving state (animations, focus, etc.) Falls back to insertBefore if moveBefore is not supported.

    Parameters:
    • parent: The parent node to move the child within
    • node: The node to move
    • ref_node: The reference node (node will be inserted before this), or None for end

    Returns the moved node

    move_before_strict

    Force use of moveBefore (throws if not supported)
    fn nav(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

    Create a nav element

    node

    fn[T : ToNode] node(value : T) -> Node

    Helper to convert any ToNode to Node
    fn ol(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

    Create ol element
    fn p(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

    Create a p element

    portal

    fn portal(target~ :
    Element
    , children~ : Array[DomNode]) -> DomNode

    Portal - renders content into a different DOM container Similar to Solid.js

    Use cases:
    • Modals that need to render at body level to avoid z-index issues
    • Dropdowns/tooltips that need to escape overflow: hidden
    • Full-screen overlays

    Example:
    portal( target=@js_dom.document().body_(), children=[modal_content()] )

    Note: For SSR, portals should be handled separately or use a placeholder. The portal content won't appear in the SSR output at the original location.

    portal_to

    fn portal_to(selector : String, children : Array[DomNode]) -> DomNode

    Portal to a selector - find element by CSS selector and portal to it

    portal_to_body

    fn portal_to_body(children : Array[DomNode]) -> DomNode

    Portal to body - convenience function for rendering to document.body

    pre

    fn pre(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

    Create pre element

    reconcile_for_each

    fn[T] reconcile_for_each(entries_ref :
    Ref
    [Array[ItemEntry[T]]], placeholder :
    Node
    , new_items : Array[T], render_item : (T, Int) ->
    Node
    ) -> Unit

    Simplified reconciliation for render.mbt's for_each Uses a DocumentFragment as container with a placeholder comment

    reconcile_for_each_with_dispose

    fn[T] reconcile_for_each_with_dispose(entries_ref :
    Ref
    [Array[ItemEntry[T]]], placeholder :
    Node
    , new_items : Array[T], render_item : (T, Int) -> (
    Node
    , () -> Unit)) -> Unit

    Reconciliation with dispose function support render_item returns both the DOM node and a dispose function for cleanup

    reconcile_items

    fn[T] reconcile_items(parent :
    Node
    , old_entries : Array[ItemEntry[T]], new_items : Array[T], render_item : (T, Int) ->
    Node
    , end_marker :
    Node
    ) -> Array[ItemEntry[T]]

    Reconcile items with DOM nodes using reference equality

    Algorithm:
    1. Build a lookup from old entries (item -> entry) using reference equality
    2. Process new items in order:
      • If same reference exists in old entries → reuse DOM, use moveBefore
      • If not found → create new DOM with render_item
    3. Remove DOM nodes for items no longer present
    4. Return new ItemEntry array

    Parameters:
    • parent: The parent DOM node containing the items
    • old_entries: Previous item-DOM mappings
    • new_items: New items array
    • render_item: Function to render a new item to DOM
    • end_marker: Comment node marking the end of the For region

    Returns: New ItemEntry array reflecting current items

    reconcile_items_with_dispose

    fn[T] reconcile_items_with_dispose(parent :
    Node
    , old_entries : Array[ItemEntry[T]], new_items : Array[T], render_item : (T, Int) -> (
    Node
    , () -> Unit), end_marker :
    Node
    ) -> Array[ItemEntry[T]]

    Reconcile items with dispose support Similar to reconcile_items but render_item returns (Node, dispose)

    ref_equal

    fn[T] ref_equal(a : T, b : T) -> Bool

    Check if two values are the same reference (type-safe wrapper)

    render

    fn render(container : DomElement, n : DomNode) -> Unit

    Render to a container (clear and mount)

    render_to

    fn render_to(container :
    Element
    , n : DomNode) -> Unit

    Clear a raw @js_dom.Element and mount into it. This is the usual client entry point — document.getElementById returns a @js_dom.Element, so an app's main reaches for this rather than render.

    The second argument is a built DomNode, not a function returning one.

    section

    fn section(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

    Create a section element

    show

    fn show(when : () -> Bool, render_fn : () -> DomNode) -> DomNode

    Conditional rendering - shows content when condition is true Creates a child owner for proper cleanup when content is hidden

    span

    fn span(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

    Create a span element

    static_node

    fn static_node(node :
    Node
    ) -> DomNode

    Create a Static DomNode from a @js_dom.Node Static nodes are skipped during reconciliation and hydration

    strong

    fn strong(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

    Create strong element

    svg

    fn svg(width? : String, height? : String, viewBox? : String, xmlns? : String, fill? : String, stroke? : String, role? : String, aria_label? : String, aria_labelledby? : String, aria_describedby? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

    Create an SVG element

    svg_animate

    fn svg_animate(attributeName? : String, from? : String, to? : String, dur? : String, repeatCount? : String, fill_anim? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)]) -> DomNode

    Create an SVG animate element

    svg_animate_transform

    fn svg_animate_transform(attributeName? : String, type_? : String, from? : String, to? : String, dur? : String, repeatCount? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)]) -> DomNode

    Create an SVG animateTransform element

    svg_circle

    fn svg_circle(cx? : String, cy? : String, r? : String, fill? : String, stroke? : String, stroke_width? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)]) -> DomNode

    Create an SVG circle element

    svg_clip_path

    fn svg_clip_path(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

    Create an SVG clipPath element

    svg_defs

    fn svg_defs(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

    Create an SVG defs element

    svg_desc

    fn svg_desc(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

    Create an SVG desc element for accessibility

    svg_ellipse

    fn svg_ellipse(cx? : String, cy? : String, rx? : String, ry? : String, fill? : String, stroke? : String, stroke_width? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)]) -> DomNode

    Create an SVG ellipse element

    svg_filter

    fn svg_filter(x? : String, y? : String, width? : String, height? : String, filterUnits? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

    Create an SVG filter element

    svg_foreign_object

    fn svg_foreign_object(x? : String, y? : String, width? : String, height? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

    Create an SVG foreignObject element for embedding HTML

    svg_g

    fn svg_g(transform? : String, fill? : String, stroke? : String, opacity? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

    Create an SVG group element

    svg_image

    fn svg_image(href? : String, x? : String, y? : String, width? : String, height? : String, preserveAspectRatio? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)]) -> DomNode

    Create an SVG image element

    svg_line

    fn svg_line(x1? : String, y1? : String, x2? : String, y2? : String, stroke? : String, stroke_width? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)]) -> DomNode

    Create an SVG line element

    svg_linear_gradient

    fn svg_linear_gradient(x1? : String, y1? : String, x2? : String, y2? : String, gradientUnits? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

    Create an SVG linearGradient element

    svg_mask

    fn svg_mask(x? : String, y? : String, width? : String, height? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

    Create an SVG mask element

    svg_ns

    let svg_ns : String

    SVG namespace constant

    svg_path

    fn svg_path(d? : String, fill? : String, stroke? : String, stroke_width? : String, stroke_linecap? : String, stroke_linejoin? : String, fill_rule? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)]) -> DomNode

    Create an SVG path element

    svg_pattern

    fn svg_pattern(x? : String, y? : String, width? : String, height? : String, patternUnits? : String, patternContentUnits? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

    Create an SVG pattern element

    svg_polygon

    fn svg_polygon(points? : String, fill? : String, stroke? : String, stroke_width? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)]) -> DomNode

    Create an SVG polygon element

    svg_polyline

    fn svg_polyline(points? : String, fill? : String, stroke? : String, stroke_width? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)]) -> DomNode

    Create an SVG polyline element

    svg_radial_gradient

    fn svg_radial_gradient(cx? : String, cy? : String, r? : String, fx? : String, fy? : String, gradientUnits? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

    Create an SVG radialGradient element

    svg_rect

    fn svg_rect(x? : String, y? : String, width? : String, height? : String, rx? : String, ry? : String, fill? : String, stroke? : String, stroke_width? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)]) -> DomNode

    Create an SVG rect element

    svg_stop

    fn svg_stop(offset? : String, stop_color? : String, stop_opacity? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)]) -> DomNode

    Create an SVG stop element for gradients

    svg_symbol

    fn svg_symbol(viewBox? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

    Create an SVG symbol element

    svg_text

    fn svg_text(x? : String, y? : String, dx? : String, dy? : String, text_anchor? : String, dominant_baseline? : String, fill? : String, font_size? : String, font_family? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

    Create an SVG text element

    svg_title

    fn svg_title(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

    Create an SVG title element for accessibility

    svg_tspan

    fn svg_tspan(x? : String, y? : String, dx? : String, dy? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

    Create an SVG tspan element

    svg_use

    fn svg_use(href? : String, x? : String, y? : String, width? : String, height? : String, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)]) -> DomNode

    Create an SVG use element

    text

    fn text(content : String) -> DomNode

    Create a static text node

    text_dyn

    fn text_dyn(content : () -> String) -> DomNode

    Create a reactive text node from a getter function

    text_from_signal

    fn[T : Show] text_from_signal(sig :
    Signal
    [T]) -> DomNode

    Create a reactive text node from a signal

    text_node

    fn text_node(content : () -> String) -> DomNode

    Create a reactive text node that updates when the content changes

    text_of

    fn[T : Show] text_of(sig :
    Signal
    [T]) -> DomNode

    Create a reactive text node from a signal (alias for text_sig)

    text_sig

    fn[T : Show] text_sig(sig :
    Signal
    [T]) -> DomNode

    Create a reactive text node from a signal

    textarea

    fn textarea(name? : String, placeholder? : String, disabled? : Bool, id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

    Create a textarea element
    fn ul(id? : String, class? : String, style? : String, dyn_class? : () -> String, dyn_style? : () -> String, on? : HandlerMap, ref_? : (
    Element
    ) -> Unit, attrs? : Array[(String, Attr)], dyn_attrs? : Array[(String, AttrValue)], children : Array[DomNode]) -> DomNode

    Create ul element

    use_style

    fn use_style(css : String, root :
    Element
    ) -> Unit

    Inject CSS into the ShadowRoot containing the element, or document.head

    • Uses getRootNode() to find the ShadowRoot that contains the element
    • If element is inside a ShadowRoot, injects into that ShadowRoot
    • Otherwise, injects into document.head
    • Uses CSS hash as ID to prevent duplicate injection

    Usage: use_style(css, element) // element can be any element inside a ShadowRoot