1. BASIC SIGNALS & EFFECTS
REACTIVE VALUES THAT UPDATE!
WOW!
LIVE DEMO!
THE CODE
<div data-signals-counter="0">
<div data-effect="this.textContent = counter()"></div>
<button data-on-click="counter(counter() - 1)">-1</button>
<button data-on-click="counter(counter() + 1)">+1</button>
</div>2. TWO-WAY DATA BINDING
FORMS THAT SYNC AUTOMATICALLY!
LIVE DEMO!
LIVE PREVIEW:
THE CODE
<div data-signals="{ name: 'Alice', email: 'alice@example.com' }">
<input data-bind="name()" type="text">
<input data-bind="email()" type="email">
<div data-effect="this.textContent = `Hello ${name()}!`"></div>
</div>3. COMPUTED SIGNALS
DERIVED VALUES THAT UPDATE AUTOMATICALLY!
LIVE DEMO!
SUBTOTAL:
TAX (10%):
TOTAL:
THE CODE
<div data-signals="{ price: 29.99, quantity: 1 }"
data-computed-subtotal="price() * quantity()"
data-computed-tax="subtotal() * 0.1"
data-computed-total="subtotal() + tax()">
<input data-bind="price()" type="number">
<input data-bind="quantity()" type="number">
<div data-effect="this.textContent = '$' + total().toFixed(2)"></div>
</div>4. FETCH ACTIONS
HTTP REQUESTS WITH STATE!
AJAX!
LIVE DEMO!
LOADING DATA...
THE CODE
<div data-signals-random-counter="0"
data-signals-api="fetch('/api/users')"
data-signals-random-api="fetch('/api/counter')">
<button data-on-click="api().trigger()">Load Users</button>
<button data-on-click="randomApi().trigger()">Get Random</button>
<div data-effect="this.textContent = api().state()"></div>
<div data-effect="this.textContent = 'Random: ' + randomCounter()"></div>
</div>5. FORM HIJACKING
AUTOMATIC AJAX FORMS WITH RESPONSE HANDLING!
LIVE DEMO!
THE CODE
<form action="/api/form" method="post" data-hijack>
<input name="name" type="text" required>
<input name="email" type="email" required>
<button type="submit">Submit</button>
<div data-effect="
this.textContent = this.closest('form')?.hsFetch?.state()
"></div>
</form>6. SERVER-SENT EVENTS
REAL-TIME UPDATES WITH AUTO DOM PATCHING!
LIVE DEMO!
EVENT LOG:
THE CODE
<div data-signals-stream="sse('/sse')">
<button data-on-click="stream().connect()">Connect</button>
<button data-on-click="stream().close()">Disconnect</button>
<div data-effect="this.textContent = stream().state()"></div>
</div>7. EVENT MODIFIERS
POWERFUL EVENT HANDLING WITH TIMING CONTROL!
LIVE DEMO!
THE CODE
<div data-signals="{ searchQuery: '', clicks: 0,
searchMessage: '', onceMessage: '' }">
<!-- Debounced search -->
<input data-bind="searchQuery()"
data-on-input__debounce.300ms="searchMessage(
'SEARCHING FOR: ' + this.value)">
<!-- Throttled button -->
<button data-on-click__throttle.1s="clicks(clicks() + 1)">
Click Me
</button>
<!-- One-time button -->
<button data-on-click__once="onceMessage('Done!')">
One-Time
</button>
</div>