An empty child effect.
Lift a primitive value into a Child.
Element factories accept primitives and Readables directly
as children — pass the value straight through instead of wrapping in
$.of(...). $.p("Hello") replaces $.p($.of("Hello"));
$.span(name) (with name: Readable<string>) replaces
$.span($.of(name)). Strings, numbers, and Readable<string | number>
are all valid children.
Add one or more classes to the element. Note: Uses direct classList manipulation (client-side only).
Add an event listener to the element (low-level, plain-function
handler). Scope-managed: the listener is removed when the enclosing
scope closes. Useful in Effect.async patterns where the handler
is a plain resume callback rather than an Effect.
Append a child to the element.
Bind an attribute to a Readable, updating when it changes.
Bind a boolean attribute to a Readable, adding/removing when it changes. Unlike bindAttribute which stringifies, this adds the attribute (empty string) when true and removes it when false.
Bind a class to a Readable boolean, adding/removing when it changes.
Bind a data attribute to a Readable, updating when it changes.
Bind innerHTML to a Readable, updating when it changes.
Bind input value to a Readable, updating when it changes. Uses setInputValue which preserves cursor position.
Bind a style property to a Readable, updating when it changes.
Bind text content to a Readable, updating when it changes.
Toggle a class based on a Readable boolean. Alias for bindClass.
Blur (unfocus) the element.
Clear all children from the element.
Programmatically click the element.
Check if an element contains another node. Works with any Effect that produces an element.
An empty child (produces empty array).
Focus the element.
Focus the first element within that matches the selector. Works with any Effect that produces an element.
Focus the last element within that matches the selector. Works with any Effect that produces an element.
Get the bounding client rect of the element. Works with any Effect that produces an element.
Get a data attribute from the element. Works with any Effect that produces an element.
Get the element's ID attribute. Works with any Effect that produces an element.
Check if the element has a specific attribute. Works with any Effect that produces an element.
Create an HTML element.
Create an SVG element.
Lift a value into a Child effect.
Add an event listener to the element.
Add a one-time event listener to the element.
Remove an attribute from the element.
Remove one or more classes from the element. Note: Uses direct classList manipulation (client-side only).
Remove a data attribute from the element.
Remove an event listener from the element. Use with addEventListener for manual event management.
Remove a style property from the element.
Replace one class with another. Note: Uses direct classList manipulation (client-side only).
Scroll the target to the position described by options. Accepts
HTMLElement | Window because both expose scrollTo(options)
identically — pair with OutletCtx.scrollContainer, which resolves
to the nearest scrollable HTML ancestor or falls back to window,
so scroll behaviors don't have to branch on the two shapes.
Router.scrollBehavior((from, to) =>
Effect.gen(function* () {
const outlet = yield* OutletCtx;
yield* Animation.awaitDone(outlet.exit);
yield* Element.scrollTo(outlet.scrollContainer, {
top: 0,
behavior: "instant",
});
}),
);
Set an attribute on the element.
Set the class attribute (replaces existing classes).
Set a data attribute on the element.
Set the innerHTML of the element. WARNING: Be careful with untrusted content to avoid XSS.
Set the value of an input element. Uses setInputValue which preserves cursor position.
Bind an ElementRef to this element.
Set a style property on the element.
Set multiple style properties on the element at once.
Values can be static strings or Readable
Set the text content of the element.
Tap into the element to perform a side effect.
Tap into the element with an Effect.
Toggle a boolean attribute.
Toggle a class on the element. Note: Uses direct classList manipulation (client-side only).
Check if the given value is an ElementRef.
Create a new element ref that can be passed to the ref prop
and used to access the element in Effects.
An Effect that when yielded returns an ElementRef
Namespace containing all HTML and SVG element factories.