mljr-ui · showcase

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})