Hyperscript
Hyperscript is a web front-end language for writing interactive HTML.
It can serve as a client-side companion of htmx.
Example
<head><script src="https://unpkg.com/hyperscript.org@0.9.14"></script></head> <html> <h2>Hello World - concat two strings</h2> <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> <h2>Fade & Remove</h2> <button _="on click transition opacity to 0 then remove me"> Fade & Remove </button> <h2>Disable a Button During an htmx Request</h><br> <button class="button is-primary" hx-get="/example" _="on click toggle @disabled until htmx:afterOnLoad">Do It</button> <h2>Drag-and-drop elements</h2> <p _="on dragstart call event.dataTransfer.setData('text/plain',target.textContent)"> <button class="btn primary" draggable=true>DRAG ME</button> <button class="btn primary" draggable=true>OR ME</button> </p> <pre _=" on dragover or dragenter halt the event then set the target's style.background to 'lightgray' on dragleave or drop set the target's style.background to '' on drop get event.dataTransfer.getData('text/plain') then put it into the next <output/>">Drop Area Drop Area</pre> Result: <output></output> <h2>Filter table rows</h2> <table> <thead><tr><th><input _="on input show <tbody>tr/> in closest <table/> when its textContent.toLowerCase() contains my value.toLowerCase() "/></th></tr></thead> <tbody style="height:10em;display:block;overflow-y:scroll"> <tr><td>Foo Bar</td><td>Item 1</td></tr> <tr><td>Boo Bar</td><td>Item 2</td></tr> <tr><td>Gru Bar</td><td>Item 3</td></tr> <tr><td>Zoo Bar</td><td>Item 4</td></tr> <tr><td>Foo Bar</td><td>Item 5</td></tr> </tbody> </table> </html>
cat << 'EOF' > "index.html" <head><script src="https://unpkg.com/hyperscript.org@0.9.14"></script></head> <html> <h2>Hello World - concat two strings</h2> <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> <h2>Fade & Remove</h2> <button _="on click transition opacity to 0 then remove me"> Fade & Remove </button> <h2>Disable a Button During an htmx Request</h><br> <button class="button is-primary" hx-get="/example" _="on click toggle @disabled until htmx:afterOnLoad">Do It</button> <h2>Drag-and-drop elements</h2> <p _="on dragstart call event.dataTransfer.setData('text/plain',target.textContent)"> <button class="btn primary" draggable=true>DRAG ME</button> <button class="btn primary" draggable=true>OR ME</button> </p> <pre _=" on dragover or dragenter halt the event then set the target's style.background to 'lightgray' on dragleave or drop set the target's style.background to '' on drop get event.dataTransfer.getData('text/plain') then put it into the next <output/>">Drop Area Drop Area</pre> Result: <output></output> <h2>Filter table rows</h2> <table> <thead><tr><th><input _="on input show <tbody>tr/> in closest <table/> when its textContent.toLowerCase() contains my value.toLowerCase() "/></th></tr></thead> <tbody style="height:10em;display:block;overflow-y:scroll"> <tr><td>Foo Bar</td><td>Item 1</td></tr> <tr><td>Boo Bar</td><td>Item 2</td></tr> <tr><td>Gru Bar</td><td>Item 3</td></tr> <tr><td>Zoo Bar</td><td>Item 4</td></tr> <tr><td>Foo Bar</td><td>Item 5</td></tr> </tbody> </table> </html> EOF trap "rm index.html" EXIT python -m http.server # $BROWSER -new-tab localhost:8080