@magnet/ui

Signal-based UI rendering and DOM manipulation for Magnet.

@magnet/ui provides the magnet factory, which builds a context for creating and rendering HTML, SVG, and MathML elements driven by signals. It is designed to run in both browsers and server environments through a pluggable window implementation.

Install

JSR

deno add jsr:@magnet/ui

npm via JSR

npx jsr add @magnet/ui

npm

npm install @magnet-js/ui

Usage

Create a Magnet context with a window and signal implementation, then build elements:

import { magnet } from "@magnet/ui";
import { tc39 } from "@magnet/signal";

const ctx = magnet({ window, ...tc39 });

const element = ctx.html.div({ class: "greeting" }, ["Hello, Magnet!"]);
document.body.appendChild(element);

Reactive attributes and children

Signal values can be passed as attributes or children. Magnet automatically sets up effects so the DOM updates when the signals change:

import { magnet } from "@magnet/ui";
import { tc39 } from "@magnet/signal";

const ctx = magnet({ window, ...tc39 });
const count = ctx.state(0);
const label = ctx.computed(() => `Clicked ${count.get()} times`);

const button = ctx.html.button(
  { onclick: () => count.set(count.get() + 1) },
  [label],
);

document.body.appendChild(button);

Public API

• magnet(context, options?) — creates a Magnet context with html, svg, mathML, render, state, effect, computed, comment, text, and other helpers.
• MagnetWindow — minimal window/document interface required by Magnet.
• MagnetNode — union of comment, element, and text nodes managed by Magnet.
• nsAttr(namespace) — creates a helper for namespaced attribute values.
• Format / nativeFormat — formatter interface and an alternative formatter that delegates directly to toString().

License

MIT © 2026 Fernando G. Vilar.