What the markers generate

The widget below was rendered at build time, and so was everything around it: the blocks beneath it are the exact HTML and script the build emitted for it, with only the runtime elided. View source to see the whole page, runtime included.

The source

State

var HoodCount = x.Named("hood", 0)

One named signal. Named, so the script the build emits can declare it as a real variable.

The widget

<div class="demo">
	@x.El("button", x.On("click", HoodCount.Set(HoodCount.Add(1)))) {
		@x.Text(HoodCount) +
	}
</div>

A button whose click handler increments the signal, with the value rendered inside it via x.Text.

The generated HTML

Each marker stamps its own element with data-x and renders the current value — this is the page's markup, static before any script runs.

<div class="demo"><button data-x="0"><span data-x="1">0</span> +</button></div>

The generated script

The runtime (omitted here) declares the signal, and the footer binds it to the stamped nodes. There is nothing to diff and nothing to re-render: a click runs hood.set(hood.get() + 1) and the text binding writes the new value.

// …the runtime — the fragments this page uses, assembled.
const hood = aw.signal(0);

// …after the markup:
aw.text("1", hood);
aw.on("0", "click", () => { hood.set(hood.get() + 1); });