Creates a DOM node from a configuration value.
Handles the following config types:
Node
string
Array
object
Lifecycle events are dispatched by the render layer (see ElementLifecycle):
mounted
removed
updated
Reactive context for signal tracking; defaults to the global context when omitted.
A node configuration — string, Node, object, or array.
A parent element or CSS selector string to append the result into.
The created DOM Node, which may have been appended to the target.
const state = signal({ count: 0 });const el = render({ tagName: "button", className: () => state.count > 0 ? "active" : "", textContent: () => `Counter: ${state.count}`, on: { click: () => state.count++ },}, document.body);// el is `<button>Counter: 0</button>` Copy
const state = signal({ count: 0 });const el = render({ tagName: "button", className: () => state.count > 0 ? "active" : "", textContent: () => `Counter: ${state.count}`, on: { click: () => state.count++ },}, document.body);// el is `<button>Counter: 0</button>`
Optional
Creates a DOM node from a configuration value.
Handles the following config types:
Node— returned as-is.string— becomes a text node.Array— becomes an array of rendered nodes.object— parsed as a ElementConfig with reactive bindings via effects.Lifecycle events are dispatched by the render layer (see ElementLifecycle):
mounted— fires top-down when the element is appended to a parent.removed— fires top-down when the element is removed from a parent.updated— fires when a specific property is updated.This
Reactive context for signal tracking; defaults to the global context when omitted.
Param: config
A node configuration — string, Node, object, or array.
Param: target
A parent element or CSS selector string to append the result into.
Returns
The created DOM
Node, which may have been appended to the target.Example