Pattern Browser

Tab navigation with ARIA attributes

Toggle accordion panel visibility

Add a CSS class to the current element when clicked

Add a CSS class to another element

Append content to an element

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

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

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

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

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

Remove focus from element

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

Build an HTML list by iterating items and concatenating template literals

Call a JavaScript function

Chained property access using possessive dot notation (HyperFixi extension)

Show character count as user types

Clear the previous input field

Handle clicks outside element

Close dropdown when clicking outside

Close modal from button inside

Close modal by clicking outside

Close modal when pressing Escape key

Toggle class on closest matching ancestor

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

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

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

Component with default and named slots for content projection

Define a custom element via a hyperscript-template script tag

Calculate and display computed value

Copy text to clipboard with feedback

Decrement a numeric counter element

Set default value if not present

Disable submit button while processing

Initialize app when element loads

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

Toggle dropdown menu visibility

Debounce input for search

Handle event only once

Throttle scroll handler

Accordion where only one panel is open

Fade element out then remove from DOM

Fetch data from an API and display it

Fetch JSON data and use a property

Fetch with custom headers and parse the response as JSON

Handle API errors by checking response body

Show loading indicator during fetch

Submit form data via POST

Fetch without throwing on errors; check the result before using it

Focus first input in parent form

Focus an input element

Trap focus within modal

Call getAttribute using possessive dot notation (HyperFixi extension)

Mirror input value using possessive dot notation (HyperFixi extension)

Get a value and use it

Navigate back in history

Navigate to a URL

Stop event propagation

Hide an element

Hide element with opacity transition

Conditional execution based on state

Check if element exists before action

Check if element matches selector

Validate empty input

Increment counter by specific amount

Increment a numeric counter element

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

Increment the text of the output element just before this one

Execute inline JavaScript

Mirror input value to another element

Validate input on blur

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

Service worker DSL with precaching, per-route strategies, and offline fallback

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

Handle Shift+Enter key combo

Filter keyboard events using the modern `is` comparison syntax

Scroll to last message in chat

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

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

Reactively update content whenever a tracked dependency changes

Log the current element to console

Log a message to the console

Create a new element dynamically

Create a new element, populate its content, and append it to the document

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

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

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

Render a template then morph it into the target element

Handle multiple events with one handler

Run a command only when a condition does not hold

Select and modify next sibling element

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

Open modal and prevent body scroll

POST to an endpoint by passing method and body as fetch options

Select a text range within an input or contenteditable using the pick command

Prevent form submission and validate

Select and modify previous sibling element

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

Insert content after the current element

Insert content before the current element

Replace the content of the current element

Mutate a reactive array; live blocks reading it re-render automatically

Read a ^name variable scoped to a specific element instead of walking up from `me`

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

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

Remove a CSS class from the current element when clicked

Remove a CSS class from all matching elements

Remove the current element from the DOM

Render a named template element with data, then insert the HTML into the DOM

Iterate over a collection

Infinite animation loop

Repeat an action multiple times

Repeat action while button is held

Repeat while condition is true

Makes elements resizable by dragging. Use: install Resizable(minWidth: 100, minHeight: 100)

Handle window resize with debounce

Announce message to screen readers

Add sticky class on scroll

Dispatch a custom event to another element

Dispatch a custom event named hello to all form elements

Send an event with data payload

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

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

Set an attribute on the current element

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

Set CSS opacity using possessive syntax

Set a CSS style property

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

Set text content using possessive dot notation (HyperFixi extension)

Set the text content of an element by ID

Set CSS transform property

Set innerHTML using possessive dot notation (HyperFixi extension)

Wait for CSS animations to complete

Show a hidden element

Show element with opacity transition

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

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

Staggered entrance animation

Serialize the closest form as FormData and POST it

Swap two elements in the DOM

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

Basic tab switching with active state

Tab that shows associated content panel

Take a class from sibling elements and apply it to the current one (canonical tabs idiom)

Run a sequence of commands on another element using tell

Tell another element to execute a command

Use backtick template literals to interpolate values into HTML

Toggle ARIA expanded state

Toggle a CSS class on the current element when clicked

Toggle a CSS class on another element

Toggle a CSS class, then revert it after a duration

Toggle the hidden attribute on an element

Animate background color change

Animate opacity then remove the element

Animate transform property

Trigger a custom event when the element loads

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

Update display as input changes

Wait for a DOM event to fire

Wait for a duration before executing a command

Define a Web Worker in hyperscript and call its methods like a normal object

Open a WebSocket and route incoming messages into the DOM

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

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

Handle Ctrl+S globally