#! code: Drupal 11: Making Interactive Elements With HTMX

HTMX is a variety of features at its core, but it also has a set of event hooks that plugins can tie into and add features and functionality. This means that if the core HTMX library doesn’t do what you need, you can just extend it and add a little bit of code that fulfils your requirement.If you’ve searched for Drupal and HTMX online you may have seen the HTMX module so I should probably mention it here. The module contains some extra tools and examples of HTMX used in a Drupal setting. This includes a Views plugin to display Views as HTMX.* Technically, HTMX has been in Drupal since 11.2.0, but only as an experimental library. Drupal 11.3.0 features the full HTMX library and a number of helper classes to make life easy.HTMX is a platform agnostic framework that allows to make ajax calls and CSS transitions without writing JavaScript code.You can see this example (and a lot more examples beside this) in a HTMX with PHP example repository that I have created. This includes a HTMX PHP class that wraps the detection and responding of HTMX requests to make the examples easier to understand.Fundamentally, you can think of HTMX in the following way:In this article we will look at how HTMX is integrated into Drupal, and what services exist to help you use it within the Drupal system. HTMX is a JavaScript library that allows you to make ajax calls and create CSS transitions without writing any JavaScript code. It works by adding attributes to HTML elements, which it then uses to set up and perform ajax requests, swap elements, and a few other things.By platform agnostic I mean that it doesn’t care what is sat behind it, you can have a HTMX powered front end and pretty much any technology behind the scenes to respond to the HTTP requests. HTMX sends normal web requests to the backend and expects the backend to respond with plain HTML. Drupal is excellent at producing HTML and so is well positioned to be a decent backend system for HTMX to use.<p>Button clicked!</p>

As an example, let’s look at some HTML that isn’t part of Drupal. This contains a couple of HTMX attributes.HTMX attributes are prefixed with with hx-* or data-hx-*, but either is fine to use. There are a number of different attributes available, but only around 11 of those are commonly used, with another 20-30 that add more functionality.If you want to find out more about this then here are some useful links.Inside Drupal, you can get quite far with HTMX and Drupal by understanding just a few key attributes, so let’s look into them. Note that I have deliberately used some simplifications here, but the key concepts are present. The HTMX.org reference page also has great documentation on this so please refer to that for more information.<button hx-get="index.php" hx-target="#div1">Submit</button> <div id="div1"></div>

There is also a neat little HTMX debugger that logs all HTMX events in the browser console.First, let’s dive into a (very) brief introduction to HTMX.The response to this request should be with plain HTML, which means we could respond with something like the following.It seems as though the module is a playground for features that might eventually make their way into Drupal core in the future. It’s worth having a look at the module to see some examples of more advanced usage and some of the future plans for HTMX in core.Since this article is quite long I have created a table of contents to assist in scrolling to the relevant sections.