Examples · Navigation & server HTML
Morph a server fragment
swap(…, { mode: "morph" }) patches the DOM in place: open <details> stays open, focus stays put.
Replacing HTML wholesale loses state: open disclosures, scroll positions, focus, CSS transitions. Morph diffs the new fragment against the live DOM and touches only what changed, so a server re-render feels like a client update.
What to notice
- Open the details, then switch users: it stays open because the element was patched, not replaced.
- Id-aware matching means the same nodes are kept even when their text changes.
- A live island inside a morphed subtree keeps its DOM and remounts only if its
data-*props changed.
Focus the input, switch users with the buttons: focus and your text survive.