Features

name description example
on Creates an event listener on click log "clicked!"
def Defines a function see details...
js Embed JavaScript code at the top level see details...
worker Create a Web Worker for asynchrnous work
eventsource Subscribe to Server Sent Events (SSE)
socket Create a Web Socket
init Initialization logic to be run when the code is first loaded

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
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
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 set x to 0
show Show an element in the DOM show #anotherDiv
take Takes a class from a set of elements take .active from .tabs
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
tell Temporarily sets a new implicit target value with <p/> add .highlight
go Navigate to a new page or within a page go to the top of the body smoothly

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/>
string A string "a string", 'another string'
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
array literal Javascript-style array literals [1, 2, 3]
boolean literal Javascript-style booleans true false
math operator Javascript-style mathematical operators 1 + 2
null literal Javascript-style null null
number Javascript-style numbers 1 3.14
object literal Javascript-style object literals {foo:"bar", doh:42}