htmx Hypermedia-Driven Approach Cheat Sheet

Updated 2026-05-17

htmx is a lightweight JavaScript library (14KB) that extends HTML with custom attributes enabling AJAX requests, CSS transitions, WebSockets, and Server-Sent Events directly from HTML without writing JavaScript. It follows a hypermedia-driven approach where the server returns HTML fragments that htmx intelligently swaps into the DOM, eliminating the need for complex client-side state management while maintaining modern interactivity. By leveraging standard HTTP methods and server-rendered content, htmx enables developers to build dynamic web applications with significantly less code complexity than traditional JavaScript frameworks, making it particularly effective for CRUD applications, admin panels, and content-driven sites.

What This Cheat Sheet Covers

This topic spans 27 focused tables and 121 indexed concepts. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.

Table 1: HTTP Method AttributesTable 2: Swap StrategiesTable 3: Targeting ElementsTable 4: Trigger EventsTable 5: Trigger ModifiersTable 6: Out-of-Band SwapsTable 7: Request ParametersTable 8: Swap ModifiersTable 9: Loading IndicatorsTable 10: History ManagementTable 11: Progressive EnhancementTable 12: ValidationTable 13: User DialogsTable 14: Request ControlTable 15: Content SelectionTable 16: Attribute InheritanceTable 17: Request EncodingTable 18: WebSocket & SSE ExtensionsTable 19: Lifecycle EventsTable 20: Inline Event HandlersTable 21: Server Response HeadersTable 22: JavaScript APITable 23: Configuration OptionsTable 24: ExtensionsTable 25: Debugging & TroubleshootingTable 26: Common UI PatternsTable 27: Advanced Techniques

Table 1: HTTP Method Attributes

HTTP method attributes define how elements issue AJAX requests to the server. These are the foundational htmx attributes that replace forms and links with AJAX-powered equivalents, maintaining the same simplicity while adding dynamic behavior. Each attribute accepts a URL and triggers the corresponding HTTP method when the element's default event fires (click for buttons, submit for forms, etc.).

Attribute	Example	Description
hx-get	`<button hx-get="/data">` `hx-target="#result">` `Load</button>`	• Issues an HTTP GET request to fetch data from the server • Most common attribute for loading content • Does not include form data by default (use `hx-include` if needed)
hx-post	`<form hx-post="/submit">` `<input name="email">` `</form>`	• Issues an HTTP POST request with form data • Automatically includes all form inputs in the request body • Default encoding is `application/x-www-form-urlencoded`
hx-put	`<button hx-put="/user/123"` `hx-include="#form">` `Update</button>`	• Issues an HTTP PUT request for updating resources • Excludes form data by default; add `hx-include="closest form"` to include it • RESTful update operations

Table 1: HTTP Method Attributes

Attribute	Example	Description
hx-get	`<button hx-get="/data">` `hx-target="#result">` `Load</button>`	• Issues an HTTP GET request to fetch data from the server • Most common attribute for loading content • Does not include form data by default (use `hx-include` if needed)
hx-post	`<form hx-post="/submit">` `<input name="email">` `</form>`	• Issues an HTTP POST request with form data • Automatically includes all form inputs in the request body • Default encoding is `application/x-www-form-urlencoded`
hx-put	`<button hx-put="/user/123"` `hx-include="#form">` `Update</button>`	• Issues an HTTP PUT request for updating resources • Excludes form data by default; add `hx-include="closest form"` to include it • RESTful update operations