Examples · Islands on server HTML

Islands inserted later

hydrate(document, { watch: true }) wakes up markup added by htmx, Turbo or jQuery.

Server-driven pages add HTML all the time. With watch: true a MutationObserver hydrates islands that appear later and destroys the ones that are removed, so the engine coexists with any other way of updating the page.

Playground

What to notice

  • The inserted markup is plain HTML, exactly what an htmx swap would put there.
  • Each new island gets its own scope; removing the node disposes it.
  • No re-scan of the whole page: the observer only looks at the inserted subtree.

Insert three cards, remove one; the timestamps prove each mounted on its own.