← This Week in HTMX

Issue № 9: Making The Rounds

, Deniz Akşimşek

Blogs Corner

Dan Jacob, Django, HTMX and Alpine

A sufficiently skilled team can of course mitigate all of these problems; but most teams do not have sufficient skill (or time and resources) to build a such a high quality SPA.

The problem however is not with the SPA architecture itself, but rather the current dominant mindset of SPA as the default paradigm for all web projects, rather than one possible approach among many others for careful consideration based on the requirements of the project and the skills of the development team. That’s why libraries such as HTMX and Alpine are a great addition to your toolkit.


The New Stack, Htmx: HTML Approach to Interactivity in a JavaScript World

An interview with our own Carson on htmx that introduces the library, and the SPA/MPA drama surrounding Rich Harris’s talk.



After typehand, a typing speed test, community member Arham Jain wrote a Wordle clone in hyperscript, replicating most of the functionality in a ~60 LOC HTML file that is fully view-sourceable. (Take a look — there’s some clever stuff in there!)

The game made it to The Orange Site, where it made it to the frontpage.

One DEV.to member wrote a counterpart in Elm and used it to compare the two languages. The resulting article, Elm vs HyperScript - A Wordle implementation, is a joyous exhibit of how hilarious the _hyperscript project is.

Play a round yourself!


Ben Pate is building a personal publishing platform on htmx & _hyperscript

Ghost is a new kind of decentralized, private media server that will connect people instead of driving them apart, and will return power and privacy to users and content creators.

Tool Info
Go Single file executable server, compiled for every OS and architecture
Mongodb Database server (possibly swappable)
htmx & hyperscript Interactive HTML content
ckEditor Rich content editing
??? Various local and online file storage systems
Tools used. Taken from the project readme

Ben has posted a number of demo videos on the Discord:


Media server with automatic transcoding, resizing, and smart cropping. Image gallery includes infinite scrolling, and pluggable options (like comments and reactions)

Quick tour of content server features: drag and drop layouts, drag and drop image uploads, role-based access controls, publishing workflow, edit pages in ‘draft’ mode

Check it out!


Request synchronization in htmx

A common problem in AJAX driven applications is synchronization: how to two elements on a page synchronize the requests that they need to make with one another. Currently htmx offers no mechanisms for synchronizing multiple element requests. This document will explore some ideas for doing so. The goal is to provide both declarative synchronization as well as scripting access to htmx-driven requests.

Carson wrote up this proposal detailing the design of the future hx-sync attribute. What do you think?


HDB improvements

The _hyperscript debugger now has the ability to jump back and forth between commands. See the demo below:

HDB improvements

Have you ever used HDB? If not, why not?

Dan Jacob implemented the Real World demo app with htmx

For those that didn’t know (like myself), Real World is a standardized demo app that aims to be a more sophisticated alternative to TodoMVC, showcasing features that real-world apps often need.

Thanks to Dan Jacob <https://danjacob.net/>, now htmx has an implementation of it too! The source code is here:


And a discussion of the project:


Ben’s _hyperscript widgets collection

With coercion encouragement from the community, Ben has built a file uploader, a modal window and tabs in _hyperscript.

In keeping with general htmx principles, we will endeavor to create code that is:

  • Usable
  • Accessible
  • Un-Scalable