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

Execute commands asynchronously

Remove focus from element

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

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

Handle API errors by checking response body

Show loading indicator during fetch

Submit form data via POST

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

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).

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

Handle Shift+Enter key combo

Scroll to last message in chat

Log the current element to console

Log a message to the console

Create a new element dynamically

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

Handle multiple events with one handler

Select and modify next sibling element

Open modal and prevent body scroll

Safe property access using optional chaining (HyperFixi extension)

Prevent form submission and validate

Select and modify previous sibling element

Insert content after the current element

Insert content before the current element

Replace the content of the current element

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

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

Send an event with data payload

Set an attribute on the current element

Set a CSS custom property

Set CSS opacity using possessive syntax

Set a CSS style property

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 panel open/closed

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

Staggered entrance animation

Swap two elements in the DOM

Basic tab switching with active state

Tab that shows associated content panel

Tell another element to execute a command

Toggle ARIA expanded state

Toggle a CSS class on the current element when clicked

Toggle a CSS class on another element

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

Update display as input changes

Execute unless condition is true

Wait for a DOM event to fire

Wait for a duration before executing a command

Handle Ctrl+S globally