Signals & Bindings

Everything here is plain HTML — no endpoint involved. Signals live in data-signals, expressions reference them with $name.

Counter

<section data-signals="{count: 0}">
  <button data-on:click="$count--">−</button>
  <strong data-text="$count">0</strong>
  <button data-on:click="$count++">+</button>
</section>

Two-way binding + computed

Name

<div data-computed:greeting="$name ? `Hello, ${$name}!` : 'Type your name…'">
  <input data-bind:name />
  <p data-text="$greeting"></p>
</div>

Show / hide + attributes

Revealed by data-show="$open". The data-cloak attribute keeps this hidden until Datastar boots, so there is no flash of un-hidden content.

<button data-on:click="$open = !$open"
        data-attr:aria-expanded="$open ? 'true' : 'false'">…</button>
<p data-show="$open" data-cloak>…</p>

Class toggling

Panel A

Panel B

<button data-on:click="$tab = 'a'" data-class:active="$tab === 'a'">Tab A</button>