⚡ Counter
Counter with configurable step. Uses data-bind for two-way input binding.
Signals hold reactive state. The count and step values are signals — when they change on the server, the UI updates instantly via SSE.
data-bind creates two-way binding between an input and a signal. Type a new step value and it syncs to the server automatically.
Actions are server-side functions triggered by button clicks. Each action modifies the signal and pushes the new value to the browser.
No JavaScript authored — every interaction is a server round-trip. Datastar handles the SSE connection, DOM patching, and signal store transparently.
TAB scope (the default) means each browser tab has its own independent counter. Open two tabs — clicking in one will not affect the other.
syncSignals() flushes changed signal values down the SSE channel. It is called automatically after an action, so the UI always reflects the latest state.
Count: 0
⚡ Signals
count
int TAB 0 Current counter value. Updated by increment, decrement, and reset actions.
step
int TAB 1 Increment/decrement step size. Two-way bound to the input via data-bind.
🎯 Actions
increment
Adds step to count, then syncs the new value to the browser.
decrement
Subtracts step from count.
reset
Resets count back to 0, ignoring the current step value.
👁 Views
counter.html.twig
Uses data-text for reactive count display and data-bind for two-way step input.