Skip to content

Drupal HTMX

I need to... Guide Summary
Understand what HTMX is and why Drupal adopted it HTMX Overview Use HTMX when you're building interactive Drupal features that update page regions without full page reloads and want a simpler approach than traditional AJAX. Use traditional AJAX when you need complex command sequences or contrib module…
Decide between HTMX and traditional AJAX HTMX vs AJAX Use HTMX when replacing content with simple swaps, dependent form fields, load more, or modals. Use traditional AJAX when you need complex command sequences, heavy client-side processing, or contrib module integration.
Understand the request/response lifecycle Request/Response Lifecycle Reference this when debugging HTMX issues or building custom integrations that need to hook into specific lifecycle stages.
Enable HTMX in my module with routes and controllers Basic Setup Use this when creating a custom module and adding HTMX functionality for the first time.
Understand what core/drupal.htmx loads Library Dependencies Reference this when diagnosing asset loading issues or understanding what attaches when you add core/drupal.htmx.
Detect HTMX requests and access request metadata Request Detection Use this when you need to detect if a request is from HTMX and access metadata (triggering element, target, prompt) in controllers or forms.
Build forms with cascading selects or dependent fields Dynamic Forms Use this when building forms with cascading selects, conditional fields, or form elements that update based on user input without full page reload.
Build HTMX-enabled controllers HTMX Controllers Use this when building controller routes that return dynamic content for HTMX requests.
Configure HTMX attributes on elements HTMX Attributes Reference Reference this when configuring how HTMX elements make requests, where content goes, and how it swaps. The Htmx class provides 30+ attribute methods.
Set HTMX response headers (redirect, trigger, retarget) Response Headers Use this when you need to control client-side behavior after a response — redirect, trigger events, change swap strategy, or update browser history.
Run Drupal behaviors on HTMX-loaded content Drupal Behaviors Integration Use this when you need to run JavaScript behaviors on content loaded via HTMX, or clean up when content is removed.
Understand differential CSS/JS loading Asset Loading Reference this when debugging missing assets in HTMX responses or understanding how differential loading works.
Implement load more, infinite scroll, polling, live search Production Patterns Reference this for proven HTMX implementations of common UI patterns: load more, infinite scroll, modals, real-time updates, and live search.
See a complete production HTMX implementation Production Example: ConfigSingleExportForm Reference this when you want a complete, production-ready HTMX implementation demonstrating cascading selects, OOB updates, and history management — all from Drupal core.
Follow security, performance, and accessibility standards Best Practices Reference this when implementing HTMX features and wanting to follow security, performance, accessibility, and development standards.
Debug HTMX issues Troubleshooting Use this when HTMX isn't working as expected — attributes not applying, content not swapping, behaviors not running, or history not updating.
Migrate from AJAX to HTMX AJAX Migration Use this when converting existing AJAX implementations to HTMX, or running both systems in parallel during gradual migration.
Find Drupal core HTMX implementation files Core File Reference Use this to locate Drupal core HTMX implementation files for deeper understanding or debugging.