A counter

The same counter as the WASM demo — a signal, a computed double, and +/−/reset handlers — but the JavaScript was generated at build time by the markers themselves. No .wasm, no runtime to download; view source, and the bindings are right there in this page's HTML.

How it works

State

var XCount  = x.Named("count", 0)
var XDouble = x.Computed(XCount.Mul(2))

x.Named creates the state under a fixed name, so scripts can read it as count.get(). x.Computed derives the double from it — the expression is evaluated at build time for the static value and compiled to JavaScript that recomputes it when count changes.

The buttons

<div class="counter-row">
	@x.El("button", x.On("click", XCount.Set(XCount.Sub(1)))) {
		&minus;
	}
	@x.Text(XCount)
	@x.El("button", x.On("click", XCount.Set(XCount.Add(1)))) {
		+
	}
	@x.El("button", x.On("click", XCount.Set(x.Lit(0)))) {
		reset
	}
</div>

x.El renders a button with its bindings attached. x.On binds a click handler whose action is built from combinators: Add and Sub change the signal by one, x.Lit(0) resets it. The body is the button's content — @x.Text(XCount) renders the value and the binding that keeps it in sync, so the button shows the count as it changes.

The derived value

<p class="demo-note">Double: <span>@x.Text(XDouble)</span></p>

For the memo, @x.Text(XDouble) does the same: renders the current value and keeps it in sync as count changes.

var XCount  = x.Named("count", 0)
var XDouble = x.Computed(XCount.Mul(2))

templ XCounterDemo() {
	<div class="demo">
		<div class="counter-row">
			@x.El("button", x.On("click", XCount.Set(XCount.Sub(1)))) {
				&minus;
			}
			@x.Text(XCount)
			@x.El("button", x.On("click", XCount.Set(XCount.Add(1)))) {
				+
			}
			@x.El("button", x.On("click", XCount.Set(x.Lit(0)))) {
				reset
			}
		</div>
		<p class="demo-note">Double: @x.Text(XDouble)</p>
	</div>
}

// On the page: @x.Document(XCounterDemo())

The full marker set is documented in x — compiled reactive markup.