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 asynchrnous work

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
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 propogate, etc.) halt
hide Hide an element in the DOM hide me
if A conditional control flow command if me.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
put Puts a value into a given variable or property put "cool!" into me.innerHTML
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

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 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'