Multi-Target Swaps

Update multiple elements from a single response
LokaScript supports two patterns for multi-target updates:

Explicit swaps: Multiple put commands in sequence
Partials: one response, several targets (simulated below; with htmx, hx-swap-oob)

multi-target hx-partial htmx-like OOB updates

Demo 1: Explicit Multi-Swap

Multiple swap commands update different parts of the page:

Main Content

Welcome

Click the button to update all panels

Statistics

Stats

Sidebar

Notifications

No new notifications

Waiting...

Demo 2: Process Partials

Use <hx-partial> elements to specify targets:

How it works: a partials response carries several fragments, each naming its target (<hx-partial target="#id">). This demo performs those swaps explicitly; hyperfixi 3.x's process partials command did it for you and retired in 4.0. With htmx, use out-of-band swaps (hx-swap-oob).

Main (partial)

Waiting for partial...

Click the button above

Counter (partial)

Counter

Alerts (beforeEnd strategy)

Alerts will append here...

Demo 3: Dashboard Refresh (Simulated API)

Simulates fetching a dashboard response with multiple components:

Users

Active Users

---

Revenue

$---

Orders

---

Activity Log

Activity will appear here...

The Code

Explicit Multi-Swap:

on click fetch "/api/dashboard" as json put it.data into data -- Update multiple targets put data.main into #main put data.sidebar into #sidebar put data.notifications into #notifications

hx-partial Response Format:

<hx-partial target="#main">  <div>Main content here</div> </hx-partial> <hx-partial target="#sidebar" strategy="innerHTML">  <nav>Sidebar content</nav> </hx-partial> <hx-partial target="#notifications" strategy="beforeEnd">  <div class="toast">New message!</div> </hx-partial>

hyperfixi 3.x distributed these with a process partials command, which retired with core's htmx layer in 4.0. For server-driven multi-target responses, load htmx beside hyperfixi and use its out-of-band swaps (hx-swap-oob); the explicit multi-swap demo above is the hyperscript-only approach.

How it works:

Explicit swaps: Just chain multiple swap commands
hx-partial: Server returns structured response with targets
Each partial can have its own swap strategy

hx-partial Attributes:

Attribute	Description
`target`	CSS selector for target element (required)
`strategy`	Swap strategy (morph, innerHTML, beforeEnd, etc.)

htmx Comparison:

htmx	LokaScript
`hx-swap-oob="true"`	`<hx-partial target="#id">`
`<div id="x" hx-swap-oob="true">`	`<hx-partial target="#x">`

Use Cases:

Dashboard updates (stats, charts, notifications)
Shopping cart + inventory updates
Notification badges + content
Form submission with multiple result areas

← Gallery Home