Mike's Notes
The Pipi 9 CMS Engine (CMS) uses HTMX in the rendered
User Interface (UI). HTMX interacts directly with the DOM.
Recently, Ben Nadel has been running a fascinating series of posts on
his blog about his coding experiments with HTMX.
He shares a lot of CFML code on his blog, which is freely reusable. I
learn a lot from Ben.
I will update this page with additional references to Ben's HTMX posts.
There is a repository on GitHub for this experiment.
Resources
References
-
Hypermedia Systems by Carson Gross
Repository
-
Home > Ajabbi Research > Library > Subject > CFML
-
Home > Ajabbi Research > Library > Authors > Ben Nadel
-
Home > Handbook >
Last Updated
10/1/2026
Ben Nadel on HTMX
By: Ben Nadel
bennadel.com: 2025
A Passionate Web Developer With 26 Years Experience.
"I believe in love. I believe in compassion. I believe in human rights.
I believe that we can afford to give more of these gifts to the world
around us because it costs us nothing to be decent and kind and
understanding. And, I want you to know that when you land on this site,
you are accepted for who you are, no matter how you identify, what
truths you live, or whatever kind of goofy shit makes you feel alive!
Rock on with your bad self! - Ben Nadel"
You Can CMD+Click To Submit A Form To A New Browser Tab
By Ben Nadel on May 29, 2025
In the past couple of months, I've been digging into the HTMX JavaScript framework as a way to layer dynamic client-side functionality on top of my ColdFusion applications. I'm enamored with HTMX; but, unlike as with other frameworks such as Angular or Svelte, HTMX doesn't want to be an end-to-end holistic solution. Which means, I—as the developer—have to make a lot of decisions about where logic should live; and, whether or not something is a good idea. This is turning out to be a lot harder than I first imagined...
read more
Creating An hx-event Extension For Triggering Events In HTMX
By Ben Nadel on May 21, 2025
I'm still very deep in the "learning phase" of using HTMX, trying to understand how things are wired together and where the jagged edges might be. As a code kata, I wanted to see if I could create an HTMX extension that would trigger an event instead of an AJAX call. This way, I might be able to click on a button and bubble a synthetic event up the DOM (Document Object Model) tree to another element that is using an hx-on:{event} binding...
read more
Considering The Functional Requirements Of A Modal Window In An HTMX Web App
By Ben Nadel on May 17, 2025
To start with, I'm not a huge fan of modal windows in a web application. InVision used a ton of modal windows; and it felt like we painted ourselves into a corner that we couldn't get out of. My ambiguity on the matter has only been hardened by articles such as "we use too many damn modals", "modalz modalz modalz", and "who's afraid of a hard page load". That said, modals—and modal-adjacent experiences—do have their place. And, as I start to think about this experience in the context of an HTMX-powered web app, I wanted to come up with a set of functional requirements that I could aim for...
read more
Using A No-Content URL To Help Manage DOM Caching In HTMX And
ColdFusion
By Ben Nadel on May 14, 2025
When you hx-boost / AJAX'ify your ColdFusion application with HTMX, HTMX
will cache the state of the DOM (Document Object Model) as you navigate from
page to page. This way, when you hit the browser's back button, HTMX can
restore the previous DOM state, pulling it out of the LocalStorage API. The
caveat being, HTMX only does this in response to an AJAX request. Which
means, if we want to cache the current state of the DOM, we must issue an
AJAX request and we must change the URL...
read more
HTMX Extensions Have Access To An Extended API
By Ben Nadel on May 12, 2025
The HTMX JavaScript framework exposes a public API that is a mixture of
convenience methods, such as htmx.on() for event-binding; and
framework-specific methods, such as htmx.process() for initializing
externally-loaded HTML fragments. When creating an extension in HTMX, the
extension's init() method is passed an api argument. At first, I thought
this was just an abstracted reference to the aforementioned public API. But,
upon further inspection, this reference contains an extended API to help
specifically with HTMX extension authoring...
read more
What Happens When You Mutate The DOM Outside Of HTMX
By Ben Nadel on May 10, 2025
In a previous post, I looked at using Alpine.js inside an HTMX
application. Since Alpine.js uses the MutationObserver API to observe
changes within the Document Object Model (DOM) structure, it doesn't much
matter where mutations are initiated. HTMX, however, isn't quite so
dynamic. As such, I wanted to sanity check what happens when DOM mutations
are initiated outside of the HTMX life-cycle...
read more
Returning JavaScript Tags In HTMX And ColdFusion
By Ben Nadel on May 8, 2025
The primary mechanic of HTMX is swapping out branches of the DOM
(Document Object Model) in response to user interactions. Yesterday,
however, I had to update a bunch of form inputs based on a <select>
change. I wasn't sure how to do this in the cleanest "HTMX Way".
Eventually, I settled upon a happy medium in which I use HTMX to execute
one-off JavaScript task via an Out of Band (OOB) swap of a <script>
tag...
read more
Using Stale-While-Revalidate Cache-Control Headers In HTMX And
ColdFusion
By Ben Nadel on May 6, 2025
In my ColdFusion applications, unless I'm generating dynamic images that
need to be cached, I almost never use the Cache-Control HTTP headers.
Historically, all of my "caching needs" for perceived performance have
been handled in my client-side Angular controllers. But, the HTMX
JavaScript framework is all about leaning on the web platform to drive
application mechanics. As such, I wanted to see how I might use the
stale-while-revalidate response directive to boost performance in an HTMX
and ColdFusion application...
read more
Keyboard Command Extension In HTMX And ColdFusion
By Ben Nadel on May 3, 2025
Earlier this week, I took a look at using extensions in an HTMX and
ColdFusion application. Extensions allow us to tap into the event
life-cycle of nodes withing the document object model (DOM); which, in
turn, allows us to augment the document behavior as HTMX swaps content
into and out of the rendered page. For this follow-up post, I take
inspiration from the Docket app by Mark Story. Mark's HTMX and PHP app
allows keyboards events to trigger DOM interaction. I wanted to try
building something similar for a ColdFusion demo...
read more
Exploring Extensions In HTMX
By Ben Nadel on May 1, 2025
The HTMX JavaScript framework operates by traversing your Document Object
Model (DOM) looking for elements that match a set of criteria, such as the
existence of an hx-get or an hx-post attribute; and then, processes the
matching elements by applying new behaviors. As it orchestrates these
modifications, it emits a series of events on the DOM. Informally, these
events can be a way for any JavaScript library to hook into the HTMX
life-cycle by consuming the DOM as an event-bus; but, HTMX also provides
an official way of doing this by using extensions...
read more
Using :scope To Identify The Host Element In .querySelectorAll()
By Ben Nadel on April 29, 2025
Here's a helpful tip that I learned the other day. When using a Document
Object Model (DOM) method to query for HTML elements using a CSS selector
(ex, .querySelectorAll()), the :scope pseudo-class can be used to identify
the host element on which the method is being called. This allows us to
use the direct descendant selector (>) to target children of the host
element...
read more
Using hx-preserve To Persist Elements Across Swaps In HTMX
By Ben Nadel on April 27, 2025
With HTMX, you can use the hx-boost attribute to AJAX'ify navigation in
your ColdFusion applications. Boosting pages increases the complexity of
the application and can lead to some strange JavaScript behaviors. But,
this trade-off in complexity ushers in the ability to maintain some state
across pages. And one way to maintain state in HTMX is with the
hx-preserve attribute...
read more
Previous / Next <CSS Selector> Both Use A Depth-First Algorithm In
HTMX
By Ben Nadel on April 26, 2025
In the HTMX JavaScript framework, the hx-target attribute can reference
other elements in the DOM (Document Object Model) by using CSS selectors,
convenience keywords (such as this and next), and a combination thereof.
Most of these are relatively straightforward; but, I ran into surprising
results when using previous {CSS selector} and next {CSS selector}. I had
read the documentation and interpreted it as meaning that the targeted
elements were direct descendants of the same parent element. But, this is
incorrect. Internally, HTMX is using a depth-first traversal
algorithm—from the document root—to find the target nodes; and then,
selects the one closest to the trigger element based on a depth-first node
traversal order...
read more
Fetch API Will Propagate Non-POST Methods Upon Redirect
By Ben Nadel on April 26, 2025
In the book Hypermedia Systems by Carson Gross, the authors mention that
the browser will propagate the HTTP Method upon redirect. In all my years
of programming, I had never seen this; so, I sanity checked it and put the
issue to rest in my head. Then, yesterday, I was listening to the Remote
Ruby podcast with Chris Oliver and Andrew Mason, and they too mentioned
this HTTP method propagation specifically for the JavaScript fetch() API.
I feel like I was taking crazy-pills; so, I went to sanity check it again;
and, discovered that the fetch() API will propagate the HTTP method; but,
only for non-GET/POST methods...
read more
Using Alpine.js In HTMX
By Ben Nadel on April 25, 2025
The HTMX JavaScript framework allows us to move a lot of state management
out of the browser and back into the ColdFusion server where the "source
of truth" resides. But, not all interactions—and not all state—need to be
sourced from the server. In such cases, we can use Alpine.js to provide
light-weight state management and event binding in the browser. That said,
both HTMX and Alpine.js want to "manage the DOM" and the event-bindings.
As such, it's not obvious that they'll play well together. To get a sense
of where the points-of-friction might lie, I wanted to put together a
small demo that uses both HTMX and Alpine.js as well as the hx-boost
attribute to "AJAX'ify" the page navigation
read more
Filtering HX-Trigger Server Events In HTMX And ColdFusion
By Ben Nadel on April 22, 2025
When building Single-Page Applications (SPA) with Angular and ColdFusion,
one common pattern that I used was to return an event in every
mutation-based API response. This event was then triggered on a
client-side event-bus; and, various Angular components could respond to it
as needed. In an HTMX multi-page application (MPA), we can use the HTTP
response header, HX-Trigger, to achieve similar outcomes. And, we can use
the filtering capabilities of the client-side hx-trigger attribute to
limit the scope of this client-side response...
read more
Conditionally Preventing HX-Boost In HTMX Using An Extension
By Ben Nadel on April 19, 2025
In an HTMX application, the built-in hx-boost attribute tells HTMX to
intercept all form and anchor interactions and "AJAX'ify" them. That is,
prevent the default browser behavior and re-implement it using AJAX and
the History API in order to side-step a full page-load. This is a neat
feature; but, it doesn't have any hooks (that I can find) to conditionally
prevent hx-boost from acting on a given link. Such a hook would be
necessary when integrating content that comes out of a content management
system (CMS). To try and add such a hook, I've created my first HTMX
extension, prevent-boost, that can conditionally prevent boosting based on
RegEx patterns and / or filter callbacks...
read more
Comparing Undefined Values With Optional Chaining In JavaScript
By Ben Nadel on April 17, 2025
Yesterday, while working on some HTMX experiments, I stumbled upon a
feature of JavaScript that I didn't known: the undefined value, when
compared to Booleans and numbers, always returns false. I've always
thought of undefined as a falsy value (which it is); so, I was very
surprising to see that undefined did not soft equal false. But, this turns
out to be hugely beneficial when it comes to the optional chaining
operator (aka, the safe navigation operation) in JavaScript...
read more
HTTP GET And HTTP POST Are Sufficient (For Me) In ColdFusion
By Ben Nadel on April 14, 2025
As of this writing, HTML supports two different HTTP methods: GET and
POST. And for the last 25-years, I've been building web-based applications
very successfully on top of these two operation. Many people, however, are
not satisfied with these limitations; and, would like to see PUT, PATCH,
and DELETE added to the list of natively supported methods in HTML.
Personally, I'm quite satisfied with GET and POST and haven't really
experience any pain-points. So, I thought it might be interesting to try
and articulate my perspective....
read more
ColdFusion And HTMX Contact App
By Ben Nadel on April 13, 2025
A couple of weeks ago, I read Hypermedia Systems by Carson Gross. The
book is an introduction to HTMX - a JavaScript library that extends the
HTML specification and brings dynamic single-page application (SPA) type
features to a traditional multi-page application (MPA) architecture. Some
of the aspects of HTMX are fairly simple; but, some require a sizable
mindset shift. As such, I thought it would be helpful (for me) to take the
"contacts app" that Carson builds in the book and translate it into a
ColdFusion application context....
read more
Hypermedia Systems By Carson Gross
By Ben Nadel on February 18, 2025
Last week, Peter Amiri - maintainer of the CFWheels framework for
ColdFusion - sent me a hardcover copy of Hypermedia Systems by Carson
Gross, Adam Stepinski, and Deniz Akşimşek. This book argues for the
benefits of "Hypermedia Driven Applications" (HDA); and how leaning into
the foundational nature of the web as a unified interface and hypermedia
platform makes applications easier to build and more accessible while
still achieving a high-bar of interactivity. This book is clear, concise,
and quite compelling. Coming in at around 300 pages, I finished reading it
in two day—I just couldn't put it down.....
read more
