As htmx has gotten more popular, it’s reached communities who have never written server-generated HTML before. Dynamic HTML templating was, and still is, the standard way to use many popular web frameworks—like Rails, Django, and Spring—but it is a novel concept for those coming from Single-Page Application (SPA) frameworks—like React and Svelte—where the prevalence of JSX means you never write HTML directly.But have no fear! Writing web applications with HTML templates is a slightly different security model, but it’s no harder than securing a JSX-based application, and in some ways it’s a lot easier.#Who is guide this for?These are web security basics with htmx, but they’re (mostly) not htmx-specific—these concepts are important to know if you’re putting any dynamic, user-generated content on the web.For this guide, you should already have a basic grasp of the semantics of the web, and be familiar with how to write a backend server (in any language). For instance, you should know not

A common objection I see to using htmx and hypermedia is something along the lines of:The problem with returning HTML (and not JSON) from your server is that you’d probably also like to serve mobileapps and don’t want to duplicate your APII have already outlined in another essay that I think you should split your JSON API & yourhypermedia API up into separate components.In that essay I explicitly recommend “duplicating” (to an extent) your API, in order todisentangle your “churny” web application API endpoints that return HTML from yourstable, regular & expressive JSON Data API.In looking back at conversations I’ve had around this idea with people, I think that I have been assuming familiaritywith a pattern that many people are not as familiar with as I am: the Model/View/Controller (MVC) pattern.#An MVC IntroI was a little shocked to discover in a recent podcast that many younger web developers just don’t have much experience with MVC. This is perhaps due to the Front-end/Back-end spl

One of the most common criticisms of htmx, usually from people hearing about it for the first time, goes like this:You’re complaining about the complexity of modern frontend frameworks, but your solution is just another complex frontend framework.This is an excellent objection! It’s the right question to ask about any third-party (3P) code that you introduce into your project. Even though you aren’t writing the 3P code yourself, by including it in your project you are committed to understanding it—and refreshing that understanding if you want to upgrade it. That’s a big commitment.Let’s break this criticism down into its constituent parts, and determine exactly how much htmx indulges in the harms it claims to solve.#The difference between a library and a frameworkSome htmx defenders jump to our aid with: “htmx isn’t a framework, it’s a library.” This is probably incorrect.“Framework” is a colloquial term—there’s no hard rule for the point at which some third-party code evolves from a “

I have written a lot about Hypermedia APIs vs. Data (JSON) APIs, including the differences between the two,what REST “really” means and why HATEOASisn’t so bad as long as your API is interacting with a Hypermedia Client.Often when I am engaged in discussions with people coming from the “REST is JSON over HTTP” world (that is, the normalworld) I have to navigate a lot of language and conceptual issues:No, I am not advocating you return HTML as a general purpose API, hypermedia makes for a bad general purpose API Yes, I am advocating tightly coupling your web application to your hypermedia APINo, I do not think that we will ever fix how the industry uses the term RESTYes, I am advocating you split your data API and your hypermedia API upThe last point often strikes people who are used to a single, general purpose JSON API as dumb: why have two APIs when youcan have a single API that can satisfy any number of types of clients? I tried to answer that question as best I can in the essayabov

One objection that we sometimes hear to htmx and hypermedia is some variation of the following:Well, it might work well for something small, but it won’t scale.It is always dangerous to provoke us with essay-fodder and so lets dig into this claim a bit and see if we canshed some light on whether Hypermedia-Driven Applications (HDAs) can scale.#ScalingFirst of all, let’s define the term “scaling” and then the contexts that word can be used in development. In a softwarecontext, scaling typically means the ability of the software to handle “larger” things. Those things can be:More nodes in a general systemMore user requests (scaling your individual applications performance)More features (scaling your codebase) More complex features More developers (scaling your team size)Each of these sense of the word “scaling” demand their own analysis with respect to HDAs.#Scaling Nodes In GeneralAlthough this isn’t of much interest to individual developers making decisions about their own applications

htmx 1.9.7 ReleaseI’m happy to announce the 1.9.7 release of htmx.Improvements & Bug fixesFixed a bug where a button associated with a form that is swapped out of the DOM caused errorsThe hx-target-error attribute was added to the response-targets extension, allowing you to capture all 400 & 500responses with a single attributehx-on now properly supports multiple listenersThe hx-confirm prompt is now passed into custom confirmation handlersnext and previous are now valid extended CSS symbols in htmxThe htmx:beforeHistoryUpdate event was addedProperly ignore the dialog formmethod on buttons when resolving the HTTP method to useAdded a htmx.config.scrollIntoViewOnBoost option that may be set to false to disable scrolling the top of thebody into view for boosted elementsThank you to everyone who contributed, and enjoy!

htmx 1.9.6 ReleaseI’m happy to announce the 1.9.6 release of htmx.New FeaturesIE support has been restored (thank you @telroshan!)Introduced the hx-disabled-elt attribute to allow specifying elements to disable during a requestYou can now explicitly decide to ignore title tags found in new content via the ignoreTitle option in hx-swap and the htmx.config.ignoreTitle configuration variable.hx-swap modifiers may be used without explicitly specifying the swap mechanismArrays are now supported in the client-side-templates extensionXSLT support in the client-side-templates extensionImprovements & Bug fixesSupport preventDefault() in extension event handlingAllow the HX-Refresh header to apply even after an HX-Redirect has occurredthe formaction and formmethod attributes on buttons are now properly respectedhx-on can now handle events with dots in their namehtmx.ajax() now always returns a PromiseHandle leading style tag parsing more effectivelyMany smaller fixesThank you to everyone who con

Not for nothing, Hypercard presaged the web’s critical “#ViewSource” affordance, which allowed people to copy,modify, customize and improve on the things that they found delightful or useful. This affordance was later adapted by other human-centered projects like #Scratch, and is a powerful tonic against #enshittification.--Cory Doctorow @[email protected]#Open Culture & The WebWhen people talk about open source software, that conversation is often dominated bythe Free Software Foundation’s notion of free software:“Free software” means software that respects users’ freedom and community. Roughly, it means that the users have the freedom to run, copy, distribute, study, change and improve the software.“This definition of free software has been a useful one and, through advocating for it, the FSF has gifted the world a lot of wonderful open source software.Web applications, however, have always been an uncomfortable fit for this definition of free. This is mainlyfor technical reasons:

The Mother of All htmx Demos you can see the real world results of aport from a React-based front end to an htmx-powered front end. The results are very good, although we qualify theexperience with the following:These are eye-popping numbers, and they reflect the fact that the Contexte application is extremely amenable tohypermedia: it is a content-focused application that shows lots of text and images. We would not expect everyweb application to see these sorts of numbers.However, we would expect many applications to see dramatic improvements by adopting the hypermedia/htmx approach, atleast for part of their system.As luck would have it, we have another application (again, based on Django on the server side) that has been ported froma React front end to an htmx front end: OpenUnited.Here is a graphic from the original LinkedIn post by Adrian McPhee, showing the total Lines of Code in the code base before and after the port:#Before/After Source CodeA very nice aspect of this port is t

htmx 1.9.5 ReleaseI’m happy to announce the 1.9.5 release of htmx.New FeaturesYou can disable the interpretation of script tags with the new htmx.config.allowScriptTags config variableYou can now disable htmx-based requests to non-origin hosts via the htmx.config.selfRequestsOnly config variableImprovements & Bug fixesThe Security section has been expanded to help developers better understand how toproperly secure their htmx-based applications.Web sockets now properly pass the target id in the HEADERS structA very rare loading state bug was fixed (see https://github.com/bigskysoftware/htmx/commit/93bd81b6d003bb7bc445f10192bdb8089fa3495d)hx-on will not evaluate if allowEval is set to falseThank you to everyone who contributed, and enjoy!

A recurring question from some htmx contributors is why htmx isn’t written in TypeScript, or, for that matter, why htmx lacks any build step at all. The full htmx source is a single 3,500-line JavaScript file; if you want to contribute to htmx, you do so by modifying the htmx.js file, the same file that gets sent to browsers in production, give or take minification and compression.I do not speak for the htmx project, but I have made a few nontrivial contributions to it, and have been a vocal advocate for retaining this no-build setup every time the issue has arisen. From my perspective, here’s why htmx does not have a build step.#Write Once, Run ForeverThe best reason to write a library in plain JavaScript is that it lasts forever. This is arguably JavaScript’s single most underrated feature. While I’m sure there are some corner cases, JavaScript from 1999 that ran in Netscape Navigator will run unaltered, alongside modern code, in Google Chrome downloaded yesterday. That is true for v

htmx 1.9.3 ReleaseI’m happy to announce the 1.9.3 release of htmx.New FeaturesThe hx-on attribute has been deprecated (sorry) in favor of hx-on:<event name> attributes. See hx-on for more information.You can now configure if a type of HTTP request uses the body for parameters or not. In particular, the DELETE should usequery parameters, according to the spec. htmx has used the body, instead. To avoid breaking code we are keeping this undefinedbehavior for now, but allowing people to fix it for their use cases by updating the htmx.config.methodsThatUseUrlParams configoption. Thank you to Alex and Vincent for their feedback and work on this issue!The this symbol is now available in event filter expressions, and refers to the element the hx-trigger is onThe HX-Reselect HTTP response header has been added to change the selection from the returned contentImprovements & Bug fixesWe now have functioning CI using GitHub actions!Fix bug where the htmx:afterSettle event was raised multiple times

#REST copy-pastas#Ackshually…I’d just like to interject for a moment. What you’re referring to as REST,is in fact, JSON/RPC, or as I’ve recently taken to calling it, REST-less.JSON is not a hypermedia unto itself, but rather a plain data format madeuseful by out of band information as defined by swagger documentation orsimilar.Many computer users work with a canonical version of REST every day,without realizing it. Through a peculiar turn of events, the version of RESTwhich is widely used today is often called “The Web”, and many of its users arenot aware that it is basically the REST-ful architecture, defined by Roy Fielding.There really is a REST, and these people are using it, but it is just apart of The Web they use. REST is the network architecture: hypermedia encodes the stateof resources for hypermedia clients. JSON is an essential part of Single Page Applications,but useless by itself; it can only function in the context of a complete API specification.JSON is normally used in

We are excited to announce that htmx has been accepted into the first class of the GitHub Open Source Accelerator! This is a tremendous opportunity to work with andlearn from some of the most successful open source developers and projects, and a great chance to get the messageout about hypermedia and htmx.We plan on using this opportunity to begin work on htmx 2.0 and, we hope, possibly learn how to make working on htmxa full time job!Here are some of the other open source projects that we have met through the GitHub accelerator and that we recommend people check out:BoxyHQ - BoxyHQ’s suite of APIs for security and privacy helps engineering teams build and ship compliant cloud applications faster.Cal.com - Cal.com is a scheduling tool that helps you schedule meetings without the back-and-forth emails.Crowd.dev - Centralize community, product, and customer data to understand which companies are engaging with your open source project.Documenso - The Open-Source DocuSign Alternative. We a

The one big remaining (advantage of MPAs) is (server side programming) language choice. If you’re already part of the anti-JavaScript resistance, then nothing I say in the rest of this talk is going to matter that much. But, I’m going to get into this later: that ship might have sailed…Rich Harris - Have SPA’s Ruined The Web?A concept we like to talk about is “The HOWL Stack”. HOWL stands for Hypermedia On Whatever you’d Like.This is a joke-but-not-really software stack, and a reference to morewell known stacks like The LAMP Stackor The MEAN Stack.The TLDR of The HOWL Stack is this: when you use a hypermedia-driven approach for your web application, you free yourself up to choose whatever server-side technology best fits your problem and your own technical tastes.#Feeling The JavaScript PressureIf you decide to use an SPA framework for your web application you will, naturally, have a large front-end codebase that is written in JavaScript. Given that, the following question inevitably w

We have asserted, for a while now, that a major reason that many people have adopted the SPA architecture for web applicationsis due to aesthetic considerations. As we mention in our book Hypermedia Systems, whendiscussing the Web 1.0-style contact management application we begin with, there are serious aesthetic issues withthe application, even if it has feature-parity with an SPA version:From a user experience perspective: there is a noticeable refresh when you move between pages of the application, or when you create, update ordelete a contact. This is because every user interaction (link click or form submission) requires a full pagerefresh, with a whole new HTML document to process after each action.–Hypermedia Systems - Chapter 5This jarring “ka-chunk” between webpages, often with a Flash of Unstyled Contenthas been with us forever and, while modern browsers have improved the situation somewhat (while, unfortunately, also makingit less obvious that a request is in flight) the sit

htmx 1.9.0 ReleaseI’m happy to announce the 1.9.0 release of htmx.New FeaturesSupport for view transitions, based on the experimental View Transitions APIcurrently available in Chrome 111+ and coming to other browsers soon.Support for “naked” hx-trigger attributes, where an hx-trigger is present on an elementthat does not have an hx-get, etc. defined on it. Instead, it will trigger the new htmx:triggered event, which canbe responded to via your preferred scripting solution.Support for generalized inline event handling via the new hx-on attribute, which addressesthe shortcoming of limited onevent properties attributes in HTML.Improvements & Bug fixesThe htmx website has been migrated from 11ty to zola by @danieljsummers, cuttingway down on the number of “development” javascript dependenciesA memory leak fix by @croxtonThank you to everyone who contributed, and enjoy!

#Mechanical Sympathy & Architectural SympathyYou don’t have to be an engineer to be be a racing driver, but you do have to have Mechanical Sympathy.-Jackie Stewart, racing driverThe term “mechanical sympathy” was originally coined by Jackie Steward to capture a characteristicof race car drivers, who needed a deep and intuitive understanding of how a race car worked in orderto get the best possible performance out of the vehicle.This term was applied to software development by Martin Thompson when discussing his LMAXarchitecture, which utilized a low level and intuitive understanding of how his cloud system functionedin order to maximize the performance of it. Thompson maintained a blogon the topic for many years, and it is well worth going back and reading the posts there.#Architectural SympathyIn this brief essay I want to propose another concept and design principle, that of Architectural Sympathy:Architectural Sympathy is the characteristic of one piece of software adopting and conf

htmx 1.8.6 ReleaseI’m happy to announce the 1.8.6 release of htmx.New FeaturesESM support (thank you @dkniffin!)Sass has been vanquished from the htmx.org website so python 2 (!!!) is no longer required for developing htmx (thank you @dz4k!)Improvements & Bug fixesFixed a bug where the changed modifier on keyup did not work properly if an input was tabbed intoMany other smaller bug fixes and doc fixesThank you to everyone who contributed, and enjoy!

Often, when we are being insufferably pedantic in online discussions about REST & HATEOAS, we willsay something along the lines of this:JSON isn’t a hypermedia because it doesn’t have hypermedia controls.Look at this JSON:{ "account": { "account_number": 12345, "balance": { "currency": "usd", "value": 50.00 }, "status": "open" }}See? No hypermedia controls.So this JSON isn’t a hypermedia, and, therefore, the API returning this JSON isn’t RESTful.To this, occasionally, a smart and experienced web developer will reply with something along these lines:OK, mr. REST-y pants, how about this JSON?{ "account": { "account_number": 12345, "balance": { "currency": "usd", "value": 50.00 }, "status": "open", "links": { "deposits": "/accounts/12345/deposits", "withdrawals": "/accounts/12345/withdrawals", "transfers": "/accounts/12345/transfers", "close-requests": "/accounts/12345/close-requests" } }}There, now there are hypermedia controls in this response (normal humans call them links, btw) so thi

htmx 1.8.5 ReleaseI’m happy to announce the 1.8.5 release of htmx.New FeaturesSupport a new optional cache-busting configuration option, getCacheBusterParam, to allow browsers to disambiguatebetween GET requests from htmx and from the raw browserSupport new hx-history='false' attribute, to prevent sensitive data from being stored in the history cache. (Thank you @croxton!)Extensive new event-oriented features are available in the Web Socket extension (Thank you @Renerick!)Improvements & Bug fixesA bug fix for when a form contains multiple empty input values with the same name (Thank you @bluekeyes!)A bug fix around inputs that throw exceptions when calling setSelectionRange() (Thank you @gone!)A bug fix to pass through the proper event for the htmx:configRequest eventA bug fix/improvement for the preload extensionMany other small bug and doc fixesThank you to everyone who contributed, and enjoy!

The final addition to our constraint set for REST comes from the code-on-demand style of Section 3.5.3 (Figure 5-8). REST allows client functionality to be extended by downloading and executing code in the form of applets or scripts. This simplifies clients by reducing the number of features required to be pre-implemented. Allowing features to be downloaded after deployment improves system extensibility. However, it also reduces visibility, and thus is only anoptional constraint within REST.--Roy Fielding - Representational State Transfer (REST)#Scripting & The WebIn Hypermedia-Driven Applications we discuss how to buildweb applications in such a manner that they are hypermedia-driven, in contrast with the popular SPA approach, in whichthey are JavaScript and, at the network-level, RPC-driven.In the HDA article we mention scripting briefly:In an HDA, hypermedia (HTML) is the primary medium for building the application, which means that:All communication with the server is still managed

htmx 1.8.3 ReleaseI’m happy to announce the 1.8.3 release of htmx.New FeaturesA new htmx:confirm event was added that allows for asynchronous confirmation dialogs tobe integrated into htmx requestsThe new head-support extension allows for more elaborate head tag merging than standard htmxsupports. This functionality may be integrated into htmx 2.0, depending on feedback.The new multi-swap provides more elaborate swapping of multiple elements on a screen usinga custom swap strategyImprovements & Bug fixesMany smaller bug and docs fixesEnjoy!

The trade-off, though, is that a uniform interface degrades efficiency, since information is transferred in a standardized form rather than one which is specific to an application’s needs. The REST interface is designed to be efficient for large-grain hypermedia data transfer, optimizing for the common case of the Web, but resulting in aninterface that is not optimal for other forms of architectural interaction.-Roy Fielding, https://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm#sec_5_1_5We are obviously fans of hypermedia and think that it can address, at least in part, many of the problems that the web development world is facing today:Hypermedia is often significantly less complex than an SPA approach would be for many problemsHypermedia allows your application API to be much more aggressively refactored and optimizedHypermedia takes pressure off adopting a particular server technology, since you do not have an extensive JavaScriptfront-end code baseWith htmx and t

htmx 1.8.1 ReleaseI’m happy to announce the 1.8.1 release of htmx.New FeaturesWe now keep a count of outstanding requests for an indicator, so more than one overlapping request can share the sameindicator without issuesWe now track the attribute state of an element and re-initialize it if htmx.process() is called on the element andthe attributes have changedIdiomorph is now available for all your morph-swapping needsThe new hx-validate attribute will force elements to validate before a request, even ifthey are not within a form being submittedImprovements & Bug fixesThe unset directive now works properly for hx-vals and hx-varsThe title of the page is now properly set on a history cache missMany smaller bug and docs fixesEnjoy!

It is all well and good talking about REST & HATEOAS in theory or describing theHypermedia-Driven Application architecture, but, at the end of the day, what matters in software is practical: Does it work? Does it improve things?We can say for sure that htmx works, since we use it in our own software. But it is hard to say that it would bean improvement over other approaches, since we haven’t had an apples-to-apples comparison of how htmx might compare with,say, react.Until now.David Guillot at Contexte has given what we are calling “The Mother of All htmx Demos” atDjangoCon 2022:From React to htmx on a real-world SaaS product: we did it, and it’s awesome!We took the plunge and replaced the 2-year-of-work React UI of our SaaS product with simple Django templates and htmx in a couple of months. We’d like to share our experience with you, with concrete indicators on various aspects, and convince your CTO!#VideoYou can (should!) watch the entire presentation here:#Executive SummaryThe effo

Template fragments are a relatively rare Server Side Rendering (SSR) template library feature that allow you to render afragment or partial bit of the content within a template, rather than the entire template. This feature is very handy in Hypermedia Driven Applications because it allows you to decompose a particularview for partial updates internally without pulling fragments of the template out to separate files for rendering,creating a large number of individual template files.By keeping all the HTML in a single file, it is also easier to reason about how a feature works. This follows theLocality of Behavior design principle.#MotivationLet’s look at how template fragments, in an obscure templating language for java calledchill templates, can help us build an HDA.Here is a simple chill template, /contacts/detail.html that displays a contact:#/contacts/detail.html<html> <body> <div hx-target="this"> #if contact.archived <button hx-patch="/contacts/${contact.id}/unarchive">Unarchive</

pre { margin: 32px !important; }#Tapping The SignI am getting frustrated by the number of people calling any HTTP-based interface a REST API. Today’s example is theSocialSite REST API. That is RPC. It screams RPC. There is so much coupling on display that it should be given anX rating.What needs to be done to make the REST architectural style clear on the notion that hypertext is a constraint? Inother words, if the engine of application state (and hence the API) is not being driven by hypertext, then it cannotbe RESTful and cannot be a REST API. Period. Is there some broken manual somewhere that needs to be fixed?–Roy Fielding, Creator of the term REST REST APIs must be hypertext-drivenREST must be the most broadly misused technical termin computer programming history.I can’t think of anything else that comes close.Today, when someone uses the term REST, they are nearly always discussing a JSON-based API using HTTP.When you see a job post mentioning REST or a company discussing REST Gu

htmx 1.8.0 ReleaseI’m happy to announce the 1.8.0 release of htmx.NOTE: This was a big release with some changes to very touchy code that is hard to test (e.g. history support) soplease test thoroughly and let us know if there are any issues.New FeaturesThe hx-replace-url attribute was introduced, allowing you to replacethe current URL in history (to complement hx-push-url)m is now a valid timing modifier (e.g. hx-trigger="every 2m")next and previous are now valid extended query selector modifiers, e.g. hx-target="next div" will target thenext div from the current elementThe HX-Location response header now implements client-side redirects entirely within htmxThe HX-Reswap response header allows you to change the swap behavior of htmxThe new hx-select-oob attribute selects one or more elements from a server response to swap in via an out of band swapThe new hx-replace-url attribute can be used to replace the current URL in the locationbar (very similar to hx-push-url but no new history

Building web applications using traditional Server-Side Rendering (SSR) or, saying the same thing another way, building Hypermedia-Driven Applications (HDAs) requires a mindset shift whencompared with building web applications with Single Page Application frameworks like React.If you come at this style of development with an SPA-engineering hat on, you are likely to be frustrated and miss outon many advantages of this particular architectural choice.Here are 10 tip to help you make the mental shift smoothly, taking advantage of the strengths of this approach andminimizing the weaknesses of it:#Tip 1: Maximize Your Server-Side StrengthsA big advantage of the hypermedia-driven approach is that it makes the server-side environment far more important whenbuilding your web application. Rather than simply producing JSON, your back end is an integral component in the userexperience of your web application.Because of this, it makes sense to look deeply into the functionality available there. M

The central feature that distinguishes the REST architectural style from other network-based styles is its emphasis on a uniform interface between components. By applying the software engineering principle of generality to the component interface, the overall system architecture is simplified and the visibility of interactions is improved. Implementations are decoupled from the services they provide, which encourages independent evolvability.-Roy Fielding, https://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm#sec_5_1_5In this essay we will look at two different types of decoupling in the context of web applications:Decoupling at the application level via a generic JSON Data APIDecoupling at the network architecture level via a hypermedia APIWe will see that, at the application level, a hypermedia API tightly couples your front-end and back-end. Despite thisfact, surprisingly, the hypermedia API is in fact more resilient in the face of change.#CouplingCoupling is a pro

htmx 1.7.0 ReleaseI’m happy to announce the 1.7.0 release of htmx.New FeaturesThe new hx-sync attribute allows you to synchronize multiple element requests on a singleelement using various strategies (e.g. replace)You can also now abort an element making a request by sending it the htmx:abort eventServer Sent Events and Web Sockets are now available as extensions, in addition to the normal core support. In htmx 2.0, the current hx-sse and hx-ws attributes will bemoved entirely out to these new extensions. By moving these features to extensions we will be able to add functionality to both of them without compromising the core file size of htmx. You are encouraged to move over to the new extensions, but hx-sse and hx-ws will continue to work indefinitely in htmx 1.x.You can now mask out attribute inheritance via the hx-disinherit attribute.The HX-Push header can now have the false value, which will prevent a history snapshot from occurring.Many new extensions, with a big thanks to all th

#Genesisthesis: MPA - multi-page applicationantithesis: SPA - single-page applicationsynthesis: HDA - hypermedia-driven application--@htmx_org#The Hypermedia-Driven Application ArchitectureThe Hypermedia Driven Application (HDA) architecture is a new/old approach to building web applications. It combinesthe simplicity & flexibility of traditional Multi-Page Applications (MPAs) with the better user experience of Single-Page Applications (SPAs).The HDA architecture achieves this goal by extending the existing HTML infrastructure of the web to allow hypermediadevelopers to create more powerful hypermedia-driven interactions.Following the REST notion of architectural constraints,two such constraints characterize the HDA architecture: An HDA uses declarative, HTML-embedded syntax rather than imperative scripting to achieve better front-end interactivityAn HDA interacts with the server in terms of hypermedia (i.e. HTML) rather than a non-hypermedia format (e.g. JSON)By adopting these two con

Rich Harris is a well-known web developer who works on Svelte.js, a novelSingle-Page Application (SPA) framework.In October of 2021 he gave a talk at JamStack entitled “Have Single-Page Apps Ruined the Web?”.We have been asked for our opinion on the talk, so this essay is our response.The first thing to say about the talk is that it is very well done: well produced, thoughtful, funny, fair to both sides of the debateand very reasonable throughout. We don’t agree with a lot that Mr. Harris has to say, as we will detail below, but we respectand appreciate his opinions as well as the technologies he works on.#Problems with SPAsThe talk begins with some reasonable criticisms of SPAs, particularly focusing on usability issues foundwith Instagram, a canonical SPA implementation from our friends at Facebook. He takes a very fair look atthe drawbacks to SPAs, including but not limited to the following list:You will need a bloated JS frameworkPerformance will sufferIt will be buggyThere will be

htmx 1.6.1 ReleaseI’m happy to announce the 1.6.1 release of htmx.New FeaturesA new HX-Retarget header allows you to change the default target of returned contentThe htmx:beforeSwap event now includes another configurable property: detail.isError which canbe used to indicate if a given response should be treated as an error or notThe htmx:afterRequest event has two new detail properties: success and failed, allowing you to write trigger filters in htmx or hyperscript: on htmx:afterRequest[failed] set #myCheckbox's checked to trueImprovements & Bug fixesFixed the from: option in hx-trigger to support closest <CSS selector> and find <CSS selector> formsDon’t boost anchor tags with an explicit target setDon’t cancel all events on boosted elements, only the events that naturally trigger them (click for anchors, submitfor forms)Persist revealed state in the DOM so that on history navigation, revealed elements are not re-requestedProcess all hx-ext attributes, even if no other htmx attribute

HATEOAS#Preface: HATEOAS — An Alternative ExplanationThis page is a reworking on the Wikipedia Entry on HATEOAS, which uses JSON.Here we use HTML to explain the concept, and contrast it with JSON APIs. It is a more opinionated explanation of theconcept than would be appropriate for Wikipedia, but it is more correct in our opinion.Hypermedia as the Engine of Application State (HATEOAS) is a constraint of the REST application architecture that distinguishes it from other network application architectures.With HATEOAS, a client interacts with a network application whose application servers provide information dynamically through hypermedia. A REST client needs little to no prior knowledge about how to interact with an application or server beyond a generic understanding of hypermedia.By contrast, today JSON-based web clients typically interact through a fixed interface shared through documentation via a toolsuch as swagger.The restrictions imposed by HATEOAS decouples client and server. T

htmx 1.6.0 ReleaseI’m happy to announce the 1.6.0 release of htmx.New Features & Major ChangesCompletely reworked <script> tag support that now supports the <script src="...'/> formYou can now use the value unset to clear a property that would normally be inherited (e.g. hx-confirm)The htmx-added class is added to new content before a swap and removed after the settle phase, which allows youmore flexibility in writing CSS transitions for added content (rather than relying on the target, as with htmx-settling)The htmx:beforeSwap event has been updated to allow you to configure swappingbehaviorImprovements & Bug fixesImproved <title> extraction supportYou can listen to events on the window object using the from: modifier in hx-triggerThe root option of the intersect event was fixedBoosted forms respect the enctype declarationThe HX-Boosted header will be sent on requests from boosted elementsPromises are not returned from the main ajax function unless it is an api call (i.e. htmx.ajax)En

TLDR: If you split your API into Data and Application APIs, as advocated here, you should consider changing your Application API from JSON to Hypermedia (HTML) & using a hypermedia-oriented library likehtmx to reap the benefits of the hypermedia model (simplicity, reliability, flexibility, etc.)#The ProblemRecently, Max Chernyak wrote an essay entitled Don’t Build A General Purpose API To Power Your Own Front End. HisTLDR is this:YAGNI, unless you’re working in a big company with federated front-ends or GraphQL.He then discusses some of the different needs of a general purpose API and your application API. He lists the following as needs for a generic API:How to predict and enable all possible workflowsHow to avoid N+1 requests for awkward workflowsHow to test functionality, performance, and security of every possible requestHow to change the API without breaking the existing workflowsHow to prioritize API changes between internal and community requirementsHow to document everything so

A hypermedia API is an API that returns hypermedia, typically HTML overHTTP. This style of API is distinguished from data APIs that do not return a hypermedia. The most familiar form of thislatter style of API today is the ubiquitous JSON API.These two different types of API have distinctly different design needs and, therefore, should use different design constraints and adopt different goals when being created.Hypermedia APIs:Will be trivially REST-ful, since they are simply what Roy Fielding was describing.Should be driven by the needs of the underlying hypermedia applicationMay change dramatically without versioning information, because hypermedia utilizes self describing messages Should be passed directly to humans, to maximize the flexibility of the systemData APIs, on the other hand:Will not benefit dramatically from REST-fulness, beyond perhaps Level 2 of the Richardson Maturity ModelShould strive for both regularity and expressiveness due to the arbitrary data needs of consume

There is no topic that generates more confusion in web development than the idea of Representational State Transfer, known as REST. This term comes from Chapter 5 of Roy Fielding’s PhD thesis at U.C. Irvine.In this essay we will go through this Chapter and summarize the important concepts for non-academic web developers. The thesis is dense and involves a lot of technical jargon that isn’t relevant to people who aren’t academics interestedin formal PhD thesis writing.By the end of this essay you should have a better handle on REST, and the concept of a Uniform Interface in particular.#OverviewThe first thing to understand about REST is that it is a description of the original web. Fielding describes REST as an “architectural style for distributed hypermedia systems”, which sounds fancy but just means the web we all know and love:clicking on hyperlinks, submitting forms, looking at images, reading paragraphs and all that jazz.It was NOT created as a description of a particular approach

htmx 1.5.0 ReleaseI’m happy to announce the 1.5.0 release of htmx.New Features & Major ChangesSupport tracking of button clicked during a form submissionAdded the hx-request attribute, allowing you to configure the following aspects of the requesttimeout - the timeout of the requestcredentials - if the request will send credentialsnoHeaders - strips all headers from the requestAlong with the above attribute, you can configure the default values for each of these via the corresponding htmx.configproperties (e.g. htmx.config.timeout)Improvements & Bug fixesConditional polling via the hx-trigger attributedocument is now a valid pseudo-selector on the hx-trigger from: argument, allowing youto listen for events on the document.Both the scroll and show options on hx-swap now support extended syntax for selecting theelement to scroll or to show, including the pseudo-selectors window:top and window:bottom.Enjoy!

htmx 1.4.0 ReleaseI’m happy to announce the 1.4.0 release of htmx.New Features & Major ChangesAdded the queue option to the hx-trigger attribute, allowing you to specify how eventsshould be queued when they are received with a request in flightThe htmx.config.useTemplateFragments option was added, allowing you to use HTML template tags for parsing contentfrom the server. This allows you to use Out of Band content when returning things like table rows, but it is notIE11 compatible.Introduced a new synthetic event, intersect that allows you to trigger when an item is scrolled into viewas specified by the IntersectionObserver APIThe htmx.config.withCredentials option was added, to send credentials with ajax requests (default is false)hx-swap now supports the none optionImprovements & Bug fixesThe defaultSettleDelay was dropped to 20ms from 100msFixed timing issue that caused exceptions in the reveal logic when scrolling at incredible speeds - https://github.com/bigskysoftware/htmx/issues/

htmx 1.3.0 ReleaseI’m happy to announce the 1.3.0 release of htmx.New Features & Major ChangesSupport a target modifier on hx-trigger to filter based on the element targeted by an event. This allowslazy binding to that target selector.Events are no longer consumed by the first element that might handle them, unless the consume keyword isadded to the hx-trigger specificationAdded the htmx:beforeSend event, fired just before an ajax request beginshtmx.ajax() now returns a promiseImprovements & Bug fixesSSE swaps are properly settledFixed bug that was improperly cancelling all clicks on anchorsEnjoy!

htmx 1.2.0 ReleaseI’m happy to announce the 1.2.0 release of htmx.New Features & Major Changeshx-vars has been deprecated in favor of hx-valshx-vals now supports a javascript: prefix to achieve the behavior that hx-vars providedThe new hx-headers attribute allows you to add headers to a request via an attribute. Like hx-vals it supportsJSON or javascript via the javascript: prefixhx-include will now include all inputs under an element, even if that element is not a form tagThe preload extension now offers a preload-images="true" attribute that will aggressively load images in preloaded contentOn requests driven by a history cache miss, the new HX-History-Restore-Request header is included so that the servercan differentiate between history requests and normal requests Improvements & Bug fixesImproved handling of precedence of input values to favor the enclosing form (see here)Moved event filtering logic after preventDefault so filtering still allows events to be properly handledNo long

htmx 1.1.0 ReleaseI’m happy to announce the 1.1.0 release of htmx.This is a surprisingly big release, but the star of the show isn’t htmx itself, but rather the new preload extension which allows you to preload requests into the cache,cutting down on latency. (This extension is used in the htmx website!)There are also new examples, including keyboard shortcuts anddrag and drop list reordering with Sortable.js.ChangesNewly added preload extension allows you to preload resources for lowerlatency requests!Support the ignore: modifier for extensionsUpdated form variable order inclusion to include the enclosing form last so that, in the presence of multiple values, the most relevant value is the most likely to be selected by the serverSupport for the htmx.ajax() javascript function, to issue an htmx-style ajax request from javascriptRemoved the following htmx request headers for better cache behavior: HX-Event-Target, HX-Active-Element, HX-Active-Element-Name, HX-Active-Element-ValueAdded t

htmx 1.0.0 ReleaseI’m happy to announce the 1.0.0 release of htmx.htmx is now mature enough that I can recommend it as a general replacement for intercooler.jsprojects. I don’t think there is a strong reason to port an existing intercooler project tohtmx. I have several large intercooler apps and will not be moving them over any time soon. I can, however, recommend using htmx over intercooler for new projects.htmx is a different sort of javascript library. It is an HTML & hypertext-oriented reply to the current dominance of javascript-based SPA libraries. It is a response to Tom MacWright’s question:“If not SPAs, What?”.As the homepage says:Why should only <a> and <form> be able to make HTTP requests?Why should only click & submit events trigger them?Why should only GET & POST be available?Why should you only be able to replace the entire screen?HTML-oriented web development was abandoned not because hypertext was a bad idea, but rather because HTML didn’t have sufficient expressive po

htmx 0.4.0 ReleaseI’m pleased to announce the 0.4 release of htmx.ChangesNew FeaturesNow support the HX-Redirect and HX-Refresh response headers for redirecting client side and triggering a page refresh, respectivelyhx-vars now overrides input values<title> tags in responses will be used to update page titlesAll uses of eval() have been removed in favor of Functionhx-vals is available as a save alternative to hx-vars. It uses JSON.parse() rather than evaluation, if you wish to safely pass user-provided values through to htmx.Bug FixesEliminated perf issues around hx-boost in large pages that are not using that attributeFixed bug which prevented evaluation when a script tag was the leading content in a responseEnjoy!

Every software project involves managing a complexity budget.A complexity budget can be defined as:An explicit or implicit allocation of complexity across the entire application“Complexity” here is defined subjectively (rather than formally)and in Stewartian Terms: “I know it when I see it.”Or, more specifically to software development: “I know it when I feel it.”One of the primary jobs of an application architect is to manage a projects complexity budget:Decide if a given feature is “worth it”Decide if a given implementation is “worth it”Add appropriate system boundaries to limit complexity between componentsAnd so onAn infuriating aspect of complexity is that that attempts to address it can, in fact, add more complexity.A good example of this from experience was when a company I worked at added OSGi to the system to manage theincreasing complexity of the project. It seemed like a reasonable approach, it offered a sophisticated module system,it was recommended by a newly hired archite

Recently Tom MacWright has written a few posts on Single Page Applications and their discontents:Second-guessing the modern webIf not SPAs, What?The emerging norm for web development is to build a React single-page application, with server rendering. The two key elements of this architecture are something like: The main UI is built & updated in JavaScript using React or something similar.The backend is an API that that application makes requests against. This idea has really swept the internet. It started with a few major popular websites and has crept into corners like marketing sites and blogs.In these two articles Tom lays out the problem associated with the React/SPA everywhere mindset. If I can summarize them in one sentence: SPA frameworks tend to be complex, and you don’t get a lot of benefit for all thatcomplexity in many cases.#An AlternativeTom outlines a few alternatives to the SPA approach in the second article and, I’m happy to say, mentions htmx. However,he classifies htm

htmx 0.3.0 ReleaseI’m pleased to announce the 0.3 release of htmx. Due to a big testingpush I’m happy to say that htmx now has 98.4% test coverage.That said, this release involves some major surgery on trigger parsing, in particular, so please try it out and letme know if you see anything funny.ChangesNew Featureshx-trigger parsing has been rewritten and now supports trigger filters to filterevents based on arbitrary javascript expressionshtmx now supports two additional response headers HX-Trigger-After-Swap and HX-Trigger-After-Settle allowingan event to be triggered after a given life cycle event (instead of before the swap)The requestConfig is now passed out to events surrounding the AJAX life cycleEvaluate <script> tags as javascript when no language is defined on themA new event-header extension, which will include a serialized JSON representation ofthe triggering event in requestsBug FixesIgnore non-elements when triggering post-swap events (avoid multiple event triggers when co

htmx 0.2.0 ReleaseI’m pleased to announce the 0.2 release of htmxChangesNew FeaturesAJAX file upload is now supportedThe HTML validation API is now respectedBug FixesA selected element no longer breaks response processing in some rare casesHTMX-related classes (e.g. .htmx-request) are stripped from content before saving for historyEnjoy!

htmx 0.1.2 ReleaseI’m pleased to announce the 0.1.2 release of htmx as well as the first non-alpha hyperscriptrelease 0.0.2 hyperscript.ChangesBreaking ChangesThe SSE attribute hx-sse and the Web Sockets attribute hx-ws have changed syntax to now use colon separators: hx-sse='connect:/chat swap:message'Hyperscript no longer requires a _hyperscript.start() call to initialize.New FeaturesThe SSE attribute hx-sse allows for swapping content directly on an event, in addition to triggering an htmx element,with the new swap:<event name> syntax.hx-target now supports a find syntax to find elements below the element by a CSS selectorhtmx plays better with deferred loading and many package managersAll htmx events are dispatched in both camelCase as well as kebab-case, for better compatibility with AlpineJS and other frameworks. (e.g. htmx:afterOnLoad will also be triggered ashtmx:after-on-load)Bug FixesThe synthetic revealed trigger event is much less of a CPU hogMulti-select elements now send

htmx 0.0.7 ReleaseI’m pleased to announce the 0.0.7 release of htmx.ChangesBreaking ChangesAll events fired by htmx have changed name, from <event name>.htmx (the old jQuery style) to htmx:<event name>New FeaturesThe hx-swap attribute now supports two new modifiers:scroll - allows you to scroll the target to the top or bottomview - allows you to scroll the top or bottom of the target into viewThe hx-push-url attribute now can optionally take a URL to push, in addition to true and falseAdded the hx-vars attribute that allows you to dynamically add to the parameters that will be submitted with a requestYou can now sponsor htmx development via GitHub SponsorsA big thanks to our first sponsors!https://github.com/putyourlightsonhttps://github.com/simosentissihttps://github.com/jreviewsEnjoy!

htmx 0.0.8 ReleaseI’m pleased to announce the 0.0.8 release of htmx.ChangesBreaking ChangesThe view modifier on hx-swap has been renamed to show: hx-swap='innerHTML show:top'New FeaturesA bug fix on history when using local anchors: <a href="#example">...A bug fix for the aforementioned show functionalityEnjoy!

htmx 0.0.6 ReleaseI’m pleased to announce the 0.0.6 release of htmx.Changes_hyperscriptWith this release comes the release of a new sibling project:https://hyperscript.orghyperscript is a scripting language designed to be embedded directly in HTML and inspired by HyperTalk, the programming language of HyperCard.Breaking ChangesCustom request/response headers no longer start with the X- prefix, which is no longer recommendedThe X-HTTP-Method-Override is now part of the method-override extension, and AJAX requests use the actualhttp method specified for requests.Extensions that handle swaps must explicitly return an array of elements to process after the swapThe hx-error-url attribute was removed in favor of hyperscriptOther Changesempty verb attributes are now allowed and follow the anchor tag semantics (e.g. <div hx-get></div>)nunjuks inline rendering is now supported in the client-side-templates extensionthe new ajax-header extension includes the X-Requested-With headerbad JSON is now

“The primary feature for easy maintenance is locality: Locality is that characteristic of source code that enables a programmer to understand that source by looking at only a small portion of it.” – Richard Gabriel#The LoB PrincipleLocality of Behaviour is the principle that: The behaviour of a unit of code should be as obvious as possible by looking only at that unit of code#DiscussionThe LoB principle is a simple prescriptive formulation of the quoted statement from Richard Gabriel.In as much as it is possible, and in balance with other concerns, developers should strive to make the behaviour ofa code element obvious on inspection.Consider two different implementations of an AJAX request in HTML, the first in htmx:<button hx-get="/clicked">Click Me</button>and the second in jQuery: $("#d1").on("click", function(){ $.ajax({ /* AJAX options... */ }); });<button id="d1">Click Me</button>In the former, the behaviour of the button element is obvious on inspection, satisfying the LoB princ

htmx 0.0.4 ReleaseI’m pleased to announce the 0.0.4 release of htmx, this time with no project renaming.ChangesThis one had a lot of code clean up along with two major features:ExtensionsFirst off, htmx now has a proper extensions mechanism, allowing us to create extensions that plugin to the htmx life cycle and provide functionality that isn’t in the core library. Some extensions that have shippedwith this release and that you might find useful include:morphdom-swap - allows you to use the morphdom library for swapping in new contentclass-tools - replaces the retired hx-classes attributejson-enc - allows you to encode AJAX request bodies in JSONSee the full list of included extensions here.This extension mechanism will allow us to introduce useful HTML-oriented features while keeping the core htmx codefocused on loading content.Web Socket & Reworked Server Sent Events Supporthtmx now has experimental support for Web Socketswith the hx-ws attribute: <div hx-ws="connect wss:/chatroom">

htmx 0.0.3 ReleaseI’m pleased to announce the 0.0.3 release of kutty, er, htmx, the successorto intercooler.js!Why not kutty 0.0.2?One of the reasons you put a 0.0.1 release out there is to see what happens. And one of the things that happened was that multiple people made comments on how the word “kutty” meant different things in different languages, including“small”, “child” and a very unfortunate meaning in dutch slang. I had originally called the project htmx (html extensions) and went back and forth between the two names for a bit.It seems like, upon contact with reality, htmx is a better long term name for the project. It’s alsoa lot easier to search twitter & reddit for that term.It’s a simple fix for anyone who actually used 0.0.1:attributes go from kt- to hx- (their original prefix)request headers go from X-KT- to X-HX-kutty goes to htmx for event names, etc.ChangesOK, so besides the big re-rename, what changed?A bug fix for the hx-prompt attributeA bug fix for multiple hx-swa

Kutty 0.0.1 ReleaseI’m pleased to announce the 0.0.1 release of kutty, the successorto intercooler.js!Like intercooler, kutty brings features of modern browsers that normally require javascript (AJAX, CSS transitions, etc.) directly into HTML.Why the rename?I chose to rename the project for a few reasons:I wanted the freedom to clean up mistakes and remove ideas that hadn’t worked out as cleanly as I wantedThe JS in intercooler.js implied a javascript-orientation. The more I developed intercooler the more I realizedthat it was really about enhancing (completing?) HTML, not javascript. This project doesn’t really compete with tools like angular, vue or react, it’s something different, so I wanted a different name.kutty is short and memorable, kutty.org was available, and it has consonance with “cuttlefish” which is theofficial cephalopod of kutty development.So what’s new & different about kutty vs. intercooler?First and foremost, kutty has no external dependencies !No more dragging in