Skip to main content
htmx This skill should be used when users need help with htmx development, including implementing AJAX interactions, understanding htmx attributes (hx-get, hx-post, hx-swap, hx-target, hx-trigger), debugging htmx behavior, building hypermedia-driven applications, or following htmx best practices. Use when users ask about htmx patterns, server-side HTML responses, or transitioning from SPA frameworks to htmx. (user)
インストールへ移動 Skills Marketplace コミュニティが作成したAIスキルを発見・探索
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/CestusIO/claude-skills --skill htmxコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
Zipをダウンロード ダウンロード中... このリポジトリの他の Skills Creates professional conventional commit messages based on git changes. Use when user asks to commit, create a commit message, or wants to save changes to git.
Use when working with htmxology — the type-safe HTMX routing framework for Rust/Axum. Covers Route enums, Controller trait, RoutingController composition, template route helpers, as_htmx_attribute(), HtmxRequest detection (classic vs HTMX), Response envelope, out-of-band updates, DisplayDelegate, and ControllerRouter integration. Use when adding routes, creating controllers, building templates with route helpers, or handling HTMX vs classic requests.
Use the Rust compiler (rustc, cargo) to compile and test code in a way that reduces AI tokens consumption.
name htmx description This skill should be used when users need help with htmx development, including implementing AJAX interactions, understanding htmx attributes (hx-get, hx-post, hx-swap, hx-target, hx-trigger), debugging htmx behavior, building hypermedia-driven applications, or following htmx best practices. Use when users ask about htmx patterns, server-side HTML responses, or transitioning from SPA frameworks to htmx. (user)
htmx
This skill provides comprehensive guidance for htmx development, the library that extends HTML to access modern browser features directly without JavaScript.
Core Philosophy
htmx represents a paradigm shift toward hypermedia-first web development. Instead of treating HTML as a presentation layer with JSON APIs, htmx extends HTML to handle AJAX requests, CSS transitions, WebSockets, and Server-Sent Events directly. Servers respond with HTML fragments, not JSON.
When to Use This Skill
Implementing htmx attributes and interactions
Building hypermedia-driven applications
Debugging htmx request/response cycles
Converting SPA patterns to htmx approaches
Understanding htmx events and lifecycle
Configuring htmx extensions
Implementing proper security measures
Core Attributes Reference
HTTP Verb Attributes
Attribute Purpose Default Trigger hx-getIssue GET request click hx-postIssue POST request click (form: submit) hx-putIssue PUT request click hx-patchIssue PATCH request click
hx-deleteIssue DELETE request click
Request Control
hx-trigger : Customize when requests fire
Modifiers: changed, delay:Xms, throttle:Xms, once
Special triggers: load, revealed, every Xs
Extended: from:<selector>, target:<selector>
hx-include : Include additional element values in request
hx-params : Filter which parameters to send (*, none, not <param>, <param>)
hx-headers : Add custom headers (JSON format)
hx-vals : Add values to request (JSON format)
hx-encoding : Set encoding (multipart/form-data for file uploads)
Response Handling
hx-target : Where to place response content
Extended selectors: this, closest <sel>, next <sel>, previous <sel>, find <sel>
hx-swap : How to insert content
innerHTML (default), outerHTML, beforebegin, afterbegin, beforeend, afterend, delete, noneModifiers: swap:Xms, settle:Xms, scroll:top, show:top
hx-select : Select subset of response to swap
hx-select-oob : Select elements for out-of-band swaps
State Management
hx-push-url : Push URL to browser historyhx-replace-url : Replace current URL in historyhx-history : Control history snapshot behaviorhx-history-elt : Specify element to snapshot
UI Indicators
hx-indicator : Element to show during request (add htmx-indicator class)hx-disabled-elt : Elements to disable during request
Security & Control
hx-confirm : Show confirmation dialog before requesthx-validate : Enable HTML5 validation on non-form elementshx-disable : Disable htmx processing on element and descendantshx-sync : Coordinate requests between elements
Implementation Patterns
Basic AJAX Pattern <button hx-get ="/api/data"
hx-target ="#result"
hx-swap ="innerHTML" >
Load Data
</button >
<div id ="result" > </div >
Active Search <input type ="search"
name ="q"
hx-get ="/search"
hx-trigger ="input changed delay:500ms, search"
hx-target ="#search-results"
hx-select ="#search-results"
hx-swap ="innerHTML"
hx-push-url ="true" >
<div id ="search-results" > </div >
Use input changed instead of keyup changed (catches paste, autofill). The search trigger handles the clear button (X).
Infinite Scroll <div hx-get ="/items?page=2"
hx-trigger ="revealed"
hx-swap ="afterend" >
Loading more...
</div >
Polling <div hx-get ="/status"
hx-trigger ="every 5s"
hx-swap ="innerHTML" >
Status: Unknown
</div >
Form Submission <form hx-post ="/submit"
hx-target ="#response"
hx-swap ="outerHTML" >
<input name ="email" type ="email" required >
<button type ="submit" > Submit</button >
</form >
Out-of-Band Updates Server response can update multiple elements:
<div id ="main-content" > Updated content</div >
<div id ="notification" hx-swap-oob ="true" > New notification!</div >
<span id ="counter" hx-swap-oob ="true" > 42</span >
Loading Indicators <button hx-get ="/slow-endpoint"
hx-indicator ="#spinner" >
Load
</button >
<img id ="spinner" class ="htmx-indicator" src ="/spinner.gif" >
.htmx-indicator {
opacity : 0 ;
transition : opacity 200ms ease-in;
}
.htmx-request .htmx-indicator {
opacity : 1 ;
}
Server Response Patterns
Return HTML Fragments Server endpoints return HTML, not JSON:
use axum::{extract::State, response::{Html, IntoResponse}};
use askama::Template;
use sqlx::PgPool;
async fn list_items (State (pool): State<PgPool>) -> impl IntoResponse {
let items = fetch_items (&pool).await .unwrap_or_default ();
let template = ItemsListTemplate { items };
Html (template.render ().unwrap ())
}
Response Headers htmx recognizes special headers:
Header Purpose HX-LocationClient-side redirect (with context) HX-Push-UrlPush URL to history HX-RedirectFull page redirect HX-RefreshRefresh the page HX-ReswapOverride hx-swap value HX-RetargetOverride hx-target value HX-TriggerTrigger client-side events HX-Trigger-After-SettleTrigger after settle HX-Trigger-After-SwapTrigger after swap
Detect htmx Requests Check the HX-Request header to return partials for htmx and full pages for regular navigation:
use axum::{http::HeaderMap, response::{Html, IntoResponse}};
async fn list_items (headers: HeaderMap) -> impl IntoResponse {
let items = get_items ().await ;
let is_htmx = headers.get ("HX-Request" ).is_some ();
if is_htmx {
Html (ItemsPartial { items }.render ().unwrap ())
} else {
Html (ItemsFullPage { items }.render ().unwrap ())
}
}
Events
Key Events Event When Fired htmx:loadElement loaded into DOM htmx:configRequestBefore request sent (modify params/headers) htmx:beforeRequestBefore AJAX request htmx:afterRequestAfter AJAX request completes htmx:beforeSwapBefore content swap htmx:afterSwapAfter content swap htmx:afterSettleAfter DOM settles htmx:confirmBefore confirmation dialog htmx:validation:validateCustom validation hook
Event Handling <button hx-get ="/data"
hx-on:htmx:before-request ="console.log('Starting...')"
hx-on:htmx:after-swap ="console.log('Done!')" >
Load
</button >
document .body .addEventListener ('htmx:configRequest' , function (evt ) {
evt.detail .headers ['X-Custom-Header' ] = 'value' ;
});
Security Best Practices
Escape All User Content : Prevent XSS through server-side template escapingUse hx-disable : Prevent htmx processing on untrusted contentRestrict Request Origins :
htmx.config .selfRequestsOnly = true ;
Disable Script Processing :
htmx.config .allowScriptTags = false ;
Include CSRF Tokens :
<body hx-headers ='{"X-CSRF-Token": "{{ csrf_token }}"}' >
Content Security Policy : Layer browser-level protections
Configuration htmx.config .defaultSwapStyle = 'innerHTML' ;
htmx.config .timeout = 0 ;
htmx.config .historyCacheSize = 10 ;
htmx.config .globalViewTransitions = false ;
htmx.config .scrollBehavior = 'instant' ;
htmx.config .selfRequestsOnly = false ;
htmx.config .allowScriptTags = true ;
htmx.config .allowEval = true ;
<meta name ="htmx-config" content ='{"selfRequestsOnly":true}' >
Extensions
Loading Extensions <script src ="https://unpkg.com/htmx-ext-<name>@<version>/<name>.js" > </script >
<body hx-ext ="extension-name" >
Common Extensions
head-support : Merge head tag information across requestsidiomorph : Morphing swaps (preserves element state)sse : Server-Sent Events supportws : WebSocket supportpreload : Content preloadingresponse-targets : HTTP status-based targeting
Debugging Check request headers in Network tab:
HX-Request: trueHX-Target: <target-id>HX-Trigger: <trigger-id>HX-Current-URL: <page-url>
Progressive Enhancement Structure for graceful degradation:
<form action ="/search" method ="POST" >
<input name ="q"
hx-get ="/search"
hx-trigger ="keyup changed delay:300ms"
hx-target ="#results" >
<button type ="submit" > Search</button >
</form >
<div id ="results" > </div >
Non-JavaScript users get form submission; JavaScript users get AJAX.
Third-Party Integration Initialize libraries on htmx-loaded content:
htmx.onLoad (function (content ) {
content.querySelectorAll ('.datepicker' ).forEach (el =>new Datepicker (el);
});
});
For programmatically added htmx content:
htmx.process (document .getElementById ('new-content' ));
Common Gotchas
ID Stability : Keep element IDs stable for CSS transitionsSwap Timing : Default 0ms swap delay; use swap:100ms for transitionsEvent Bubbling : htmx events bubble; use event.detail for dataForm Data : Only named inputs are included in requestsHistory : History snapshots store innerHTML, not full DOM state
Development Environment
Running the Dev Server Access at http://localhost:3000. htmx requires HTTP — it will not work from file:// URLs.
htmx Requires HTTP (Not file://) htmx will NOT work when opening HTML files directly from the filesystem (file:// URLs). This causes htmx:invalidPath errors because:
Browsers block cross-origin requests from file:// URLs
htmx needs to make HTTP requests to endpoints
Practical Implementation Lessons
Loading Indicators with CSS Spinner Use CSS-only spinners instead of image files for better performance:
<button hx-get ="/api/slow"
hx-indicator ="#spinner" >
Load
<span id ="spinner" class ="spinner htmx-indicator" > </span >
</button >
<style >
.htmx-indicator { display : none; }
.htmx-request .htmx-indicator { display : inline-block; }
.spinner {
width : 20px ;
height : 20px ;
border : 2px solid #f3f3f3 ;
border-top : 2px solid #3d72d7 ;
border-radius : 50% ;
animation : spin 1s linear infinite;
}
@keyframes spin {
0% { transform : rotate (0deg ); }
100% { transform : rotate (360deg ); }
}
</style >
Input Search with Proper Trigger Use input changed instead of keyup changed for better UX (catches paste, autofill):
<input type ="search"
name ="q"
hx-get ="/api/search"
hx-trigger ="input changed delay:300ms, search"
hx-target ="#results" >
The search trigger handles the search input's clear button (X).
Self-Targeting with Polling For elements that replace themselves (polling), use hx-target="this":
<div hx-get ="/api/time"
hx-trigger ="load, every 2s"
hx-target ="this"
hx-swap ="innerHTML" >
Loading...
</div >
Row Updates with closest For list items where each row has its own update button:
<li id ="item-1" >
<span > Item 1</span >
<button hx-get ="/api/update-item/1"
hx-target ="closest li"
hx-swap ="outerHTML" >
Update
</button >
</li >
Server returns complete <li> element with new htmx attributes intact.
Event Attribute Syntax The hx-on:: syntax uses double colons for htmx events:
<button hx-on::before-request ="console.log('starting')" >
<button hx-on:htmx:before-request ="console.log('starting')" >
Combining Multiple Triggers Separate triggers with commas:
<div hx-get ="/api/data"
hx-trigger ="load, every 5s, click from:#refresh-btn" >
Form POST with Loading State Combine hx-indicator and hx-disabled-elt for complete UX:
<form hx-post ="/api/submit"
hx-target ="#result"
hx-indicator ="#spinner"
hx-disabled-elt ="find button" >
<input name ="email" required >
<button type ="submit" >
Submit
<span id ="spinner" class ="spinner htmx-indicator" > </span >
</button >
</form >
Additional Resources For detailed reference, consult:
