htmx

https://four.htmx.org/docs
Admin
htmx is a dependency-free JavaScript library that allows developers to access modern browser...
Tokens:13,612
Snippets:189
Trust Score:9.8
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install hx-live extension

Source: https://four.htmx.org/docs/hx-live-guide

Include the htmx core library and the hx-live extension script in your HTML document.

```html
<script src="https://cdn.jsdelivr.net/npm/htmx.org@4.0.0/dist/htmx.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/htmx.org@4.0.0/dist/ext/hx-live.min.js"></script>
```

--------------------------------

### Configure htmx-lsp in Neovim

Source: https://four.htmx.org/docs/editor-support

Setup the htmx language server using lspconfig in Neovim.

```lua
local lspconfig = require('lspconfig')
lspconfig.htmx.setup{}
```

--------------------------------

### Install htmx via npm

Source: https://four.htmx.org/docs/editor-support

Use npm to install the htmx package, which includes the web-types metadata for IDE integration.

```bash
npm install htmx.org
```

--------------------------------

### Use JSON fallback for configuration

Source: https://four.htmx.org/docs/hcon-guide

Values starting with an opening brace are parsed as JSON, allowing for server-side composition.

```html
<!-- server renders this -->
<meta name="htmx-config" content='{"defaultSwap":"outerHTML","transitions":true}'>

<!-- or on an element -->
<button hx-get="/api" hx-config='{"credentials":"include","timeout":5000}'>
```

--------------------------------

### Initialize Third-Party Libraries

Source: https://four.htmx.org/docs/htmx-events-guide

Use htmx:after:init to set up new content swapped into the DOM.

```javascript
htmx.on('htmx:after:init', function (evt) {
    setUpElement(evt.detail.elt);
});
```

--------------------------------

### Configure hx-swap with JSON

Source: https://four.htmx.org/docs/hcon-guide

Uses JSON objects for swap configuration, allowing explicit style overrides.

```html
<!-- modifiers only, style = config.defaultSwap -->
<div hx-swap='{"swap":"200ms","settle":"100ms"}'>

<!-- explicit style -->
<div hx-swap='{"style":"outerHTML","swap":"200ms"}'>
```

--------------------------------

### Using relative selectors with q()

Source: https://four.htmx.org/docs/hx-live-guide

Demonstrates resolving elements relative to the current execution context.

```html
__
<button hx-on:click="q('next p').toggle('.hilite')">Toggle the next one</button>
<p>I am next</p>
<p>I am not</p>
```

--------------------------------

### Access htmx.live methods

Source: https://four.htmx.org/docs/whats-new-in-htmx-4

Use the htmx.live namespace for utility functions previously handled by htmx.takeClass.

```javascript
htmx.live.take(target, className, source)   // strip class from `source`, add to `target`
htmx.live.forEvent(...args)                 // race events/timeouts
htmx.live.nextFrame()                       // promise that resolves on next animation frame
htmx.live.q(selector)                       // jQuery-like proxy rooted at documentElement
htmx.live.debounce(ms[, fn])                // global debounce
htmx.live.refresh()                         // recompute every live expression
```

--------------------------------

### Load extensions via script tags

Source: https://four.htmx.org/docs/extension-htmx-4-migration-guide

Extensions are loaded by including the script file directly without requiring an hx-ext attribute.

```html
<script src="/path/to/htmx.js"></script>
<script src="/path/to/ext/my-extension.js"></script>
```

--------------------------------

### Loading Extensions

Source: https://four.htmx.org/docs/whats-new-in-htmx-4

Shows the updated method for loading extensions by including scripts directly without specific attributes.

```html
<script src="/path/to/htmx.js"></script>
<script src="/path/to/ext/sse.js"></script>
```

--------------------------------

### Restricting Extension Loading

Source: https://four.htmx.org/docs/whats-new-in-htmx-4

Demonstrates how to restrict which extensions are allowed to load using a meta tag configuration.

```html
<meta name="htmx-config" content='{"extensions": "sse, ws"}'>
```

--------------------------------

### Configure hx-config options

Source: https://four.htmx.org/docs/hcon-guide

Merges fetch options into the request context for specific elements.

```html
<button hx-get="/slow" hx-config="timeout:30000">
<button hx-get="/api/data" hx-config='credentials:"include" cache:"no-cache"'>
```

--------------------------------

### Implement new hx-swap styles

Source: https://four.htmx.org/docs/whats-new-in-htmx-4

New swap styles include morphing algorithms, text content updates, and element deletion.

```html
<div hx-get="/data" hx-swap="innerMorph">...</div>
<div hx-get="/data" hx-swap="outerMorph">...</div>
<div hx-get="/text" hx-swap="textContent">...</div>
<div hx-get="/remove" hx-swap="delete">...</div>
```

--------------------------------

### Implement a custom swap strategy

Source: https://four.htmx.org/docs/extension-authoring-guide

Define a handle_swap method in the extension to intercept specific swap styles and perform custom DOM manipulation.

```javascript
__
htmx.registerExtension("my-swap", {
    handle_swap: (swapStyle, target, fragment, swapSpec) => {
        if (swapStyle === "my-custom-swap") {
            target.appendChild(fragment);
            return true; // Handled
        }
        return false; // Not handled
    },
});
```

--------------------------------

### Download htmx web-types file

Source: https://four.htmx.org/docs/editor-support

Download the web-types JSON file manually when using htmx via CDN.

```bash
curl -O https://four.htmx.org/js/editors/jetbrains/htmx.web-types.json
```

--------------------------------

### Accessing event detail context

Source: https://four.htmx.org/docs/htmx-events-guide

Demonstrates accessing the request context via evt.detail.ctx to inspect request properties.

```javascript
htmx.on('htmx:before:request', function (evt) {
    let ctx = evt.detail.ctx;
    console.log(ctx.request.method, ctx.request.action, ctx.target);
});
```

--------------------------------

### Enable history caching

Source: https://four.htmx.org/docs/htmax

Opt into history caching by adding the htmx-config meta tag to your document head.

```html
<meta name="htmx-config" content='{"historyCache": {"disable": false}}'>
```

--------------------------------

### Replacing hx-trigger queue with hx-sync

Source: https://four.htmx.org/docs/whats-new-in-htmx-4

Illustrates the migration from the removed queue modifier in hx-trigger to the hx-sync attribute for request queuing.

```html
<!-- htmx 2 -->
<div hx-trigger="click queue:all" hx-get="/test">...</div>

<!-- htmx 4: use hx-sync instead -->
<div hx-trigger="click" hx-get="/test" hx-sync="this:queue all">...</div>
```

--------------------------------

### Configure global htmx-config

Source: https://four.htmx.org/docs/hcon-guide

Sets global configuration values using HCON or JSON in a meta tag.

```html
<!-- HCON -->
<meta name="htmx-config" content="defaultSwap:outerHTML transitions:true">

<!-- JSON -->
<meta name="htmx-config" content='{"defaultSwap":"outerHTML","transitions":true}'>

<!-- nested via dot notation -->
<meta name="htmx-config" content="sse.reconnect:true sse.reconnectMaxAttempts:5">
```

--------------------------------

### Listen for htmx events using htmx.on

Source: https://four.htmx.org/docs/htmx-events-guide

Uses the htmx.on helper to listen for events on the document by default.

```javascript
htmx.on('htmx:after:swap', function (evt) {
    console.log('swapped', evt.detail.ctx.target);
});
```

--------------------------------

### Register web-types in package.json

Source: https://four.htmx.org/docs/editor-support

Add the web-types field to your project's package.json to enable IDE support for manually downloaded files.

```json
{
  "web-types": "./htmx.web-types.json"
}
```

--------------------------------

### Create a reactive counter using data attributes

Source: https://four.htmx.org/docs/hx-live-guide

Demonstrates cleaning up imperative code by binding button clicks to data attribute increments and displaying the result reactively.

```html
__
  <div data-count="0">
    <button hx-on:click="data.count++">Add 1</button>
    <button hx-on:click="data.count--">Subtract 1</button>
    <output :text="data.count">0</output>
  </div>
```

--------------------------------

### Use hx-partial for multi-target updates

Source: https://four.htmx.org/docs/whats-new-in-htmx-4

Target multiple elements from a single response using the <hx-partial> element.

```html
<hx-partial hx-target="#messages" hx-swap="beforeend">
    <div>New message</div>
</hx-partial>

<hx-partial hx-target="#count">
    <span>5</span>
</hx-partial>
```

--------------------------------

### Configure HX-Location response header

Source: https://four.htmx.org/docs/hcon-guide

Specifies navigation targets and push state using HCON or JSON in server responses.

```http
HX-Location: /new-page
HX-Location: path:"/new-page" push:"true"
HX-Location: {"path":"/new-page","push":"true"}
```

--------------------------------

### Listen for htmx events using hx-on:* attributes

Source: https://four.htmx.org/docs/htmx-events-guide

Attaches event listeners directly to HTML elements using the hx-on:* attribute syntax.

```html
<button hx-post="/example"
        hx-on:htmx:config:request="ctx.request.body.set('source', 'button')">
    Post Me!
</button>
```

--------------------------------

### Configure hx-swap modifiers

Source: https://four.htmx.org/docs/hcon-guide

Defines swap timing and behavior using HCON string syntax within hx-swap.

```html
<div hx-get="/update" hx-swap="innerHTML swap:200ms settle:100ms scroll:top">
<div hx-get="/update" hx-swap="outerHTML transition:true ignoreTitle:true">
```

--------------------------------

### Use helpers and DOM methods in hx-on

Source: https://four.htmx.org/docs/hx-live-guide

Helper methods and standard DOM methods like matches() are available directly within hx-on expressions.

```html
__
<button hx-on:click="toggle('.hilite')">toggle()</button>
<button hx-on:click="take('.hilite')">take()</button>
<button hx-on:click="insert('after', '<em> added</em>')">insert()</button>
```

```html
__
<p hx-on:click="toggle('.hilite'); q('next span').textContent = matches('.hilite')">Click me</p>
<span>false</span>
```

--------------------------------

### Execute arbitrary logic with hx-live

Source: https://four.htmx.org/docs/hx-live-guide

Uses the hx-live attribute to run custom JavaScript logic that updates a progress bar based on data changes.

```html
__
<div data-total="0">
    <button hx-on:click="data.total += 5">Add 5</button>
    <button hx-on:click="data.total = 0">Reset</button>
    <progress max="30" value="0" hx-live="this.value = Math.min(data.total, 20)"></progress>
    <p :text="`${data.total} / 20`"></p>
</div>
```

--------------------------------

### Migrate extension definition from htmx 2.x to 4.0

Source: https://four.htmx.org/docs/extension-htmx-4-migration-guide

Replace defineExtension with registerExtension and map event callbacks to specific hook methods.

```javascript
// htmx 2.x
htmx.defineExtension('my-ext', {
    onEvent: function(name, evt) {
        if (name === 'htmx:beforeRequest') { /* ... */ }
    }
});

// htmx 4
htmx.registerExtension('my-ext', {
    htmx_before_request: (elt, detail) => { /* ... */ }
});
```

--------------------------------

### Configure Event Logging

Source: https://four.htmx.org/docs/htmx-events-guide

Enable logging for all htmx events via JavaScript or HTML meta tags.

```javascript
htmx.config.logAll = true;
```

```html
<meta name="htmx-config" content="logAll:true">
```

--------------------------------

### Register an htmx extension with internal API access

Source: https://four.htmx.org/docs/extension-authoring-guide

Use the init hook to capture the internalAPI object for use in subsequent extension lifecycle methods.

```javascript
__
let api;

htmx.registerExtension("my-ext", {
    init: (internalAPI) => {
        api = internalAPI;
    },

    htmx_after_init: (elt) => {
        let value = api.attributeValue(elt, "hx-my-attr");
        let specs = api.parseTriggerSpecs("click, keyup delay:500ms");
        let { method, action } = api.determineMethodAndAction(elt, evt);
    },
});
```

--------------------------------

### Trigger manual reactivity refresh

Source: https://four.htmx.org/docs/hx-live-guide

Demonstrates using htmx.live.refresh() to force a recalculation of reactive elements when external variables change.

```html
__
<button hx-on:click="window.count = (window.count ?? 0) + 1">Change a JS variable</button>
<button hx-on:click="htmx.live.refresh()">Refresh</button>
<p :text="`window.count is ${window.count ?? 0}`"></p>
```

--------------------------------

### Migrating isInlineSwap and handleSwap to handle_swap

Source: https://four.htmx.org/docs/extension-htmx-4-migration-guide

Replace both isInlineSwap and handleSwap with the unified handle_swap hook.

```javascript
__
// htmx 2.x
isInlineSwap: function(swapStyle) {
    return swapStyle === 'morphdom';
},
handleSwap: function(swapStyle, target, fragment) {
    if (swapStyle === 'morphdom') {
        morphdom(target, fragment.firstElementChild || fragment.firstChild);
        return [target];
    }
}

// htmx 4
handle_swap: (swapStyle, target, fragment) => {
    if (swapStyle === 'morphdom') {
        morphdom(target, fragment.firstElementChild || fragment.firstChild);
        return true;
    }
    return false;
}
```

--------------------------------

### Configure status code swaps

Source: https://four.htmx.org/docs/whats-new-in-htmx-4

Define specific swap behaviors based on HTTP status codes using the hx-status attribute.

```html
<form hx-post="/save"
      hx-status:422="swap:innerHTML target:#errors select:#validation-errors"
      hx-status:5xx="swap:none push:false">
    <!-- form fields -->
</form>
```

--------------------------------

### Explicit Attribute Inheritance

Source: https://four.htmx.org/docs/whats-new-in-htmx-4

Demonstrates the transition from implicit inheritance in htmx 2 to explicit inheritance using the :inherited suffix in htmx 4.

```html
<!-- htmx 2: implicit inheritance -->
<div hx-confirm="Are you sure?">
    <button hx-delete="/item/1">Delete</button>
</div>

<!-- htmx 4: explicit inheritance -->
<div hx-confirm:inherited="Are you sure?">
    <button hx-delete="/item/1">Delete</button>
</div>
```

--------------------------------

### Configure htmx via meta tag

Source: https://four.htmx.org/docs/hcon-guide

Use the htmx-config meta tag to set global configuration using HCON or JSON syntax.

```html
<meta name="htmx-config" content="transitions defaultTimeout:5000 sse.reconnect:true">
```

```html
<meta name="htmx-config" content='{"transitions":true,"defaultTimeout":5000,"sse":{"reconnect":true}}'>
```

--------------------------------

### Implement custom handle_swap hook

Source: https://four.htmx.org/docs/extension-htmx-4-migration-guide

The handle_swap hook is unique as it receives positional parameters instead of the standard (elt, detail) signature.

```javascript
handle_swap: (swapStyle, target, fragment, swapSpec) => {
    if (swapStyle === 'my-swap') {
        target.appendChild(fragment);
        return true;
    }
    return false;
}
```

--------------------------------

### take(selector, scope)

Source: https://four.htmx.org/docs/hx-live-guide

Sets a class or attribute on the target element while removing it from all other elements in the specified scope.

```APIDOC
## take(selector, scope)

### Description
Ensures only one element in a scope has a specific class or attribute. The target element gains the property, while others lose it.

### Parameters
- **selector** (string) - Required - The class ('.'), ARIA attribute ('aria-'), or boolean attribute to apply.
- **scope** (string, optional) - Optional - The selector defining the set of elements to manage.
```

--------------------------------

### Apply innerMorph swap style

Source: https://four.htmx.org/docs/morphing-swaps-guide

Demonstrates applying the innerMorph swap style to a target element using the hx-swap attribute.

```html
<div id="content" hx-get="/refresh" hx-swap="innerMorph">
  ...
</div>
```

--------------------------------

### Configure global morph skip selectors

Source: https://four.htmx.org/docs/morphing-swaps-guide

Extends the global htmx configuration to define custom selectors for skipping morphing on specific elements or components.

```javascript
htmx.config.morphSkip         = '[hx-morph-skip], custom-widget, .frozen';
htmx.config.morphSkipChildren = '[hx-morph-skip-children], lit-component, .sortable';
```

--------------------------------

### Selecting multiple elements with q()

Source: https://four.htmx.org/docs/hx-live-guide

Uses a CSS class selector to apply a toggle operation to all matching elements simultaneously.

```html
__
<button hx-on:click="q('.pick-us').toggle('.hilite')">Toggle all</button>
<p class="pick-us">First</p>
<p class="pick-us">Second</p>
<p class="pick-us">Third</p>
```

--------------------------------

### Migrating the init hook

Source: https://four.htmx.org/docs/extension-htmx-4-migration-guide

Store the internalAPI reference in the init hook for use in other hooks.

```javascript
__
// htmx 2.x
init: function(api) {
    return null;
}

// htmx 4
init: (internalAPI) => {
    api = internalAPI;
}
```

--------------------------------

### Migrating getSelectors to htmx_after_init

Source: https://four.htmx.org/docs/extension-htmx-4-migration-guide

Use htmx_after_init to check for attributes instead of the removed getSelectors hook.

```javascript
__
// htmx 2.x
getSelectors: function() {
    return ['[my-custom-attr]'];
},
onEvent: function(name, evt) {
    if (name === 'htmx:afterProcessNode') {
        initializeCustomBehavior(evt.target);
    }
}

// htmx 4
htmx_after_init: (elt) => {
    if (api.attributeValue(elt, 'my-custom-attr')) {
        initializeCustomBehavior(elt);
    }
}
```

--------------------------------

### Implement dynamic feedback with reactive attributes

Source: https://four.htmx.org/docs/hx-live-guide

Uses reactive class binding, text content updates, and hidden attribute toggling based on textarea input length.

```html
__
<textarea id="msg" placeholder="Say something" :.too-much-text="q('#msg').value.length > 60"></textarea>
<p :text="`${q('#msg').value.length} / 60`"></p>
<p :hidden="q('#msg').value.length <= 60">Too long.</p>
```

--------------------------------

### Selecting a single element with q()

Source: https://four.htmx.org/docs/hx-live-guide

Uses a CSS ID selector to target and toggle a class on a specific element.

```html
__
<button hx-on:click="q('#pick-me').toggle('.hilite')">Toggle</button>
<p id="pick-me">Pick me</p>
```

--------------------------------

### Use dot-notation for nested keys

Source: https://four.htmx.org/docs/hcon-guide

Dot-notation allows setting nested object properties within a single configuration string.

```html
<meta name="htmx-config" content="sse.reconnect:true sse.reconnectDelay:1000">
```

--------------------------------

### htmx.on

Source: https://four.htmx.org/docs/htmx-events-guide

Registers an event listener for htmx events. This allows developers to hook into the lifecycle of requests, swaps, and element processing.

```APIDOC
## htmx.on(eventName, callback)

### Description
Registers a listener for a specific htmx event. The callback receives an event object which can be used to inspect details or call `preventDefault()` to cancel the default htmx behavior.

### Parameters
- **eventName** (string) - Required - The name of the htmx event to listen for (e.g., 'htmx:before:request').
- **callback** (function) - Required - The function to execute when the event fires, receiving the event object as an argument.

### Example
```javascript
htmx.on('htmx:before:request', function (evt) {
    if (!isLoggedIn()) {
        evt.preventDefault();
    }
});
```
```

--------------------------------

### Register an htmx extension

Source: https://four.htmx.org/docs/extension-authoring-guide

Define a new extension using htmx.registerExtension, providing lifecycle hooks for initialization and request handling.

```javascript
htmx.registerExtension("my-ext", {
    init: (internalAPI) => {
        // Called once when extension is registered
        // Store internalAPI reference if needed
    },

    htmx_before_request: (elt, detail) => {
        // Called before each request
        // Return false to cancel
    },

    htmx_after_request: (elt, detail) => {
        // Called after each request
    },
});
```

--------------------------------

### Update hx-swap scroll modifiers

Source: https://four.htmx.org/docs/whats-new-in-htmx-4

Use separate keys for scroll and show modifiers instead of the combined selector:position syntax.

```html
<!-- htmx 2 (broken in 4) -->
<div hx-swap="innerHTML show:#other:top"></div>

<!-- htmx 4 -->
<div hx-swap="innerHTML show:top showTarget:#other"></div>
<div hx-swap="innerHTML scroll:bottom scrollTarget:#other"></div>
```

--------------------------------

### htmx.registerExtension(name, definition)

Source: https://four.htmx.org/docs/extension-authoring-guide

Registers a new htmx extension with a unique name and a definition object containing lifecycle hooks.

```APIDOC
## htmx.registerExtension(name, definition)

### Description
Registers a new extension with htmx. The definition object should contain methods corresponding to htmx lifecycle hooks.

### Parameters
- **name** (string) - Required - The unique name of the extension.
- **definition** (object) - Required - An object containing lifecycle hook functions (e.g., init, htmx_before_request, htmx_after_request).

### Example
```javascript
htmx.registerExtension("my-ext", {
    init: (internalAPI) => {},
    htmx_before_request: (elt, detail) => {},
    htmx_after_request: (elt, detail) => {}
});
```
```

--------------------------------

### Configure Morph Swaps with hx-swap

Source: https://four.htmx.org/docs/morphing-swaps-guide

Apply the innerMorph strategy to an element to update its children while maintaining the state of existing nodes.

```html
<div id="status" hx-get="/status" hx-trigger="every 5s" hx-swap="innerMorph">
  <h2>Build: passing</h2>
  <input name="note" placeholder="Add a note">
</div>
```

--------------------------------

### Include htmax in HTML

Source: https://four.htmx.org/docs/htmax

Add the htmax script tag to your HTML file to load htmx and its bundled extensions.

```html
<script src="/js/htmax.min.js"></script>
```

--------------------------------

### Listen for htmx events using addEventListener

Source: https://four.htmx.org/docs/htmx-events-guide

Uses the standard DOM addEventListener method to attach listeners to specific elements like document.body.

```javascript
document.body.addEventListener('htmx:after:init', function (evt) {
    setUpElement(evt.detail.elt);
});
```

--------------------------------

### Configure JSX compatibility

Source: https://four.htmx.org/docs/whats-new-in-htmx-4

Set a metaCharacter to replace colons in attribute names for frameworks that do not support them.

```javascript
htmx.config.metaCharacter = "-";
// hx-ws-connect instead of hx-ws:connect
// hx-confirm-inherited instead of hx-confirm:inherited
```

--------------------------------

### Define HCON key-value pairs

Source: https://four.htmx.org/docs/hcon-guide

Key-value pairs in HCON can be separated by either spaces or commas.

```text
key:value key2:value2
key:value, key2:value2
```

--------------------------------

### Configure hx-trigger modifiers

Source: https://four.htmx.org/docs/hcon-guide

Applies event triggers with timing or frequency modifiers.

```html
<input hx-get="/search" hx-trigger="keyup delay:300ms">
<button hx-post="/save" hx-trigger="click throttle:1s">
<div hx-get="/poll" hx-trigger="every 2s">
<form hx-post="/submit" hx-trigger="submit once">
```

--------------------------------

### Share state across parent-child elements

Source: https://four.htmx.org/docs/hx-live-guide

Demonstrates DOM scoping where child elements access data attributes defined on a parent container.

```html
__
  <div data-count="0">
    <button hx-on:click="q('next output').innerText = ++data.count; ">Add 1</button>
    <button hx-on:click="q('next output').innerText = --data.count; ">Subtract 1</button>
    <output>0</output>
  </div>
```

--------------------------------

### Wait for an event

Source: https://four.htmx.org/docs/hx-live-guide

Pauses execution until a specific event occurs or an optional timeout is reached.

```html
__
<button hx-on:click="
    class.add('nudge');
    await forEvent('transitionend', 500);
    class.remove('nudge')
">Nudge me</button>
```

--------------------------------

### Structure of the htmx request context object

Source: https://four.htmx.org/docs/extension-authoring-guide

The detail.ctx object provides access to request metadata, headers, and response information during the request lifecycle.

```javascript
__
{
    sourceElement,      // Element triggering request
    sourceEvent,        // Event that triggered request
    status,            // Request status
    target,            // Target element for swap
    swap,              // Swap strategy
    request: {
        action,        // Request URL
        method,        // HTTP method
        headers,       // Request headers
        body,          // FormData during htmx_config_request; final BodyInit later
        validate,      // Whether to validate
        abort,         // Function to abort request
        signal         // AbortSignal
    },
    response: {        // Available after request
        raw,           // Raw Response object
        status,        // HTTP status code
        headers        // Response headers: https://developer.mozilla.org/en-US/docs/Web/API/Headers
    },
    text,              // Response text (after request)
    hx                 // HX-* response headers (parsed)
}
```

--------------------------------

### Take exclusive control of classes or attributes

Source: https://four.htmx.org/docs/hx-live-guide

Use take to apply a class or attribute to one element while removing it from others in the same scope.

```html
__
<button class="hilite" hx-on:click="take('.hilite')">Details</button>
<button hx-on:click="take('.hilite')">Reviews</button>
<button hx-on:click="take('.hilite')">Shipping</button>
```

```html
__
<a href="#a" aria-current="true" hx-on:click="take('aria-current')">Home</a>
<a href="#b" hx-on:click="take('aria-current')">Docs</a>
<a href="#c" hx-on:click="take('aria-current')">Examples</a>
```

```html
__
<button hx-on:click="q('#one').take('.hilite', '.card')">Pick one</button>
<button hx-on:click="q('#two').take('.hilite', '.card')">Pick two</button>
<p id="one" class="card hilite">One</p>
<p id="two" class="card">Two</p>
```

--------------------------------

### Appending Inherited Values

Source: https://four.htmx.org/docs/whats-new-in-htmx-4

Shows how to use the :append suffix to add to an inherited attribute value instead of replacing it.

```html
<div hx-include:inherited="#global-fields">
    <!-- appends .extra to the inherited value -->
    <form hx-include:inherited:append=".extra">...</form>
</div>
```

--------------------------------

### Exclude elements from morphing

Source: https://four.htmx.org/docs/morphing-swaps-guide

Shows how to use hx-morph-skip and hx-morph-skip-children attributes to prevent specific elements or their children from being morphed.

```html
<custom-widget hx-morph-skip>...</custom-widget>

<div hx-morph-skip-children class="chart">...</div>
```

--------------------------------

### Access data via query selectors

Source: https://four.htmx.org/docs/hx-live-guide

Retrieves the data property from an element identified by a query selector.

```html
__
  <button hx-on:click="q('#some-div').data.count; ">Add 1</button>
```

--------------------------------

### Toggle classes and attributes

Source: https://four.htmx.org/docs/hx-live-guide

Use toggle to switch classes, ARIA attributes, or boolean attributes on elements.

```html
__
<button hx-on:click="toggle('.hilite')">A class</button>
<button aria-expanded="false" hx-on:click="toggle('aria-expanded')">An ARIA attribute</button>
<button hx-on:click="q('next input').toggle('disabled')">An attribute</button>
<input value="I can be disabled">
```

```html
__
<button class="warm" hx-on:click="toggle('.theme', 'warm|cool')">Change theme</button>
```

--------------------------------

### Modify Request Parameters and Headers

Source: https://four.htmx.org/docs/htmx-events-guide

Use htmx:config:request to inject data into the request body or headers before it is sent.

```javascript
htmx.on('htmx:config:request', function (evt) {
    evt.detail.ctx.request.body.set('csrf-token', getToken());
});
```

```javascript
htmx.on('htmx:config:request', function (evt) {
    evt.detail.ctx.request.headers['X-CSRF-Token'] = getToken();
});
```

--------------------------------

### nextFrame()

Source: https://four.htmx.org/docs/hx-live-guide

The nextFrame() method pauses execution until the next browser animation frame.

```APIDOC
## nextFrame()

### Description
Suspends execution until the next animation frame, useful for ensuring CSS changes or animations are applied before proceeding.
```

--------------------------------

### Trigger custom events

Source: https://four.htmx.org/docs/hx-live-guide

Dispatch custom events with optional detail data and bubbling control.

```html
__
<button hx-on:click="q('#bell').trigger('ring')">Ring the bell</button>
<p id="bell" hx-on:ring="this.textContent = 'Heard it'">Waiting</p>
```

```javascript
__
trigger('ring', {times: 3})        // event.detail.times is 3
trigger('ring', {}, false)         // does not bubble
```

--------------------------------

### Migrating onEvent to specific hooks

Source: https://four.htmx.org/docs/extension-htmx-4-migration-guide

Replace the generic onEvent callback with specific hooks like htmx_before_swap.

```javascript
__
// htmx 2.x
onEvent: function(name, evt) {
    if (name === 'htmx:beforeSwap' && evt.detail.xhr.status !== 200) {
        var target = getRespCodeTarget(evt.detail.requestConfig.elt, evt.detail.xhr.status);
        if (target) {
            evt.detail.shouldSwap = true;
            evt.detail.target = target;
        }
    }
}

// htmx 4
htmx_before_swap: (elt, detail) => {
    if (detail.ctx.response.status !== 200) {
        var target = getRespCodeTarget(elt, detail.ctx.response.status);
        if (target) {
            detail.ctx.target = target;
        }
    }
}
```

--------------------------------

### Store and update state with data attributes

Source: https://four.htmx.org/docs/hx-live-guide

Uses the data property to read and write typed values stored in data- attributes on an element.

```html
__
    <button data-count="0" hx-on:click="q('next output').innerText = ++data.count; ">Add 1</button>
    <output>0</output>
```

--------------------------------

### debounce()

Source: https://four.htmx.org/docs/hx-live-guide

The debounce() method delays an action by a specified number of milliseconds. If the event is retriggered within that interval, the timer resets and the action is postponed.

```APIDOC
## debounce(ms)

### Description
Delays the execution of subsequent code in an `hx-on` attribute until the specified time has passed without the event being retriggered.

### Parameters
- **ms** (number) - Required - The debounce delay in milliseconds.
```

--------------------------------

### insert(position, content)

Source: https://four.htmx.org/docs/hx-live-guide

Inserts HTML content at a specific position relative to the element.

```APIDOC
## insert(position, content)

### Description
Adds HTML around or inside an element. Content is processed with htmx.process().

### Parameters
- **position** (string) - Required - One of: 'before', 'start', 'end', 'after', 'into', 'replace'.
- **content** (string) - Required - The HTML string to insert.
```

--------------------------------

### trigger(eventName, detail, bubbles)

Source: https://four.htmx.org/docs/hx-live-guide

Dispatches a custom event from the element.

```APIDOC
## trigger(eventName, detail, bubbles)

### Description
Dispatches a custom event. Events bubble by default.

### Parameters
- **eventName** (string) - Required - The name of the event to trigger.
- **detail** (object, optional) - Optional - Data to be passed as event.detail.
- **bubbles** (boolean, optional) - Optional - Whether the event should bubble (default: true).
```

--------------------------------

### Apply HCON value types

Source: https://four.htmx.org/docs/hcon-guide

HCON supports booleans, numbers, and strings, with quotes required for values containing spaces or special characters.

```html
<!-- booleans -->
<button hx-get="/api" hx-config="validate">          <!-- validate: true -->
<button hx-get="/api" hx-config="validate:false">    <!-- validate: false -->

<!-- numbers -->
<button hx-get="/api" hx-config="timeout:5000">

<!-- strings, quotes needed when value contains spaces or special chars -->
<button hx-get="/api" hx-config='credentials:"include"'>
<button hx-get="/api" hx-config="cache:'no-cache'">
```

--------------------------------

### Manage accessibility state with aria properties

Source: https://four.htmx.org/docs/hx-live-guide

Uses the aria property to toggle boolean states and control element visibility for accessibility.

```html
__
<button aria-expanded="false" aria-controls="details"
        hx-on:click="aria.expanded = !aria.expanded; 
                     q('#details').hidden = !aria.expanded">
    Details
</button>
<p id="details" hidden>
    This panel is driven by aria-expanded, not by a class.
</p>
```

--------------------------------

### Migrating encodeParameters to htmx_before_request

Source: https://four.htmx.org/docs/extension-htmx-4-migration-guide

Modify detail.ctx.request.body in htmx_before_request to replace the removed encodeParameters hook.

```javascript
__
// htmx 2.x
onEvent: function(name, evt) {
    if (name === 'htmx:configRequest') {
        evt.detail.headers['Content-Type'] = 'application/json';
    }
},
encodeParameters: function(xhr, parameters, elt) {
    var object = {};
    parameters.forEach(function(value, key) {
        if (Object.hasOwn(object, key)) {
            if (!Array.isArray(object[key])) object[key] = [object[key]];
            object[key].push(value);
        } else {
            object[key] = value;
        }
    });
    return JSON.stringify(object);
}

// htmx 4
htmx_before_request: (elt, detail) => {
    detail.ctx.request.headers['Content-Type'] = 'application/json';
    var object = {};
    detail.ctx.request.body.forEach(function(value, key) {
        if (Object.hasOwn(object, key)) {
            if (!Array.isArray(object[key])) object[key] = [object[key]];
            object[key].push(value);
        } else {
            object[key] = value;
        }
    });
    detail.ctx.request.body = JSON.stringify(object);
}
```

--------------------------------

### Change Swap Target Dynamically

Source: https://four.htmx.org/docs/htmx-events-guide

Modify the target element during the htmx:before:swap event based on response status.

```javascript
htmx.on('htmx:before:swap', function (evt) {
    if (evt.detail.ctx.response.status === 404) {
        evt.detail.ctx.target = document.querySelector('#errors');
    }
});
```

--------------------------------

### toggle(selector, values)

Source: https://four.htmx.org/docs/hx-live-guide

Toggles classes, ARIA attributes, or boolean attributes on elements. A leading dot indicates a class, an 'aria-' prefix toggles between 'true' and 'false', and other strings are treated as boolean attributes.

```APIDOC
## toggle(selector, values)

### Description
Toggles classes, ARIA attributes, or boolean attributes. If multiple values are provided, it cycles through them.

### Parameters
- **selector** (string) - Required - The target class (prefixed with '.'), ARIA attribute (prefixed with 'aria-'), or boolean attribute name.
- **values** (string, optional) - Optional - A pipe-separated string of values to cycle through.
```

--------------------------------

### Escape special characters in HCON

Source: https://four.htmx.org/docs/hcon-guide

Wrap values in quotes to include commas or spaces within the value itself.

```html
<!-- comma ends the trigger spec -->
<input hx-trigger="keyup from:.a, .b">

<!-- quoted, comma is part of the value -->
<input hx-trigger='keyup from:".a, .b"'>

<!-- space ends the bare value -->
<button hx-vals="message:hello world">

<!-- quoted, the whole phrase is the value -->
<button hx-vals='message:"hello world"'>
```

```html
<input hx-trigger="keyup from:'.a, .b'">
<input hx-trigger='keyup from:".a, .b"'>
```

--------------------------------

### Wait for next animation frame

Source: https://four.htmx.org/docs/hx-live-guide

Pauses execution until the next animation frame, useful for ensuring CSS changes are applied before subsequent actions.

```html
__
<button hx-on:click="class.remove('shake'); class.add('shake')">Without nextFrame</button>
<button hx-on:click="class.remove('shake'); await nextFrame(); class.add('shake')">With nextFrame</button>
```

--------------------------------

### Scope data to a specific element

Source: https://four.htmx.org/docs/hx-live-guide

Uses the local property to restrict data resolution to the current element.

```html
__
  <button data-count="0" 
        hx-on:click="q('next output').innerText = ++this.data.count; ">Add 1</button>
```

--------------------------------

### forEvent()

Source: https://four.htmx.org/docs/hx-live-guide

The forEvent() method pauses execution until a specific event occurs, with an optional timeout.

```APIDOC
## forEvent(eventName, timeout)

### Description
Waits for the specified event to occur before continuing execution. An optional timeout can be provided to stop waiting if the event does not trigger.

### Parameters
- **eventName** (string) - Required - The name of the event to wait for.
- **timeout** (number) - Optional - The maximum time in milliseconds to wait for the event.
```

--------------------------------

### Debounce an action

Source: https://four.htmx.org/docs/hx-live-guide

Delays execution of an action by a specified millisecond timer, resetting if retriggered within that interval.

```html
__
<input placeholder="Type here"
       hx-on:input="await debounce(300); q('#settled').textContent = this.value">
<p>settled: <span id="settled"></span></p>
```

--------------------------------

### Insert HTML content

Source: https://four.htmx.org/docs/hx-live-guide

Add HTML at specific positions relative to an element, with automatic processing of htmx attributes.

```html
__
<button hx-on:click="q('#list').insert('end', '<li>Another item</li>')">Add an item</button>
<ul id="list"><li>First item</li></ul>
```

```html
__
<button hx-on:click="q('#slot').insert('into', '<button hx-on:click=&quot;toggle(`.hilite`)&quot;>New button</button>')">
    Insert a live button
</button>
<span id="slot"></span>
```

--------------------------------

### Migrating transformResponse to htmx_after_request

Source: https://four.htmx.org/docs/extension-htmx-4-migration-guide

Modify detail.ctx.text in htmx_after_request instead of using the removed transformResponse hook.

```javascript
__
// htmx 2.x
transformResponse: function(text, xhr, elt) {
    var tpl = htmx.closest(elt, '[mustache-template]');
    if (tpl) {
        var data = JSON.parse(text);
        var template = htmx.find('#' + tpl.getAttribute('mustache-template'));
        return Mustache.render(template.innerHTML, data);
    }
    return text;
}

// htmx 4
htmx_after_request: (elt, detail) => {
    var tpl = elt.closest('[mustache-template]');
    if (tpl) {
        var data = JSON.parse(detail.ctx.text);
        var template = document.querySelector('#' + tpl.getAttribute('mustache-template'));
        detail.ctx.text = Mustache.render(template.innerHTML, data);
    }
}
```

--------------------------------

### Cancel an htmx event

Source: https://four.htmx.org/docs/htmx-events-guide

Use preventDefault() within an event listener to stop htmx from proceeding with its default action.

```javascript
htmx.on('htmx:before:request', function (evt) {
    if (!isLoggedIn()) {
        evt.preventDefault();
    }
});
```

--------------------------------

### Merge inherited attributes with :append

Source: https://four.htmx.org/docs/hcon-guide

Use the :append suffix on htmx attributes to concatenate child values with inherited parent values.

```html
<div hx-headers:inherited='{"X-Tenant": "acme"}'>
  <button hx-get="/api"
          hx-headers:append='{"X-Request-ID": "123"}'>
    <!-- sends both headers -->
  </button>
</div>
```

--------------------------------

### Cancel an htmx event

Source: https://four.htmx.org/docs/extension-authoring-guide

Prevent an action by returning false or setting detail.cancelled to true within an event hook.

```javascript
htmx.registerExtension("validator", {
    htmx_before_request: (elt, detail) => {
        if (!isValid(detail.ctx)) {
            return false; // Cancel request
        }
    },
});
```
Tokens:
Raw