Pattern Browser · hyperfixi

Accessible Tabs both ui-components

Tab navigation with ARIA attributes

on click add [@aria-selected='false'] to .tab then add [@aria-selected='true'] to me

Accordion Toggle both ui-components

Toggle accordion panel visibility

on click toggle .open on closest .accordion-item toggle @aria-expanded

Add Class both class-manipulation

Add a CSS class to the current element when clicked

on click add .highlight to me

Add Class To Other both class-manipulation

Add a CSS class to another element

on click add .selected to #item

Append Content both dom-manipulation

Append content to an element

on click append "<li>Item</li>" to #list

Async Block advanced

The `async` prefix — no engine runs it (the multilingual front-end strips it)

on click async fetch /api/data then put it into me

Beep Debug Expression both debugging

Use beep! to debug-print an expression result without altering control flow

on click set $x to beep! my value

Bind To Explicit Property both reactivity

Use possessive syntax to bind to a named property explicitly (preferred — reads in any language)

bind $color to #picker's value

Bind Variable To Display-Only Element both reactivity

For non-form properties, only var→DOM fires; user mutations of the property are not observed

bind $message to #status's textContent

Bind Variable To Form Element both reactivity

Two-way bind a global variable to an input; property auto-detected (value/checked/etc.)

bind $greeting to #name-input

Blur Element both focus

Remove focus from element

on keydown[key=="Escape"] blur me

Breakpoint In Handler both debugging

Pause execution at a breakpoint and inspect state in the HDB debugger

on click breakpoint then set $x to 42

Build HTML List From Items both templates

Build an HTML list by iterating items and concatenating template literals

on click set $html to "" then for item in $items set $html to $html + `<li>${item.name}</li>` end then set #list.innerHTML to $html

Call Function both advanced

Call a JavaScript function

on click call myFunction()

Chained Property Access (Possessive Dot) both hyperfixi-extensions

Chained property access using possessive dot notation (HyperFixi extension)

on click set my.parentElement.style.display to "none"

Character Counter both forms

Show character count as user types

on input set #count.innerText to my value.length

Clear Input both forms

Clear the previous input field

on click set the value of previous <input/> to ""

Click Elsewhere both events

Handle clicks outside element

on click from elsewhere remove .open from me

Close Dropdown On Outside Click both ui-components

Close dropdown when clicking outside

on click from elsewhere remove .open from .dropdown-menu

Close Modal Button both ui-components

Close modal from button inside

on click hide closest .modal remove .modal-open from body

Close Modal On Backdrop Click both ui-components

Close modal by clicking outside

on click if target matches .modal-backdrop hide .modal-backdrop end

Close Modal On Escape both ui-components

Close modal when pressing Escape key

on keydown[key=="Escape"] from window hide .modal remove .modal-open from body

Closest Ancestor both navigation

Toggle class on closest matching ancestor

on click toggle .expanded on closest .card

Component: Attrs Into ^var components

Component reading attrs.data (JSON-encoded) into ^user via init script

Component: Click Counter hyperscript components

Component with isolated DOM-scoped state (^count) that re-renders on change

Component: Conditional Rendering hyperscript components

Component using ^var state and the #if directive for conditional rendering

Component: Default And Named Slots hyperscript components

Component with default and named slots for content projection

Component: Hello World hyperscript components

Define a custom element via a hyperscript-template script tag

Computed Value both data

Calculate and display computed value

on input from .quantity set #total.innerText to (the value of #price as Number) * (my value as Number)

Copy To Clipboard both clipboard

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 Counter both counters

Decrement a numeric counter element

on click decrement #counter's textContent

Default Value both data

Set default value if not present

on load default my @data-count to "0"

Disable Form On Submit both forms

Disable submit button while processing

on submit add @disabled to <button/> in me put "Submitting..." into <button/> in me

Document Ready both window-events

Initialize app when element loads

on load call initializeApp()

Draggable Behavior both behavior

Makes element draggable with pointer events. Use: install Draggable(dragHandle: ".titlebar")

behavior Draggable(dragHandle) on pointerdown(clientX, clientY) from (dragHandle or me) halt the event trigger draggable:start set xoff to clientX - my offsetLeft set yoff to clientY - my offsetTop 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 Toggle both ui-components

Toggle dropdown menu visibility

on click toggle .open on next .dropdown-menu halt

Event Debounce both events

Debounce input for search

on input debounced at 300ms fetch `/api/search?q=${my value}` as json then put it into #results

Event Once both events

Handle event only once

on first click add .initialized to me call setup()

Event Throttle both events

Throttle scroll handler

on scroll throttled at 100ms call updateScrollPosition()

Exclusive Accordion both ui-components

Accordion where only one panel is open

on click remove .open from .accordion-item add .open to closest .accordion-item

Fade Out And Remove both animation

Fade element out then remove from DOM

on click transition opacity to 0 over 300ms then remove me

Fetch Data both async

Fetch data from an API and display it

on click fetch /api/data then put it into #result

Fetch JSON both async

Fetch JSON data and use a property

on click fetch /api/user as json then set #name.innerText to it.name

Fetch With Auth Header both async

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 Handling both async

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 State both async

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 Method both async

Submit form data via POST

on submit fetch /api/form with method:"POST", body:form

Fetch Without Throwing both async

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 Collection both navigation

Focus first input in parent form

on click focus first <input/> in closest <form/>

Focus Element both focus

Focus an input element

on click focus #input

Focus Trap both accessibility

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) both hyperfixi-extensions

Call getAttribute using possessive dot notation (HyperFixi extension)

on click put my.getAttribute("data-id") into #output

Get Input Value (Possessive Dot) both hyperfixi-extensions

Mirror input value using possessive dot notation (HyperFixi extension)

on input put my.value into #preview

Get Value both data

Get a value and use it

on click get #input.value then log it

Go Back both navigation

Navigate back in history

on click go back

Go To URL both navigation

Navigate to a URL

on click go to url "/page"

Halt Event both control-flow

Stop event propagation

on click halt the event then toggle .active

Hide Element both visibility

Hide an element

on click hide #modal

Hide With Transition both visibility

Hide element with opacity transition

on click hide me with *opacity

If Condition both control-flow

Conditional execution based on state

on click if I match .active then remove .active else add .active end

If Element Exists both control-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 Selector both control-flow

Check if element matches selector

on click if I match .disabled halt else toggle .active end

If Value Empty both control-flow

Validate empty input

on blur if my value is empty add .error to me put "Required" into next .error-message end

Increment By Amount both counters

Increment counter by specific amount

on click increment #score's textContent by 10

Increment Counter both counters

Increment a numeric counter element

on click increment #counter's textContent

Increment Inherited DOM-Scoped Variable both reactivity

Walks up the parent chain to find ^count and writes the nearest defining ancestor

on click increment ^count

Increment a Sibling Counter both counters

Increment the text of the output element just before this one

on click increment the textContent of the previous <output/>

Inline JavaScript both advanced

Execute inline JavaScript

on click js console.log("from js") end

Input Mirror both forms

Mirror input value to another element

on input put my value into #preview

Input Validation both forms

Validate input on blur

on blur if my value is empty add .error to me else remove .error from me end

Install Behavior both behavior

Install a reusable behavior on an element. Replace "Draggable" with any defined behavior name (e.g., Sortable, Closeable).

install Draggable

Intercept: Cache Strategies service-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) both hyperfixi-extensions

Access result property using its.property syntax (HyperFixi extension)

on click fetch /api/data then put its.name into #result

Key Combination both events

Handle Shift+Enter key combo

on keydown[key=="Enter"] if event.shiftKey call submitAndContinue() end

Key Filter With `is` both events

Filter keyboard events using the modern `is` comparison syntax

on keyup[key is 'Escape'] clear me

Last In Collection both navigation

Scroll to last message in chat

on click scroll to last <.message/> in #chat

Live Block Fed By A Handler both reactivity

A handler writes a global; a live block that reads it re-renders on every write

Live Block With Multiple Dependencies both reactivity

Body re-runs only when one of its tracked reads ($price or $quantity) changes

live put `${$price * $quantity}` into #total end

Live Derived Value both reactivity

Reactively update content whenever a tracked dependency changes

live put `Count: ${$count}` into me end

Log Element both debugging

Log the current element to console

on click log me

Log Value both debugging

Log a message to the console

on click log "Button clicked!"

Make Element both dom-manipulation

Create a new element dynamically

on click make a <div.card/> then put it into #container

Make Toast Element both templates

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

Method Call (Possessive Dot) both hyperfixi-extensions

Call method on property using possessive dot notation (HyperFixi extension)

on input put my.value.toUpperCase() into #preview

Morph Fetched HTML both morphing

Fetch HTML and morph the DOM in place, preserving focus and form state

on click fetch /api/items then morph #list to it

Morph Form Without Losing Focus both morphing

Morph a form after submit so users keep focus, scroll position, and unsaved values

on submit fetch /api/save then morph (closest <form/>) to it

Morph Rendered Template both morphing

Render a template then morph it into the target element

on click render #row with row: $data then morph #target to it

Multiple Event Handlers both events

Handle multiple events with one handler

on click or keypress[key=="Enter"] toggle .active

Negated Condition both control-flow

Run a command only when a condition does not hold

on click if I do not match .disabled toggle .selected

Next Element both navigation

Select and modify next sibling element

on click add .highlight to next <li/>

Null-Safe Property Chain both hyperfixi-extensions

A property chain is null-safe: a missing link gives null instead of throwing

on click log my.dataset.customValue

Open Modal both ui-components

Open modal and prevent body scroll

on click show #modal add .modal-open to body

POST With Method And Body both async

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 Range both dom-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 Submit both forms

Prevent form submission and validate

on submit halt the event call validateForm() if result is false log "Invalid form" end

Previous Element both navigation

Select and modify previous sibling element

on click remove .highlight from previous <li/>

Pseudo-Command both advanced

Call a method on an element as if it were a command

on load click() me

Put After both dom-manipulation

Insert content after the current element

on click put "<p>New</p>" after me

Put Before both dom-manipulation

Insert content before the current element

on click put "<p>New</p>" before me

Put Content both dom-manipulation

Replace the content of the current element

on click put "Done!" into me

Reactive Array Mutation both reactivity

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 Element both reactivity

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 Event both events

Receive a custom event and update the receiving element's content

on hello put 'Got it!' into me

Removable Behavior both behavior

Removes element on click with optional confirmation and fade effect. Use: install Removable(confirmRemoval: true, effect: "fade")

behavior Removable(triggerEl, confirmRemoval, effect) on click from (triggerEl or me) 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 Class both class-manipulation

Remove a CSS class from the current element when clicked

on click remove .highlight from me

Remove Class From All both class-manipulation

Remove a CSS class from all matching elements

on click remove .active from .items

Remove Element both dom-manipulation

Remove the current element from the DOM

on click remove me

Render Template With Data both templates

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 Each both loops

Iterate over a collection

on click repeat for item in .items add .processed to item

Repeat Forever both loops

Infinite animation loop

on load repeat forever toggle .pulse wait 1s end

Repeat Times both loops

Repeat an action multiple times

on click repeat 3 times append "<p>Line</p>" to me

Repeat Until Event both loops

Repeat action while button is held

on mousedown repeat until event mouseup increment #counter's textContent wait 100ms end

Repeat While Condition both loops

Repeat while condition is true

on click repeat while #counter.innerText < 10 increment #counter's textContent wait 200ms end

Resizable Behavior both behavior

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 set startWidth to my offsetWidth set startHeight to my offsetHeight set startX to clientX set startY to clientY repeat until event pointerup from document wait for pointermove(clientX, clientY) or pointerup(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 *width to newWidth + "px" set my *height to newHeight + "px" trigger resizable:resize end trigger resizable:end end end

Resize Handler both window-events

Handle window resize with debounce

on resize from window debounced at 200ms call adjustLayout()

Screen Reader Announcement both accessibility

Announce message to screen readers

on success put event.detail.message into #sr-announce set @role of #sr-announce to "alert"

Scroll Handler both window-events

Add sticky class on scroll

on scroll from window if window.scrollY > 100 add .sticky to #header else remove .sticky from #header end

Send Custom Event both events

Dispatch a custom event to another element

on click send refresh to #widget

Send Custom Event To Form both events

Dispatch a custom event named hello to all form elements

on click send hello to <form/>

Send Event With Detail both events

Send an event with data payload

on click send update(value: 42) to #target

Send To Named Socket both realtime

Send a message to a previously-declared WebSocket from a click handler

on click send "hello" to ChatSocket

Server-Sent Events Source hyperscript realtime

Subscribe to a server-sent events endpoint and append messages to the DOM

eventsource ChatStream from /events on message put it into #messages end end

Set Attribute both dom-manipulation

Set an attribute on the current element

on click set @disabled to true

Set DOM-Scoped Variable On Parent both reactivity

Declare a ^name variable on this element; descendants can read and write it

on load set ^count to 0

Set Opacity both css-styles

Set CSS opacity using possessive syntax

on click set my *opacity to 0.5

Set Style both dom-manipulation

Set a CSS style property

on click set my *background to "red"

Set Style Property on Another Element both css-styles

Set a style property on a different element via the of-possessive

on click set the *background-color of #theme to "#ff6600"

Set Text (Possessive Dot) both hyperfixi-extensions

Set text content using possessive dot notation (HyperFixi extension)

on click set my.textContent to "Done!"

Set Text Content both dom-manipulation

Set the text content of an element by ID

on click set #output.innerText to "Hello World"

Set Transform both css-styles

Set CSS transform property

on click set my *transform to "rotate(45deg)"

Set innerHTML (Possessive Dot) both hyperfixi-extensions

Set innerHTML using possessive dot notation (HyperFixi extension)

on click set my.innerHTML to "<strong>Updated!</strong>"

Settle Animations both animation

Wait for CSS animations to complete

on click add .animate then settle then remove .animate

Show Element both visibility

Show a hidden element

on click show #modal

Show With Transition both visibility

Show element with opacity transition

on click show #modal with *opacity

Slide Toggle both animation

Slide a panel open/closed — pair .collapsed with a CSS max-height transition

on click toggle .collapsed on next .panel

Sortable Behavior both behavior

Makes child elements reorderable via drag-and-drop. Use: install Sortable(dragClass: "dragging")

behavior Sortable(dragClass) on pointerdown(clientY) from me set item to the target.closest("li") if item is null exit end halt the event set cls to dragClass or "sorting" add .{cls} to item trigger sortable:start on me repeat until event pointerup from document wait for pointermove(clientY) or pointerup(clientY) from document trigger sortable:move on me end remove .{cls} from item trigger sortable:end on me end end

Stagger Animation both animation

Staggered entrance animation

on load repeat for item in .item index i add .visible to item wait 100ms end

Submit Form As FormData both async

Serialize the closest form as FormData and POST it

on submit js(me) return new FormData(me.closest('form')) end then fetch /api/submit with method:"POST", body:it

Swap Content both dom-manipulation

Swap two elements in the DOM

on click swap #a with #b

Swap Content With View Transition both dom-manipulation

Swap two elements inside a view transition (document.startViewTransition) so the browser animates the change

on click start view transition swap #a with #b end

Tab Navigation both ui-components

Basic tab switching with active state

on click remove .active from .tab add .active to me

Tab With Content Panel both ui-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) both 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 Element both events

Run a sequence of commands on another element using tell

on click tell #panel add .open then wait 200ms then add .visible

Tell Command both behavior

Tell another element to execute a command

on click tell #modal show

Template Literal Interpolation both templates

Use backtick template literals to interpolate values into HTML

on click set my innerHTML to `<li>${$item.name}</li>`

Toggle ARIA Expanded both accessibility

Toggle ARIA expanded state

on click toggle @aria-expanded on me toggle .open on next .panel

Toggle Class both class-manipulation

Toggle a CSS class on the current element when clicked

on click toggle .active

Toggle Class On Other Element both class-manipulation

Toggle a CSS class on another element

on click toggle .open on #menu

Toggle Class Temporarily both class-manipulation

Toggle a CSS class, then revert it after a duration

on click toggle .loading for 2s

Toggle Visibility both visibility

Toggle the hidden attribute on an element

on click toggle @hidden on #panel

Transition Background Color both css-styles

Animate background color change

on click transition *background-color to "blue" over 500ms

Transition Opacity both animation

Animate opacity then remove the element

on click transition opacity to 0 over 500ms then remove me

Transition Transform both animation

Animate transform property

on click transition transform to "scale(1.2)" over 300ms

Trigger Event both events

Trigger a custom event when the element loads

on load trigger init

Two-Way Bind Two Inputs both reactivity

Share a global between two inputs by binding both to it; edits in either propagate to the other

bind $name to #input-a bind $name to #input-b

Two-Way Binding both data

Update display as input changes

on input from #firstName set #greeting.innerText to "Hello, " + my value

Wait For Event both timing

Wait for a DOM event to fire

on click wait for transitionend

Wait Then Execute both timing

Wait for a duration before executing a command

on click wait 2s then remove me

Web Worker Definition hyperscript realtime

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 Listener hyperscript realtime

Open a WebSocket and route incoming messages into the DOM

socket ChatSocket ws://localhost:8080 on message put it into #chat end

When Any Of Several Values Change both reactivity

Watch multiple expressions; body fires when any one of them changes

when $firstName or $lastName changes put `${$firstName} ${$lastName}` into #full-name end

When Computed Value Changes both reactivity

React to changes in a computed expression; `it` is the new value

when (#price's value * #qty's value) changes put "$" + it into me end

Window Keydown Handler both window-events

Handle Ctrl+S globally

on keydown[key=="s"] from window if event.ctrlKey halt call saveDocument() end