Reactivity

data-text, data-show, data-bind, data-attr, data-style, data-class — six ways to reflect signal state in the DOM.

datastar ds-reactivity

Usage

// Reactive text content
data-text="$name || 'anonymous'"

// Conditional display (CSS display:none toggle)
data-show="$open"

// Two-way input binding
data-bind:search   // input value ↔ $search signal

// Reactive HTML attribute
data-attr='{"data-variant": $status, "aria-label": "Status: "+$status}'

// Reactive inline style property
data-style='{"--accent": $dark ? "#000" : "#e23"}'

// Reactive CSS class (adds/removes individual classes)
data-class='{"is-active": $active, "has-error": $error}'