Bars Icon

Intro to Hyperscript: Rethinking JavaScript

23-11-2023 11:13 AM

Hyperscript is a newer language for handling common scripting needs on the JavaScript front end. You can use it by itself or in tandem with HTMX.

Some of us remember HyperCard, an interesting branch in the evolutionary tree of programming languages. If you’re of a certain age, you might even have learned programming with HyperCard. Hyperscript is a newer technology that takes some of the benefits of HyperCard, especially its simplicity and English-like syntax, and applies it to the browser environment. It’s a kind of JavaScript replacement that can work standalone or in tandem with HTMX to simplify common scripting needs on the JavaScript front end.
Before we get into too much discussion, let’s look at a Hyperscript example that communicates the spirit of the thing:
It’s pretty obvious what this code does. The underscore property is the special one the denotes a Hyperscript. In JavaScript, this same functionality might look something like this:
In English, it says: “When the div element is loaded, send an async request to ‘https://stuff’ and put the results inside the div.” Hopefully you can see already that Hyperscript feels almost like a behavioral extension of HTML.

Hyperscript is a kind of simplified, more English-like JavaScript. As pointed out to me by Sacha Greif, you can also think about it as a domain-specific language, or DSL. In essence, Hyperscript boils down JavaScript to a syntax devoted explicitly to common and recurring needs in building front-end UIs. It brings a bunch of conventions to bear to make this coding more concise.Hyperscript is a sibling of HTMX and springs from the mind of the same developer, Carson Gross. Both projects reflect Gross’s devotion to simplicity and his attempts to relentlessly apply it to big, active problem spaces. In HTMX, we see a more capable HTML that could sweep away much of the complexity that has evolved over the last decade, as developers have embraced the front-end paradigm of reactive frameworks + JSON + REST-like APIs. In Hyperscript, we see an alternative to the apparently never-ending expansion of JavaScript’s language sophistication. It’s a tantalizing proposition.