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
- https://www.bennadel.com/
- https://www.bennadel.com/blog/4803-creating-an-hx-event-extension-for-triggering-events-in-htmx.htm
- https://www.bennadel.com/blog/4802-considering-the-functional-requirements-of-a-modal-window-in-an-htmx-web-app.htm
- https://www.bennadel.com/blog/4801-using-a-no-content-url-to-help-manage-dom-caching-in-htmx-and-coldfusion.htm
- https://www.bennadel.com/blog/4800-htmx-extensions-have-access-to-an-extended-api.htm
- https://www.bennadel.com/blog/4799-what-happens-when-you-mutate-the-dom-outside-of-htmx.htm
- https://www.bennadel.com/blog/4796-returning-javascript-tags-in-htmx-and-coldfusion.htm
- https://www.bennadel.com/blog/4794-using-stale-while-revalidate-cache-control-headers-in-htmx-and-coldfusion.htm
- https://www.bennadel.com/blog/4793-keyboard-command-extension-in-htmx-and-coldfusion.htm
- https://www.bennadel.com/blog/4792-exploring-extensions-in-htmx.htm
- https://www.bennadel.com/blog/4791-using-scope-to-identify-the-host-element-in-queryselectorall.htm
- https://www.bennadel.com/blog/4790-using-hx-preserve-to-persist-elements-across-swaps-in-htmx.htm
- https://www.bennadel.com/blog/4789-previous-next-css-selector-both-use-a-depth-first-algorithm-in-htmx.htm
- https://www.bennadel.com/blog/4788-fetch-api-will-propagate-non-post-methods-upon-redirect.htm
- https://www.bennadel.com/blog/4787-using-alpine-js-in-htmx.htm
- https://www.bennadel.com/blog/4785-filtering-hx-trigger-server-events-in-htmx-and-coldfusion.htm
- https://www.bennadel.com/blog/4784-conditionally-preventing-hx-boost-in-htmx-using-an-extension.htm
- https://www.bennadel.com/blog/4783-comparing-undefined-values-with-optional-chaining-in-javascript.htm
- https://www.bennadel.com/blog/4782-http-get-and-http-post-are-sufficient-for-me-in-coldfusion.htm
- https://www.bennadel.com/blog/4769-hypermedia-systems-by-carson-gross.htm
- https://www.bennadel.com/blog/tags/6-javascript-dhtml-blog-entries.htm
- https://github.com/bennadel/ColdFusion-HTMX-Contacts-App
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
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...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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...
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
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...
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...
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...
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....
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....
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.....
