Patterns
Real-world patterns: client-side search filter, multi-step wizard, optimistic toggle.
datastar ds-patterns
Usage
// Pattern 1: client-side search filter
// Filter a list by signal value — no server needed
data-show="$q===''||item.toLowerCase().includes($q.toLowerCase())"
// Pattern 2: wizard / multi-step
data-show="$step===1" // show step 1 panel
data-on:click="$step=Math.min($totalSteps,$step+1)" // next
data-show="$step>1" // show back button
// Pattern 3: optimistic toggle
// 1. Flip UI immediately
data-on:click="$liked=!$liked"
// 2. Confirm or revert via SSE
data-on:click="$liked=!$liked;@post('/api/like')"
// Server can revert: MarshalAndPatchSignals(sse, {"liked": false})