HTMX is coming to Drupal 11

2 minutes read

The team responsible for developing the core of Drupal will migrate the AJAX features that power Drupal through similar features in HTMX, a Javascript library which allows access to features usually requiring a lot of JavaScript directly in the HTML code.

Once again, a wise and unconventional choice (contrary to the current React trend) that will allow Drupal to shine through its robustness and optimal dependency choices.

This will be primarily reflected in the functionality of administration forms which are loading AJAX content:

Image uploads
Adding paragraph items
Any other multiple field

What type of code can we expect?

Once rendered, the HTML code of the page will look like the following example:

 <button data-hx-get="/htmx/blocks/add/announce_block"
  data-hx-target="#drupal-off-canvas-wrapper"
  data-hx-select="#drupal-off-canvas-wrapper"
   data-hx-swap="outerHTML ignoreTitle:true" class="button">
  Add
</button>

A more exhaustive example is available on Dries' website.

What explains this choice?

With HTML, the code required to achieve the same result is much lighter and more explicit: the behavior is defined directly in the HTML attributes.

Why not use React or Vue.js?

The team chose this library over Vue.js or React for its simplicity: it's the tool that best meets the needs without adding unnecessary features. It therefore remains very lightweight and easy to understand.

htmx is small (~14k min.gz’d), dependency-free, extendable, IE11 compatible & has reduced code base sizes by 67% when compared with react

What will this change for our team?

We'll be able to use this new method for our administration forms, such as our global site configuration forms (SiteSettingsConfig).

However, for our front-end sites, I don't think we'll be using it. Client expectations are often very specific regarding animations and behavior, and the JavaScript/AJAX approach will likely remain the most flexible for now.