Concepts

Signals are optional reactive islands.

Core does not need reactive state. Add @nativefragments/signals when a custom element or island needs local state and DOM bindings.

Install

npm i @nativefragments/signals
cp node_modules/@nativefragments/signals/public/nativefragments/*.js public/nativefragments/

Use in a component

import { bindText, computed, state } from "/nativefragments/signals.js";

const count = state(0);
const label = computed(() => `Count ${count.get()}`);

bindText(root.querySelector("[data-count]"), label);
root.querySelector("button").addEventListener("click", () => {
  count.set(count.get() + 1);
});

Keep HTML canonical

Render meaningful HTML on the server first. Use signals to hydrate the interactive part, not to hide the page behind a client-only app shell.