Influenced by HyperTalk, the language of HyperCard.
<script src="https://firstname.lastname@example.org"></script> <button _="on click toggle .big-text"> Toggle the "big-text" class on me on click </button> <div _="on mouseenter toggle .visible on #help until mouseleave"> Mouse Over Me! </div> <div id="help"> I'm a helpful message!</div> <button _="on click log me then call alert('yep, it\’s an alert')"> Show An Alert </button>
Below is a collection of hyperscript snippets for achieving various patterns in web development.
Hello World - concat two strings
<p id="first">Hello</p> <p id="second">World</p> <button class="btn primary" _="on click set my.innerText to #first.innerText + ' ' + #second.innerText"> Concat </button>
This example illustrates how to use an event handler to fetch state from other elements, perform a simple operation, and then store that state in another location.
Set a checkbox to indeterminate state on load/reset
<form> <input class="indeterminate" type="checkbox" _="on load set my.indeterminate to true"> <input type="reset" _="on click set .indeterminate.indeterminate to true"> </form>
In this example, the checkbox sets the indeterminate state when the page is loaded. In addition, the "indeterminate" class is also set, allowing the handler on the reset button to use a CSS query to reset all matching elements back to the indeterminate state.
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
Last modified 20 June 2021