From htmx-knowledge-patch
Provides post-1.9.x htmx knowledge: explicit inheritance, hx-status, hx-partial, new swap styles, fetch rewrite, extension API v2. Use before htmx 2.0+ or 4.0 work.
npx claudepluginhub nevaberry/nevaberry-plugins --plugin htmx-knowledge-patchThis skill uses the workspace's default tool permissions.
Implements structured self-debugging workflow for AI agent failures: capture errors, diagnose patterns like loops or context overflow, apply contained recoveries, and generate introspection reports.
Designs and optimizes AI agent action spaces, tool definitions, observation formats, error recovery, and context for higher task completion rates.
Compares coding agents like Claude Code and Aider on custom YAML-defined codebase tasks using git worktrees, measuring pass rate, cost, time, and consistency.
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.
| 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 |
| 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() |
| 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 |
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
| 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 |
| 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 |
| htmx 2.x | htmx 4.0 |
|---|---|
defaultSwapStyle | defaultSwap |
globalViewTransitions | transitions |
historyEnabled | history |
timeout | defaultTimeout (default 60s) |
includeIndicatorStyles | includeIndicatorCSS |
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).
| 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 |
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"}'>
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.