People interested in htmx often ask us about component libraries.React and other JavaScript frameworks have great ecosystems of pre-built components that can be imported into your project; htmx doesn’t really have anything similar.The first and most important thing to understand is that htmx doesn’t preclude you from using anything.Because htmx-based websites are often multi-page apps, each page is a blank canvas on which you can import as much or as little JavaScript as you like.If your app is largely hypermedia, but you want an interactive, React-based calendar for one page, just import it on that one page with a script tag.We sometimes call this pattern “Islands of Interactivity”—it’s referenced in our explainers here, here, and here.Unlike JS frameworks, which are largely incompatible with each other, using islands with htmx won’t lock you into any specific paradigm.But there’s a second way that you can re-use complex frontend functionality with htmx, and it’s Web Components!#Pract

Over 6 years ago, I created an open source URL shortener with Next.js and after years of working on it, I found Next.js to be much more of a burden than a help. Over the years, Next.js has changed, and so did my code so it can be compatible with those changes.My Next.js codebase grew bigger, and its complexity increased by greater size. I had dozens of components and a list of dependencies to manage. I ended up maintaining the code constantly just to keep it alive. Sure, Next.js helped here and there, but at what cost?I asked myself, what am I doing on my website that is so complex that needs all that JavaScript code to decide what to render and how to render on my webpage? Next.js was trying to render the webpage from the server side, so why won’t I send the HTML directly myself?So I decided to try a new route—some might say the good ol’ route—and choose plain HTML and use the help of htmx for that.#VideoWatch me go full in details here:#The processReplacing my components with the equ

At Gumroad, we recently embarked on a new project called Helper. As the CEO, I was initially quiteoptimistic about using htmx for this project, even though some team members were less enthusiastic.My optimism stemmed from previous experiences with React, which often felt like overkill for our needs. I thought htmxcould be a good solution to keep our front-end super light. Source with htmx - Click Image To ViewIn fact, I shared this sentiment with our team in Slack:“https://htmx.org/ may be a way of adding simple interactions to start”And initially, it seemed promising! As one of our engineers at Gumroad eloquently put it:“HTMX is (officially) a meme to make fun of how overly complicated the JS landscape has gotten - much like tailwind isjust a different syntax for inline CSS, HTMX is a different syntax for inline JS.”However, unlike Tailwind, which has found its place in our toolkit, htmx didn’t scale for our purposes and didn’t leadto the best user experience for our customers–at leas

img, video { max-width: 100%; margin: 10px;}#An Ode to Browser Advancements.I often encounter discussions on Reddit and YCombinator where newer developers seek tech stack advice. Inevitably,someone claims it’s impossible to build a high-quality application without using a single-page application (SPA)framework like React or AngularJS. This strikes me as odd because, even before the SPA revolution, many popularmulti-page web applications offered excellent user experiences.Two years ago, I set out to build an observability platform and chose to experiment with amulti-page application (MPA) approach using HTMX. I wondered: Would a server-rendered MPA be inadequate for a data-heavyapplication, considering that most observability platforms are built on ReactJS?What I discovered is that you can create outstanding server-rendered applications if you pay attention to certaindetails.Here are some common MPA myths and what I’ve learned about them.#Myth 1: MPA Page Transitions are slow because Ja

htmx 2.0.0 ReleaseI’m very happy to announce the release of htmx 2.0. This release ends support for Internet Explorer and tightens up somedefaults, but does not change most of the core functionality or the core API of the library.Note that we are not marking 2.0 as latest in NPMbecause we do not want to force-upgrade users who are relying on non-versioned CDN URLs for htmx. Instead, 1.x willremain latest and the 2.0 line will remain next until Jan 1, 2025. The website, however, will reference 2.0.Major ChangesAll extensions have been moved out of the core repository to their own repoand website: https://extensions.htmx.org. They are now all versioned individually and can be developed outside ofthe normal (slow) htmx release cadence.Most 1.x extensions will work with 2.x, however the SSE extension did have a break and must be upgraded.The older extensions remain in the /dist/ext directory so as to not break the URLs of CDNs like unpkg, but pleasemove to the new extension URLs going forw

htmx 2.0.0-beta4 ReleaseI’m happy to announce the fourth beta release of htmx 2.0This is an beta release and should NOT be considered ready for production. We are releasing it to beginfinal testing against real world scenarios.If you are able to do so, please switch to the release and do a quick run through any htmx-powered functionality youhave and let us know if there are issues.Of particular concern to us are the following changes:We removed the deprecated hx-sse and hx-ws attributes in favor of the extensions (which are available in 1.x)DELETE requests now use parameters, rather than form encoded bodies, for their payload (This is in accordance w/ the spec.)A complete upgrade guide can be found here:htmx 1.x -> 2.x Migration GuideNote that htmx 2.x will no longer be IE compatible, but 1.x will continue to be supported for IE users.InstallingThe beta can be installed via a package manager referencing version 2.0.0-beta4, or can be linked via a CDN:<script src="https://unpkg.com/htmx

htmx 2.0.0-beta1 ReleaseI’m happy to announce the first beta release of htmx 2.0This is an beta release and should NOT be considered ready for production. We are releasing it to beginfinal testing against real world scenarios.If you are able to do so, please switch to the release and do a quick run through any htmx-powered functionality youhave and let us know if there are issues.Of particular concern to us are the following changes:We removed the deprecated hx-sse and hx-ws attributes in favor of the extensions (which are available in 1.x)DELETE requests now use parameters, rather than form encoded bodies, for their payload (This is in accordance w/ the spec.)A complete upgrade guide can be found here:htmx 1.x -> 2.x Migration GuideNote that htmx 2.x will no longer be IE compatible, but 1.x will continue to be supported for IE users.InstallingThe beta can be installed via a package manager referencing version 2.0.0-beta1, or can be linked via a CDN:<script src="https://unpkg.com/htmx.

htmx 2.0.0-alpha2 ReleaseI’m happy to announce the second alpha release of htmx 2.0This is an alpha release and should NOT be considered ready for production. We are releasing it to begin testingthe code against real world scenarios to figure out what is broken and what needs improvement.If you are able to do so, please switch to the release and do a quick run through any htmx-powered functionality youhave and let us know if there are issues.Of particular concern to us are the following changes:We removed the deprecated hx-sse and hx-ws attributes in favor of the extensions (which are available in 1.x)DELETE requests now use parameters, rather than form encoded bodies, for their payload (This is in accordance w/ the spec.)A complete upgrade guide can be found here:htmx 1.x -> 2.x Migration GuideNote that htmx 2.x will no longer be IE compatible, but 1.x will continue to be supported for IE users.InstallingThe alpha can be installed via a package manager referencing version 2.0.0-alpha2

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

I have been following htmx for a while now. I thought it was a somewhat funny/cringey memeand that it served as some light comic relief from the real work being done in web development, things likeReact Server Components, Svelte Runesand Signals that are actually pushing the state of the art forward.Unfortunately at some point in the middle of 2023people began to actually take htmx seriously for some reason.This is an extremely alarming turn of events that has me deeply concerned for the future of web development.And I’m not alone in my alarm: you can read an excellent dressing down of htmx here:Basically they put their ignorance on full display, then attribute all sorts of unfounded merits to whatever they’vedone hoping that everyone else pats them on the back for it.So true. So, so true.Unfortunately, the language in that excellent medium post is academic and, without a solid grasp of theoretical HTML,many of the more important points in it will go over a typical web developers head.

htmx 2.0.0-alpha1 ReleaseI’m happy to announce the first alpha release of htmx 2.0This is an alpha release and should NOT be considered ready for production. We are releasing it to begin testingthe code against real world scenarios to figure out what is broken and what needs improvement.If you are able to do so, please switch to the release and do a quick run through any htmx-powered functionality youhave and let us know if there are issues.Of particular concern to us are the following changes:We removed the deprecated hx-sse and hx-ws attributes in favor of the extensions (which are available in 1.x)We integrated the head tag processing from the head-extension into the core, and head processing is now the defaultbehavior for boosted links.DELETE requests now use parameters, rather than form encoded bodies, for their payload (This is in accordance w/ the spec.)A complete upgrade guide can be found here:htmx 1.x -> 2.x Migration GuideNote that htmx 2.x will no longer be IE compatible, b

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: theModel/View/Controller (MVC)pattern.#An MVC IntroI was a little shocked to discover in a recent podcast that many youngerweb developers just don’t have much experience with MVC. This is perhaps due to the Front-end/Back-end split

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 APIYes, 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 essayabove

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 featuresMore 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 adaptedby 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 thefreedom 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 alot of wonderful open source software.Web applications, however, have always been an uncomfortable fit for this definition of free. This is mainlyfor technical reasons: we

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 postby 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 th

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 theGitHub 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 recommendpeople 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 aim

The one big remaining (advantage of MPAs) is (server side programming) language choice. If you’re already part of theanti-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 approachfor your web application, you free yourself up to choose whatever server-side technology best fits your problem andyour 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 codebasethat is written in JavaScript.Given that, the following question inevitably will co

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 situ

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 discussionsabout 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 this

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 bedownloaded 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 vi

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 extension 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 astandardized form rather than one which is specific to an application’s needs. The REST interface is designed to beefficient 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 webdevelopment world is facing today:Hypermedia is often significantly less complex than an SPA approach wouldbe 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 the a

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, whatmatters 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 htmxin a couple of months. We’d like to share our experience with you, with concrete indicators on various aspects, andconvince your CTO!#VideoYou can (should!) watch the entire presentation here:#Executive SummaryThe effort t

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 inHypermedia 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</b

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, buildingHypermedia-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. Ma

I’m very excited to be able to interview Henning Koch, the creators of Unpoly,a hypermedia-oriented javascript library that was created in parallel with intercooler.js.Thank you for agreeing to an interview!Q: To begin with, why don’t you give the readers a bit of your background both professionally & technically:Sure! I’m currently head of development at makandra, a Ruby on Rails consultancy I co-founded back in 2009, after many years of freelancing as a web developer. So my context is working on many different web apps concurrently, and maintaining those for a long time. On a given week we probably touch 10+ projects, for industries ranging from education to automative to cyber security. Unpoly is an extraction from patterns that we saw repeating over and over in client projects.Q: When I created intercooler.js a big part of it was my unwillingness to deal with the popular SPA libraries of the time(Angular & ExtJS, for example). Did Unpoly have a similar history?Our team actually wen

The central feature that distinguishes the REST architectural style from other network-based styles is its emphasis ona uniform interface between components. By applying the software engineering principle of generality to the componentinterface, 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 proper

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 asextensions, 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 functionalityto both of them without compromising the core file size of htmx. You are encouraged to move over to the newextensions, 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 the c

#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 ofSingle-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 const

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 writetrigger 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 i

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 entitledDon’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 thefollowing 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 th

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 designconstraints 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 messagesShould 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 consumers

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 5of 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. Thethesis 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 aUniform 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 for J

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 requestsImprovements & 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 longe

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 newpreload 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 multiplevalues, 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 ajaxrequest 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 the h

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 architec

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 keyelements 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 cornerslike marketing sites and blogs.In these two articles Tom lays out the problem associated with the React/SPA everywhere mindset. If I can summarizethem 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 htmx (as

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 byHyperTalk, 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 aprogrammer 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 princip

htmx 0.0.4 ReleaseI’m pleased to announce the 0.0.4 release of htmx, this time with noproject 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 thathappened 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 originallycalled 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-swap-o

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 toolslike 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 jQ