Hydration

Fetch HTML from the server and inject it into any element without a full page reload. Use w-get with w-target and w-swap to control where and how content is inserted.

Compare hydration (no page reload) vs traditional links (full page reload):

Hydrate:

Reload: replace prepend append

Mode is set: replace

Hydration (No Page Reload)


      <button

        w-get="/partials/notification"

        w-target="#target"

        w-swap="replace"

      >Load</button>

Traditional Link (Full Page Reload)


      <a href="/page?mode=replace">

        Load

      </a>

Partial Component with Session Counter


    // File: /partials/notification-counter.html


    <what>

    session.notification_count += 1

    </what>


    <div class="notification">

      <strong>Notification #session.notification_count#</strong>

      <p>Injected without reloading the page</p>

    </div>

The session.var += 1 directive automatically increments the session variable before rendering. The counter persists across requests for each user's session.

Swap Modes

Mode	Description
`replace`	Replace inner content (default)
`prepend`	Insert at beginning, inside element
`append`	Insert at end, inside element
`before`	Insert before element (as sibling)
`after`	Insert after element (as sibling)
`none`	Execute request without modifying DOM

Hydration Attributes

Attribute	Description
`w-get="url"`	Fetch HTML via GET and inject into target
`w-post="url"`	Fetch HTML via POST and inject into target
`w-target="selector"`	CSS selector for target element
`w-swap="mode"`	How to inject: replace, prepend, append, before, after, none
`w-params="{...}"`	JSON object of params to send with request
`w-include="selector"`	Include form values from selector in request