Notes on htmx
Reading Hypermedia Systems by Carson Gross, Adam Stepinski, and Deniz Akşimşek.
htmx aims to incrementlly improve HTML as a hypermedia in a manner that is conceptually coherent with the underlying markup language
. It’s a JavaScript library that enables declarative programming with:
- a set of custom HTML attributes;
- a set of custom HTTP request/response headers.
The four opportunities to extend HTML:
- allow any element to issue a request to the server and act as a hypermedia control;
- allow any event — not just a click, as in the case of hyperlinks — to trigger HTTP requests;
- allow access to the missing three HTTP methods:
PUT,PATCH, andDELETE; - allow the responsese to replace elements within the current document, rather than requiring that they replace the entire document.
These ideas are formalized in Alexander Petros and Carson Gross’s Triptych Proposals, three simple proposals that make HTML much more expressive in how it can make and handle network requests
. A polyfill is available.
In the hypermedia model, the API responds with HTML — either a full page, or a snippet. The HX-Request request header lets you differentiate between regular calls and htmx calls.
Gotchas
The hx-boost attribute enhances <a> elements by performing an Ajax request and replaces the content of the document.body element, instead of a full-page reload. From the destination’s <head> it only updates the <title> attribute. Since mobile browsers use the canonical URL when sharing/bookmarking web pages, boosted hyperlinks can cause a mismatch. The head-support extension addresses this.