Targets and swaps

Understand swap and settle

Use the HTMX request, swapping, added, and settling classes to make transitions explain state rather than hide slow work.

8 minute lesson

~~~

An HTMX update has observable phases:

  1. the request starts and htmx-request marks the trigger or indicator
  2. the response arrives and htmx-swapping marks the target
  3. new content receives htmx-added
  4. the target receives htmx-settling while attributes and transitions settle
  5. temporary classes are removed

The default swap delay is 0ms; the default settle delay is 20ms. Change them only to coordinate a meaningful transition:

<div hx-get="/notice" hx-swap="innerHTML swap:100ms settle:200ms">
  Load notice
</div>

Events follow the same boundary: htmx:afterSwap runs after insertion, while htmx:afterSettle runs after settling completes.

Use CSS to explain state, not disguise latency. A short fade can show that content changed; it cannot replace a “Saving…” indicator or an error message. Respect prefers-reduced-motion and keep the final DOM correct when transitions are disabled.

Slow the request in development and watch the classes in the Elements panel. This turns timing problems into visible lifecycle evidence.

Lesson completed