Drupal HTMX Introduction

HTMX was added to Drupal 11.3.x.

Adding this url argument tells drupal to deliver an HTMX response, which is the requested page's main content.

?_wrapper_format=drupal_htmx

For example, add this to your page.html.twig template.

<button
hx-get="/node/1?_wrapper_format=drupal_htmx"
hx-target="#content-container"
>Click me</button>
<div id="content-container"></div>

Clicking the button will load content from node 1 and insert it in the container.

HTMX button loads node content

These headers are included in the request when you click on the button:

HX-Request: true
HX-Target: dialog-container
HX-Current-URL: https://drupal11.ddev.site/

Follow along

The current development plan.

HTMX

Drupal 11: Making Interactive Elements With HTMX
Intro to drupal htmx.

Replace AJAX API with HTMX
Community initiative page.

[Plan] Gradually replace Drupal's AJAX system with HTMX
Top level issue for the upgrade.

Update to htmx 4
Latest version compatibility, happening in Drupal 12. Almost ready.

jQuery/Ajax

[meta] Replace JQuery with vanilla Javascript in core
AJAX API uses jQuery. Need to convert to vanilla JS so we can remove it.

[PP-x] Remove jQuery Form dependency from misc/ajax.js
Superseded by HTMX upgrade.

[Plan] Provide guidance for refactoring existing Ajax API commands
List of AJAX API commands, which all need replacement.

JavaScript event handling without a full jQuery dependency
Need a way to call events from other scripts.

Views

[PoC] Use HTMX for (some?) ajax views
Refresh view from pagers, filters, sorts.

Dialog/Modal

Replace jQuery UI dialog that was driven with Ajax commands.

New system will be driven by server side htmx responses.

A simple web component was proposed by @latent.

Implement OpenModalDialogCommand in htmx
OpenModalDialogCommand
One of the big things from the jQuery/AJAX API.

[meta] Decide on where to use modal dialogs
Old issue for enhancing the admin UI with dialogs.

[META] Convert all confirm forms to use modal dialog
UX upgrade using new API.

Drupal Slack #HTMX - Replace jQuery dialog 7/27/26
Slack discussion on new modal/dialog for htmx.
Suggestion to use a dialog web component.

Add a native dialog element to deprecate the jQuery UI dialog
New dialog system, built with HTMX.

My Issues

Need a way to specify where the window scrolls when a swap happens.
For example, when a pager is clicked on a view, scroll to the top of the view/results.
Can we come up with a one size fits all rule, or do we need a way to customize in the view?

The AJAX API had a simple way to make a link load a page or form into a modal. Forms and links are automatically altered to have sensible behavior in the modal. For example, submitting the form over ajax and closing the modal.

Tags