This shit could not be easier.

Zjax gives you z-swap and z-action attributes to use in your HTML. That's it.

Nothing to install.

Just link to the CDN.

<head>
  <script src="https://unpkg.com/zjax"></script>
  ...
</head>

Use z-swap to update parts of your DOM with AJAX.

<button z-swap="@click GET /some-path #cart">
  Add to cart
</button>

When this button is clicked, the #cart element from the response will replace the #cart element in the current DOM.

Use z-action to attach client-side scripts.

<button z-action="@click $('#menu').remove()">
  ✕
</button>

The $() selector syntax makes it easy to use standard JavaScript to manipulate the DOM. This can be done right inline as seen above or referenced externally like this:

<button z-action="closeMenu">✕</button>

In order for the above to work, we'll need to register an "action" on the global zjax object like this:

zjax.actions({
  closeMenu($) {
    $('#menu').remove();
  }
})

Of course, you aren't limited to simple one-liners. Any valid JavaScript can be used in an action function including even asynchronous operations like awaiting a response from a remote API.

…and that's just for appetizers.

Zjax fully supports CSS transitions, swapping multiple elements at the same time, using the return value of an action to trigger a swap, and much more.

Read the Docs