HTMX

HTMX in Drupal Core!

HTMX was added as a dependency to Drupal on in 11.2 as part of the Replace AJAX API with HTMX community initiative. A full featured integration is now in Drupal 11.3.

This module will transition to provide extra tools and support for using the HTMX integration found in core.

htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext

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

By removing these arbitrary constraints, htmx completes HTML as a hypertext

    <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>

The data-hx-get and data-hx-select attributes on this button tell htmx:
“When a user clicks on this button, issue an GET request to /htmx/blocks/add/announce_block, and select from the response the content with id drupal-off-canvas-wrapper”
The data-hx-target and data-hx-swap attributes tell htmx:
"Replace the existing content with id drupal-off-canvas-wrapper with the selected content."

Watch a recent session on HTMX in Drupal

For developers

We provide an easy developer experience in a fully documented class for assembling your HTMX attributes. Here's how we built the render array for the button described above:

$row['operations']['data'] = [
  '#type' => 'button',
  '#value' => 'Add',
  '#attributes' => [
    'class' => ['button'],
  ],
 ];

 $htmxAddButton = new HtmxAttribute($row['operations']['data']['#attributes']);
 $htmxAddButton->get(Url::fromRoute('entity.htmx_block.add_form', ['plugin_id' => $plugin_id]))
  ->target('#drupal-off-canvas-wrapper')
  ->select('#drupal-off-canvas-wrapper')
  ->swap('outerHTML ignoreTitle:true');
 $row['operations']['data']['#attributes'] = $htmxAddButton->toArray();

Read about an admin interface we built in Drupal for a more in-depth introduction.

Full documentation is available in our documentation site and also included in the docs directory of the module.

Why do I want this over react or vue js?

Why you want to use htmx? Read this article about the "Rule of Least Power".

Hypermedia

Hypermedia is the basic architecture of the web. Learn more about this foundation and how HTMX aligns the hypermedia capabilities of HTML with HTTP in Hypermedia Systems