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
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy