The hyperscript Cookbook

Below is a collection of hyperscript snippets for achieving various patterns in web development.

Fade & Remove

If you wish to fade an element out and remove it from the DOM, you can use something like this:

<button _="on click transition opacity to 0 then remove me">
  Fade & Remove
</button>

Disable a Button During an htmx Request

If you wish to disable a button during an htmx request, you can use this snippet:

<button
      class="button is-primary"
      hx-get="/example"
      _="on click toggle [disabled='true'] until htmx:afterOnLoad">
      Do It
</button>

Disable all Buttons During an htmx Request

If you wish to disable every button during an htmx request, you can use this snippet:

<body _="on every htmx:beforeSend in <button:not(.no-disable)/> 
           tell it 
               toggle [disabled='true'] until htmx:afterOnLoad">
      
</body>

Here we use the every keyword to avoid queuing events, and then the in modifier to filter only clicks that occur within buttons that do not have the .no-disable class on them. When the body gets an event that matches this requirement, it will toggle the disabled property to true on the button, until it receives an htmx:afterLoad event from the button.

We use the with command to make it (the button) the default target (me) for the toggle command