htmx Knowledge Patch Skill

htmx Knowledge Patch

Claude Opus 4.6 knows htmx through 1.9.x (hx-get/post/put/patch/delete, hx-trigger, hx-target, hx-swap, hx-boost, hx-push-url, hx-select, hx-vals, hx-headers, hx-confirm, hx-indicator, hx-swap-oob, hx-on:, hx-ext, SSE/WebSocket extensions). It is unaware of the features below.

Index

| Topic | Reference | Key features | |---|---|---| | htmx 2.0 changes | references/htmx2-changes.md | DELETE query params, selfRequestsOnly, extensions repo, hx-on removal, htmx.swap() | | Attributes & inheritance | references/attributes-and-inheritance.md | :inherited suffix, :append, hx-action, hx-method, hx-config, hx-ignore, hx-validate, hx-status, attribute renames/removals | | Responses & swapping | references/responses-and-swapping.md | Error responses swap by default, <hx-partial>, innerMorph/outerMorph/textContent/delete swap styles, OOB order change | | Events, extensions & API | references/events-extensions-api.md | htmx:phase:action event naming, htmx.registerExtension(), header changes, JS method changes, config renames, history changes, compat extension |

Quick Reference: htmx 2.0 Breaking Changes

| Change | Details | |---|---| | DELETE body | Query params instead of form-encoded body. Revert: htmx.methodsThatUseUrlParams = ['get'] | | Self-requests only | htmx.config.selfRequestsOnly defaults true | | Scroll behavior | htmx.config.scrollBehavior defaults 'instant' (was 'smooth') | | Extensions | Moved to extensions.htmx.org; hx-sse/hx-ws attributes removed (use extensions) | | hx-on removed | Use hx-on: prefix syntax only | | htmx.swap() | New public API replacing internal selectAndSwap() |

Quick Reference: htmx 4.0 Migration

Attribute Renames (do BEFORE upgrading)

| htmx 2.x | htmx 4.0 | Purpose | |---|---|---| | hx-disable | hx-ignore | Skip htmx processing on element | | hx-disabled-elt | hx-disable | Disable form elements during requests |

Removed Attributes

hx-vars → use hx-vals with js: prefix | hx-params → use htmx:config:request event | hx-prompt → use hx-confirm with js: prefix | hx-ext → include extension script directly | hx-disinherit/hx-inherit → not needed | hx-request → use hx-config | hx-history/hx-history-elt → removed

Event Renames (htmx 4.0)

| htmx 2.x | htmx 4.0 | |---|---| | htmx:beforeRequest | htmx:before:request | | htmx:afterSwap | htmx:after:swap | | htmx:configRequest | htmx:config:request | | htmx:afterProcessNode / htmx:load | htmx:after:init | | htmx:responseError / htmx:sendError / htmx:timeout | htmx:error |

Header Changes

| htmx 2.x | htmx 4.0 | |---|---| | HX-Trigger (request) | HX-Source (format: tagName#id) | | HX-Trigger-Name | Removed | | — | New: HX-Request-Type ("full" or "partial") | | — | New: explicit Accept: text/html | | HX-Trigger-After-Swap (response) | Removed, use HX-Trigger | | HX-Trigger-After-Settle (response) | Removed, use HX-Trigger |

Config Renames

| htmx 2.x | htmx 4.0 | |---|---| | defaultSwapStyle | defaultSwap | | globalViewTransitions | transitions | | historyEnabled | history | | timeout | defaultTimeout (default 60s) | | includeIndicatorStyles | includeIndicatorCSS |

Explicit Inheritance (htmx 4.0)

Attributes no longer inherit down the DOM implicitly. Use :inherited suffix:

<div hx-confirm:inherited="Are you sure?">
  <button hx-delete="/item/1">Delete</button>
</div>

Use :append to add to an inherited value:

<div hx-include:inherited="#global-fields">
    <form hx-include:inherited:append=".extra">...</form>
</div>

Revert: htmx.config.implicitInheritance = true

`<hx-partial>` Multi-Target Updates (htmx 4.0)

New element for explicit multi-target responses (alternative to hx-swap-oob):

<!-- Server response -->
<hx-partial hx-target="#messages" hx-swap="beforeend">
  <div>New message</div>
</hx-partial>
<hx-partial hx-target="#count">
  <span>5</span>
</hx-partial>
<form id="my-form"><!-- main content --></form>

Template-friendly alternative: <template hx type="partial" hx-target="..." hx-swap="...">

`hx-status` Per-Status-Code Behavior (htmx 4.0)

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

Keys: swap:, target:, select:, push:, replace:, transition:. Supports wildcards (5xx, 50x).

New Swap Styles (htmx 4.0)

| Swap style | Description | |---|---| | innerMorph | Morph using idiomorph algorithm (preserves state) | | outerMorph | Outer morph with idiomorph | | textContent | Set text content (no HTML parsing) | | delete | Remove the target element | | before | Alias for beforebegin | | after | Alias for afterend | | prepend | Alias for afterbegin | | append | Alias for beforeend |

Extension API (htmx 4.0)

htmx.defineExtension() → htmx.registerExtension(). Event-hook based, no hx-ext needed:

htmx.registerExtension("my-ext", {
    init: (internalAPI) => { /* called once */ },
    htmx_before_request: (elt, detail) => {
        // return false to cancel
    },
    htmx_after_request: (elt, detail) => {},
    handle_swap: (swapStyle, target, fragment, swapSpec) => {
        // return true if handled
    },
});

Extensions load by including the script. Optionally restrict:

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

Compatibility Extension

Load htmx-2-compat for gradual migration from htmx 2.x to 4.0:

<script src="/path/to/htmx.js"></script>
<script src="/path/to/ext/htmx-2-compat.js"></script>

Restores implicit inheritance, old event names, and previous error-swapping defaults.

Agent Skills: htmx Knowledge Patch

Install this agent skill to your local

Skill Files