Features

name description example
behavior Define cross-cutting behaviors that are applied to many HTML elements
def Defines a function see details...
eventsource Subscribe to Server Sent Events (SSE)
js Embed JavaScript code at the top level see details...
set Defines a new element-scoped variable
init Initialization logic to be run when the code is first loaded
on Creates an event listener on click log "clicked!"
socket Create a Web Socket
worker Create a Web Worker for asynchronous work

Commands

See also pseudo-commands.

name description example
add Adds content to a given target add .myClass to me
append Appends a value to a string, array or HTML Element append "value" to myString
async Runs commands asynchronously async fetch /example
beep Debug printing beep! <.foo/>
break Breaks out of the current loop repeat 3 times break end
call/get Evaluates an expression (e.g. a Javascript Function) call alert('yep, you can call javascript!')

get prompt('Enter your name')
continue Skips the remainder of a loop and continues at the top of the next iteration. repeat 3 times continue end
decrement Subtracts a value to a variable, property, or attribute decrement counter
fetch Send a fetch request fetch /demo then put it into my.innerHTML
go Navigate to a new page or within a page go to the top of the body smoothly
halt Halts the current event (stopping propagate, etc.) halt
hide Hide an element in the DOM hide me
if A conditional control flow command if I match .selected then call alert('I\'m selected!')
increment Adds a value to a variable, property, or attribute increment counter
js Embeds javascript js alert('this is javascript'); end
log Logs a given expression to the console, if possible log me
make Creates a class instance or DOM element make a Set from a, b. c, make a <p/> called para
measure Gets the measurements for a given element measure me then log it
pick Selects items from arrays, strings and regex match results pick match of "(\w+)" from str
put Puts a value into a given variable or property put "cool!" into me
remove Removes content log "bye, bye" then remove me
repeat Iterates repeat for x in [1, 2, 3] log x end
return Returns a value return 42
send/trigger Sends an event send customEvent to #a-div
set Sets a variable or property to a given value set x to 0
settle Waits for a transition to end on an element, if any add .fade-out then settle
show Show an element in the DOM show #anotherDiv
take Takes a class from a set of elements take .active from .tabs
tell Temporarily sets a new implicit target value tell <p/> add .highlight
throw Throws an exception throw "Bad Value"
toggle Toggles content on a target toggle .clicked on me
transition Transitions properties on an element transition opacity to 0
wait Waits for an event or a given amount of time before resuming the command list wait 2s then remove me

Expressions

See expressions for an overview.

name description example
as expressions Converts an expression to a new value "10" as Int
async expressions Evaluate an expression asynchronously set x to async getPromise()
attribute reference An attribute reference [selected=true]
block literal Anonymous functions with an expression body \ x -> x * x
class reference A class reference .active
closest expression Find closest element closest <div/>
comparison operator Comparison operators x == "foo" I match <:active/>
id reference An id reference #main-div
logical operator Logical operators x and y
z or false
no operator No operator no element.children
of expression Get a property of an object the location of window
query reference A query reference <button/> <:focused/>
relative positional expressions Get a positional value out of an array-like object next <div/> from me
positional expressions Get a positional value out of an array-like object first from <div/>
possessive expressions Get a property or attribute from an element the window's location
time expression A time expression 200ms
cookies symbol A symbol for accessing cookies cookies['My-Cookie']

Magic Values

name description example
it The result of a previous command fetch /people as json then put it into people
me Reference to the current element put 'clicked' into me
you Reference to a target element tell <p/> remove yourself

Literals

Define other values just like you do in Javascript

name description example
arrays Javascript-style array literals [1, 2, 3]
booleans Javascript-style booleans true false
math operators Javascript-style mathematical operators (mod is a keyword in place of %) 1 + 2
null Javascript-style null null
numbers Javascript-style numbers 1 3.14
objects Javascript-style object literals {foo:"bar", doh:42}
strings Javascript-style strings "a string", 'another string'

See also pseudo-commands.

name description example
add Adds content to a given target add .myClass to me
append Appends a value to a string, array or HTML Element append "value" to myString
async Runs commands asynchronously async fetch /example
beep Debug printing beep! <.foo/>
break Breaks out of the current loop repeat 3 times break end
call/get Evaluates an expression (e.g. a Javascript Function) call alert('yep, you can call javascript!')

get prompt('Enter your name')
continue Skips the remainder of a loop and continues at the top of the next iteration. repeat 3 times continue end
decrement Subtracts a value to a variable, property, or attribute decrement counter
fetch Send a fetch request fetch /demo then put it into my.innerHTML
go Navigate to a new page or within a page go to the top of the body smoothly
halt Halts the current event (stopping propagate, etc.) halt
hide Hide an element in the DOM hide me
if A conditional control flow command if I match .selected then call alert('I\'m selected!')
increment Adds a value to a variable, property, or attribute increment counter
js Embeds javascript js alert('this is javascript'); end
log Logs a given expression to the console, if possible log me
make Creates a class instance or DOM element make a Set from a, b. c, make a <p/> called para
measure Gets the measurements for a given element measure me then log it
pick Selects items from arrays, strings and regex match results pick match of "(\w+)" from str
put Puts a value into a given variable or property put "cool!" into me
remove Removes content log "bye, bye" then remove me
repeat Iterates repeat for x in [1, 2, 3] log x end
return Returns a value return 42
send/trigger Sends an event send customEvent to #a-div
set Sets a variable or property to a given value set x to 0
settle Waits for a transition to end on an element, if any add .fade-out then settle
show Show an element in the DOM show #anotherDiv
take Takes a class from a set of elements take .active from .tabs
tell Temporarily sets a new implicit target value tell <p/> add .highlight
throw Throws an exception throw "Bad Value"
toggle Toggles content on a target toggle .clicked on me
transition Transitions properties on an element transition opacity to 0
wait Waits for an event or a given amount of time before resuming the command list wait 2s then remove me

Events

name description
hyperscript:ready Triggered on the document after hyperscript has processed the page
load Triggered on an element with hyperscript on it after it has loaded
fetch:beforeRequest Triggered before a fetch command sends a request
fetch:afterResponse Triggered after a fetch command recieves a response
fetch:afterRequest Triggered after a fetch command handles a response
fetch:error Triggered when a fetch command gets an error
fetch:abort Triggered when a fetch command request is aborted
hyperscript:beep Triggered when a beep command executes