Hyperscript Behaviors

Hyperscript is a really fun way to add little event-driven scripts to your web application. It is one of the best ways to enforce locality of behavior in a hypermedia-first application. It also solves a bunch of problems with async behavior in native JS by doing things “without promises, async / await or callback hell”.

Just like tailwinds enforces locality of behavior for CSS with some trade-offs, hyperscript does the same for vanilla JavaScript.

One gripe I always had with hyperscript is re-inventing the wheel whenever I tried do implement a common UI pattern. Like tabs, modals, file uploads, etc. It is not particularly hard. It is just a task that someone has perfected over the last 15 years in vanilla JS or the JS frameworks, and now - I have to write my own version of the very same thing.

That’s why I was super excited when I found this gem. A beautifully built collection of common hyperscript widgets that can be copied wholesale or easily customized for your own application.

The way to “install” these is by right clicking, view source, and copying the code. A core tenet of the culture around hyperscript.

The way these widgets are implemented are by defining hyperscript behaviors. The Don’t Repeat Yourself (DRY) implementation in hyperscript. You define a behavior once - put it online if you are a kind soul. Then, no one else will have to reinvent the wheel.

This was a great find, and I will try to add my own behaviors to the same repo as I have the time. In the meantime, you don’t have to reinvent the wheel if you use hyperscript - right click, view source, and enjoy!