on input from .quantity set #total.innerText to (the value of #price as Number) * (my value as Number)
Copy To Clipboardclipboard
Copy text to clipboard with feedback
on click call navigator.clipboard.writeText(#code.innerText) put "Copied!" into me wait 2s put "Copy" into me
Decrement Countercounters
Decrement a numeric counter element
on click decrement #counter
Default Valuedata
Set default value if not present
on load default my @data-count to "0"
Disable Form On Submitforms
Disable submit button while processing
on submit add @disabled to <button/> in me put "Submitting..." into <button/> in me
Document Readywindow-events
Initialize app when element loads
on load call initializeApp()
Draggable Behaviorbehavior
Makes element draggable with pointer events. Use: install Draggable(dragHandle: ".titlebar")
behavior Draggable(dragHandle)
init
if no dragHandle set dragHandle to me
end
on pointerdown(clientX, clientY) from dragHandle
halt the event
trigger draggable:start
measure x
set startX to it
measure y
set startY to it
set xoff to clientX - startX
set yoff to clientY - startY
repeat until event pointerup from document
wait for pointermove(clientX, clientY) or
pointerup(clientX, clientY) from document
add { left: ${clientX - xoff}px; top: ${clientY - yoff}px; }
trigger draggable:move
end
trigger draggable:end
end
end
Dropdown Toggleui-components
Toggle dropdown menu visibility
on click toggle .open on next .dropdown-menu halt
Event Debounceevents
Debounce input for search
on input debounced at 300ms fetch /api/search?q=${my value} as json then put it into #results
Event Onceevents
Handle event only once
on click once add .initialized to me call setup()
Event Throttleevents
Throttle scroll handler
on scroll throttled at 100ms call updateScrollPosition()
Exclusive Accordionui-components
Accordion where only one panel is open
on click remove .open from .accordion-item add .open to closest .accordion-item
Fade Out And Removeanimation
Fade element out then remove from DOM
on click transition opacity to 0 over 300ms then remove me
Fetch Dataasync
Fetch data from an API and display it
on click fetch /api/data then put it into #result
Fetch JSONasync
Fetch JSON data and use a property
on click fetch /api/user as json then set #name.innerText to it.name
Fetch With Auth Headerasync
Fetch with custom headers and parse the response as JSON
on click fetch /api/me with headers:{Authorization:`Bearer ${$token}`} as JSON then put it.name into me
Fetch With Error Handlingasync
Handle API errors by checking response body
on click fetch /api/data as json then if it.error put it.error into #error else put it.data into #result end
Fetch With Loading Stateasync
Show loading indicator during fetch
on click add .loading to me fetch /api/data then remove .loading from me put it into #result
Fetch With Methodasync
Submit form data via POST
on submit fetch /api/form with method:"POST" body:form
Fetch Without Throwingasync
Fetch without throwing on errors; check the result before using it
on click fetch /api/users as JSON do not throw then if it set $users to it end
First In Collectionnavigation
Focus first input in parent form
on click focus first <input/> in closest <form/>
Focus Elementfocus
Focus an input element
on click focus #input
Focus Trapaccessibility
Trap focus within modal
on keydown[key=="Tab"] from .modal if target matches last <button/> in .modal focus first <button/> in .modal halt end
Get Attribute (Possessive Dot)lokascripthyperfixi-extensions
Call getAttribute using possessive dot notation (HyperFixi extension)
on click put my.getAttribute("data-id") into #output
Get Input Value (Possessive Dot)lokascripthyperfixi-extensions
Mirror input value using possessive dot notation (HyperFixi extension)
on input put my.value into #preview
Get Valuedata
Get a value and use it
on click get #input.value then log it
Go Backnavigation
Navigate back in history
on click go back
Go To URLnavigation
Navigate to a URL
on click go to url "/page"
Halt Eventcontrol-flow
Stop event propagation
on click halt the event then toggle .active
Hide Elementvisibility
Hide an element
on click hide #modal
Hide With Transitionvisibility
Hide element with opacity transition
on click hide me with *opacity
If Conditioncontrol-flow
Conditional execution based on state
on click if I match .active then remove .active else add .active end
If Element Existscontrol-flow
Check if element exists before action
on click if #modal exists show #modal else make a <div#modal/> put it into body end
If Matches Selectorcontrol-flow
Check if element matches selector
on click if I match .disabled halt else toggle .active end
If Value Emptycontrol-flow
Validate empty input
on blur if my value is empty add .error to me put "Required" into next .error-message end
Walks up the parent chain to find ^count and writes the nearest defining ancestor
on click increment ^count
Inline JavaScriptadvanced
Execute inline JavaScript
on click js console.log("from js") end
Input Mirrorforms
Mirror input value to another element
on input put my value into #preview
Input Validationforms
Validate input on blur
on blur if my value is empty add .error to me else remove .error from me end
Install Behaviorbehaviors
Install a reusable behavior on an element. Replace "Draggable" with any defined behavior name (e.g., Sortable, Closeable).
install Draggable
Intercept: Cache Strategiesbothservice-workers
Service worker DSL with precaching, per-route strategies, and offline fallback
intercept / precache /, /style.css, /app.js as "v1" on /api/* use network-first on *.css, *.js use cache-first on * use stale-while-revalidate offline fallback /offline.html end
Its Value (Possessive Dot)lokascripthyperfixi-extensions
Access result property using its.property syntax (HyperFixi extension)
on click fetch /api/data then put its.name into #result
Key Combinationevents
Handle Shift+Enter key combo
on keydown[key=="Enter"] if event.shiftKey call submitAndContinue() end
Key Filter With `is`events
Filter keyboard events using the modern `is` comparison syntax
on keyup[key is 'Escape'] clear me
Last In Collectionnavigation
Scroll to last message in chat
on click scroll to last <.message/> in #chat
Live Block With Multiple Dependenciesbothreactivity
Body re-runs only when one of its tracked reads ($price or $quantity) changes
live put `${$price * $quantity}` into #total end
Live Derived Valuebothreactivity
Reactively update content whenever a tracked dependency changes
live put `Count: ${$count}` into me end
Log Elementdebugging
Log the current element to console
on click log me
Log Valuedebugging
Log a message to the console
on click log "Button clicked!"
Make Elementdom-manipulation
Create a new element dynamically
on click make a <div.card/> then put it into #container
Make Toast Elementtemplates
Create a new element, populate its content, and append it to the document
on click make a <div.toast/> then put 'Saved!' into it then put it at end of body
Safe property access using optional chaining (HyperFixi extension)
on click log my?.dataset?.customValue
POST With Method And Bodyasync
POST to an endpoint by passing method and body as fetch options
on click fetch /api/users with method:"POST", body:"name=Joe"
Pick Text Rangedom-manipulation
Select a text range within an input or contenteditable using the pick command
on click pick characters 0 to 5 of #note
Prevent Form Submitforms
Prevent form submission and validate
on submit halt the event call validateForm() if result is false log "Invalid form" end
Previous Elementnavigation
Select and modify previous sibling element
on click remove .highlight from previous <li/>
Put Afterdom-manipulation
Insert content after the current element
on click put "<p>New</p>" after me
Put Beforedom-manipulation
Insert content before the current element
on click put "<p>New</p>" before me
Put Contentdom-manipulation
Replace the content of the current element
on click put "Done!" into me
Reactive Array Mutationbothreactivity
Mutate a reactive array; live blocks reading it re-render automatically
on click call $items.push(`item ${$items.length + 1}`)
Read DOM-Scoped Variable From Another Elementbothreactivity
Read a ^name variable scoped to a specific element instead of walking up from `me`
on click put ^count on #host into me
Receive Custom Eventevents
Receive a custom event and update the receiving element's content
on hello put 'Got it!' into me
Removable Behaviorbehavior
Removes element on click with optional confirmation and fade effect. Use: install Removable(confirmRemoval: true, effect: "fade")
behavior Removable(triggerEl, confirmRemoval, effect)
init
if triggerEl is undefined
set triggerEl to me
end
end
on click from triggerEl
if confirmRemoval
js(me)
if (!window.confirm("Are you sure?")) return "cancel";
end
if it is "cancel"
halt
end
end
trigger removable:before
if effect is "fade"
transition opacity to 0 over 300ms
end
trigger removable:removed
remove me
end
end
Remove Classclass-manipulation
Remove a CSS class from the current element when clicked
on click remove .highlight from me
Remove Class From Allclass-manipulation
Remove a CSS class from all matching elements
on click remove .active from .items
Remove Elementdom-manipulation
Remove the current element from the DOM
on click remove me
Render Template With Datatemplates
Render a named template element with data, then insert the HTML into the DOM
on click render #user-list with users: $data then put it into #container
Repeat For Eachloops
Iterate over a collection
on click repeat for item in .items add .processed to item
Repeat Foreverloops
Infinite animation loop
on load repeat forever toggle .pulse wait 1s end
Repeat Timesloops
Repeat an action multiple times
on click repeat 3 times add "<p>Line</p>" to me
Repeat Until Eventloops
Repeat action while button is held
on mousedown repeat until event mouseup increment #counter wait 100ms end
Repeat While Conditionloops
Repeat while condition is true
on click repeat while #counter.innerText < 10 increment #counter wait 200ms end
Resizable Behaviorbehavior
Makes elements resizable by dragging. Use: install Resizable(minWidth: 100, minHeight: 100)
behavior Resizable(minWidth, minHeight, maxWidth, maxHeight)
on pointerdown(clientX, clientY) from me
halt the event
trigger resizable:start
measure width
set startWidth to it
measure height
set startHeight to it
set startX to clientX
set startY to clientY
repeat until event pointerup from document
wait for pointermove(clientX, clientY) from document
set newWidth to startWidth + clientX - startX
set newHeight to startHeight + clientY - startY
if newWidth < minWidth then set newWidth to minWidth end
if newWidth > maxWidth then set newWidth to maxWidth end
if newHeight < minHeight then set newHeight to minHeight end
if newHeight > maxHeight then set newHeight to maxHeight end
set my style.width to newWidth + "px"
set my style.height to newHeight + "px"
trigger resizable:resize
end
trigger resizable:end
end
end
Resize Handlerwindow-events
Handle window resize with debounce
on resize from window debounced at 200ms call adjustLayout()
SSE With Multiple Event Nameslokascriptrealtime
One SSE connection routing several named server events into the same target
on click set the *--primary-color of #theme to "#ff6600"
Set DOM-Scoped Variable On Parentbothreactivity
Declare a ^name variable on this element; descendants can read and write it
on load set ^count to 0
Set Opacitycss-styles
Set CSS opacity using possessive syntax
on click set my *opacity to 0.5
Set Styledom-manipulation
Set a CSS style property
on click set my *background to "red"
Set Text (Possessive Dot)lokascripthyperfixi-extensions
Set text content using possessive dot notation (HyperFixi extension)
on click set my.textContent to "Done!"
Set Text Contentdom-manipulation
Set the text content of an element by ID
on click set #output.innerText to "Hello World"
Set Transformcss-styles
Set CSS transform property
on click set my *transform to "rotate(45deg)"
Set innerHTML (Possessive Dot)lokascripthyperfixi-extensions
Set innerHTML using possessive dot notation (HyperFixi extension)
on click set my.innerHTML to "<strong>Updated!</strong>"
Settle Animationsanimation
Wait for CSS animations to complete
on click add .animate then settle then remove .animate
Show Elementvisibility
Show a hidden element
on click show #modal
Show With Transitionvisibility
Show element with opacity transition
on click show #modal with *opacity
Slide Toggleanimation
Slide panel open/closed
on click toggle .collapsed on next .panel transition *max-height over 300ms
Sortable Behaviorbehavior
Makes child elements reorderable via drag-and-drop. Use: install Sortable(handle: ".drag-handle")
behavior Sortable(dragClass)
init
if dragClass is undefined
set dragClass to "sorting"
end
end
on pointerdown(clientY) from me
set item to the closest <li/> to the target
if item is null
exit
end
halt the event
add .{dragClass} to item
trigger sortable:start on me
repeat until event pointerup from document
wait for pointermove(clientY) from document
trigger sortable:move on me
end
remove .{dragClass} from item
trigger sortable:end on me
end
end
Stagger Animationanimation
Staggered entrance animation
on load repeat for item in .item with index add .visible to item wait 100ms end
Submit Form As FormDataasync
Serialize the closest form as FormData and POST it
on submit fetch /api/submit with method:"POST", body:(closest <form/> as FormData)
Swap Contentdom-manipulation
Swap two elements in the DOM
on click swap #a with #b
Tab Navigationui-components
Basic tab switching with active state
on click remove .active from .tab add .active to me
Tab With Content Panelui-components
Tab that shows associated content panel
on click remove .active from .tab add .active to me hide .tab-panel show the next <div.tab-panel/>
Take Class From Siblings (Tabs)dom-manipulation
Take a class from sibling elements and apply it to the current one (canonical tabs idiom)
on click take .active from .tab-button for me
Tell Another Elementevents
Run a sequence of commands on another element using tell
on click tell #panel add .open then wait 200ms then add .visible
Tell Commandbehaviors
Tell another element to execute a command
on click tell #modal to show
Template Literal Interpolationtemplates
Use backtick template literals to interpolate values into HTML
on click set my innerHTML to `<li>${$item.name}</li>`
Toggle ARIA Expandedaccessibility
Toggle ARIA expanded state
on click toggle @aria-expanded on me toggle .open on next .panel
Toggle Classclass-manipulation
Toggle a CSS class on the current element when clicked
on click toggle .active
Toggle Class On Other Elementclass-manipulation
Toggle a CSS class on another element
on click toggle .open on #menu
Toggle Visibilityvisibility
Toggle the hidden attribute on an element
on click toggle @hidden on #panel
Transition Background Colorcss-styles
Animate background color change
on click transition *background-color to "blue" over 500ms
Transition Opacityanimation
Animate opacity then remove the element
on click transition opacity to 0 over 500ms then remove me
Transition Transformanimation
Animate transform property
on click transition transform to "scale(1.2)" over 300ms
Trigger Eventevents
Trigger a custom event when the element loads
on load trigger init
Two-Way Bind Two Inputsbothreactivity
Share a global between two inputs by binding both to it; edits in either propagate to the other
bind $name to #input-a then bind $name to #input-b
Two-Way Bindingdata
Update display as input changes
on input from #firstName set #greeting.innerText to "Hello, " + my value
Unless Conditioncontrol-flow
Execute unless condition is true
on click unless I match .disabled toggle .selected
Wait For Eventtiming
Wait for a DOM event to fire
on click wait for transitionend
Wait Then Executetiming
Wait for a duration before executing a command
on click wait 2s then remove me
Web Worker Definitionbothrealtime
Define a Web Worker in hyperscript and call its methods like a normal object
worker Calculator def add(a, b) return a + b end end
WebSocket Listenerbothrealtime
Open a WebSocket and route incoming messages into the DOM
socket ChatSocket ws://localhost:8080 on message put it into #chat end
WebSocket With Form Sendlokascriptrealtime
Open a WebSocket on an element; descendant forms serialize fields to JSON and ws-send on submit