Load hyperscript and start it:
<script src="https://firstname.lastname@example.org"></script> <script> _hyperscript.start(); </script>
Then add some hyperscript to an element:
<div _="on click call alert('You clicked me!')"> Click Me! </div>
hyperscript is a small, expressive scripting language designed to embed well directly in HTML (thus satisfying the Locality of Behaviour Principle). It is a companion project of htmx and the two integrate automatically when used together.
hyperscript is inspired by the HyperTalk programming language and has a distinct english-like syntax, with native event-handling syntax. hyperscript transpiles to ES5.1 and thus is compatible with all modern browsers, as well as IE11.
The initial motivation for the language was the event model in htmx. I wanted
to have a way to utilize these events naturally and directly within HTML. Most HTML tags support
for handling standard DOM events (e.g.
onClick) but that doesn't work for custom events. In intercooler, I had
handled this by adding a bunch of custom event attributes, but that always felt hacky and wasn't general enough
to handle custom events triggered by response headers, etc.
Additionally, I wanted to have a way to address some useful features from intercooler.js, but without causing htmx to lose focus on the core request/response processing infrastructure:
ic-actionand all the associated attributes
The more I looked at it, the more I thought that there was a need for a small, domain specific language for all this, rather
So, what does hyperscript look like?
As mentioned above, hyperscript is designed to embed well directly within HTML:
<button _="on click add .clicked"> Add The "clicked" Class To Me </button>
The underscore (
_) attribute is where hyperscript is stored. You can also use
data-script attribute, or
configure a different attribute if you don't like those.
The script above says
On the 'click' event for this button, add the 'clicked' class to the button
The syntax reads a lot like the english does. This is intentional and drawn from HyperTalk (and its successors, such as AppleTalk)
You can extend this example to target another element like so:
<div id="a-div">I'm a div</div> <button _="on click add .clicked to #a-div"> Add The "clicked" Class To That Div Above Me </button>
clicked class will be added to the div with the id
a-div, rather than to the element the event handler is
You can see in the example above that hyperscript has native syntactic support for CSS class literals as well as well as ID references. This makes it easy to express common DOM manipulations without a lot of unnecessary syntax.
Now that you've seen a basic introduction, let's look at the broader language.
A feature then contains a series of commands, a term taken from HyperTalk. A more standard name would be "statements", but calling them "commands" is fun. A command typically consists of a starting keyword (which makes parsing easy!) and then a series of keywords and expressions.
A command list is a series of commands, optionally separated by the
<div _="on click add .fadeMe then wait 200ms then remove me"> Fade & Remove Me </div>
then keyword is particularly recommended when commands are on the same line, for clarity.
Some commands, such as the if command contain lists of other commands as well.
Expressions are the root syntactic element. Some should be very familiar to developers:
[1, 2, 3]
While some are a bit more exotic for an imperative programming language:
Below is a reference for the various features, commands and expressions available in hyperscript:
|on||Creates an event listener||
|add||Adds content to a given target||
|ajax||Send an AJAX request||
|if||A conditional control flow command||
|log||Logs a given expression to the console, if possible||
|put||Puts a value into a given variable or property||
|send||Sends an event||
|set||Sets a variable or property to a given value||
|take||Takes a class from a set of elements||
|toggle||Toggles content on a target||
|trigger||triggers an event on the current element||
|wait||Waits a given amount of time before resuming the command list||
|attribute reference||An attribute reference||
|block literal||An anonymous function with an expression body||
|class reference||A class reference||
|comparison oeprator||Comparison operators||
|id reference||A class reference||
|logical oeprator||Logical operators||
|math operator||A mathematical operator||
|target||A target for update||