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...
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')
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 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
trigger triggers an event on the current element trigger customEvent
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
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
query reference A query reference <button/> <:focused/>
time expression A time expression 200ms
closest expression Find closest element closest <div/>
of expression Get a property of an object the location of window
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
relative positional expressions Get a positional value out of an array-like object first from <div/>

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'