+++
title = "Alternatives to htmx"
description = """\
  In this article, Carson Gross compares several alternative libraries and frameworks to htmx that embrace a \
  hypermedia-oriented approach to web development. Carson explores established solutions like Unpoly and Hotwire \
  Turbo, as well as emerging projects like Triptych and htmz, providing developers with a comprehensive overview of \
  hypermedia-driven application development options beyond htmx."""
date = 2025-01-12
updated = 2024-01-12
authors = ["Carson Gross"]
[taxonomies]
tag = ["posts"]
+++

[htmx](/) is only one of many different libraries & frameworks that take the
[hypermedia oriented](@/essays/hypermedia-driven-applications.md) approach to building web applications. I have
said before that I think the [ideas of htmx](/essays) / [hypermedia](https://hypermedia.systems) are more important than
htmx as an implementation.

Here are some of my favorite other takes on these ideas that I think are worth your consideration:

## Unpoly

[Unpoly](https://unpoly.com/) is a wonderful, mature front end framework that has been used heavily (especially in the
ruby community) for over a decade now. It offers
best-in-class [progressive enhancement](https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement)
and has many useful concepts such as [layers](https://unpoly.com/up.layer) and sophisticated
[form validation](https://unpoly.com/validation).

I interviewed the author, Henning Koch, [here](@/essays/interviews/henning_koch.md)

You can see a demo application using Unpoly [here](https://demo.unpoly.com/).

## Triptych

[Triptych](https://github.com/alexpetros/triptych) is a set of [three proposals](https://alexanderpetros.com/triptych/)
to bring more generalized hypermedia controls directly into the HTML specification:

* Allow more [HTTP Methods](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods) to be used directly from HTML
* Allow buttons to act as stand-alone hypermedia controls
* Allow hypermedia controls to target any element on the page for replacement

It is [in the process](https://github.com/whatwg/html/issues/3577#issuecomment-2294931398) of being introduced to the
[WHATWG](https://whatwg.org/) for inclusion in the HTML specification.

The project includes a [polyfill](https://github.com/alexpetros/triptych/blob/main/triptych.js) that can be used today
to implement applications using the proposal today.

## fixi.js

[fixi.js](https://github.com/bigskysoftware/fixi) is a minimalist implementation of
[generalized hypermedia controls](https://dl.acm.org/doi/fullHtml/10.1145/3648188.3675127) by the htmx team, focusing
on being as small as possible and [omitting](https://github.com/bigskysoftware/fixi#minimalism) many of the features
found in htmx.

It is intended to be as small as possible (~3.5k unminified & uncompressed, ~1.3k compressed) while still being readable
and debuggable, so it can be included in a project directly without requiring any transformations.

## Datastar

[Datastar](https://data-star.dev/) started life as a proposed rewrite of htmx in typescript and with modern
tooling. It eventually became its own project and takes
an [SSE-oriented](https://data-star.dev/guide/getting_started#backend-setup)
approach to hypermedia.

Datastar combines functionality found in both htmx and [Alpine.js](https://alpinejs.dev/) into
a single, tidy package that is smaller than htmx.

You can see many examples of Datastar in action [here](https://data-star.dev/examples).

## Nomini

[Nomini](https://github.com/nonnorm/nomini) is a hypermedia implementation that embraces writing JavaScript in the
original and intended way, as a simple enhancement to mostly-static pages. Its goal is to add a minimal layer of LoB on
top of HTML to allow for powerful server-driven web apps with easily implemented client-side features. Additionally, it
is currently the smallest library existing that gives both reactive variables and partial page swaps (~2.8k minified, ~
1.4k minzipped).

In essence, Nomini is a tiny reimplementation of Datastar or a combination of Fixi and Alpine.js, intended to be a
minimal, pragmatic building block for reactive server-driven UIs.

## µJS

[µJS](https://mujs.org/) is a small (~5k) dependency-free library that implements many hypermedia ideas and includes 
pre-fetching, SSE, idiomorph-based morphing and many other [great features](https://mujs.org/documentation).


## Alpine-ajax

If you are a fan of [Alpine](https://alpinejs.dev/) (which is a common library to use in conjunction with htmx) you 
should also look at [Alpine AJAX](https://alpine-ajax.js.org/), an Alpine plugin which integrates htmx-like concepts 
directly into Alpine.

You can see many examples of Alpine AJAX in action [here](https://alpine-ajax.js.org/examples/).

## Hotwire Turbo

[Turbo](https://turbo.hotwired.dev/) is a component of the [Hotwire](https://hotwired.dev/) set of web development
technologies by [37Signals](https://37signals.com/), of [Ruby on Rails](https://rubyonrails.org/) fame. It is a polished
front end framework that is used heavily in the rails community, but can be used with other backend technologies as
well.

Some people who have had a bad experience with htmx [have enjoyed turbo](https://news.ycombinator.com/item?id=42615663).

## htmz

[htmz](https://leanrada.com/htmz/) is a brilliant, tiny library that takes advantage of the fact that anchors and forms
already have a [`target`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target) attribute that can target
an `iframe`.

This, in combination with the `location hash`, is used to
allow [generalized transclusion](https://dl.acm.org/doi/fullHtml/10.1145/3648188.3675127#sec-7).

This is the *entire* source of the library (I'm not joking):

```html

<iframe hidden name=htmz
        onload="setTimeout(()=>document.querySelector(contentWindow.location.hash||null)?.replaceWith(...contentDocument.body.childNodes))"></iframe>
```

Amazing!

## TwinSpark

[TwinSpark](https://twinspark.js.org/) is a library created by [Alexander Solovyov](https://solovyov.net/) that is
similar to htmx, and includes features such as [morphing](https://twinspark.js.org/api/ts-swap/#morph).

It is being [used in production](https://twinspark.js.org#who-is-using-this) on sites with 100k+ daily users.

## jQuery

Finally, good ol' [jQuery](https://jquery.com/) has the the [
`load()`](https://api.jquery.com/load/#load-url-data-complete)
function that will load a given url into an element. This method was part of the inspiration for
[intercooler.js](https://intercoolerjs.org), the precursor to htmx.

It is very simple to use:

```javascript
  $("#result").load("ajax/test.html");
```

and might be enough for your needs if you are already using jQuery.

## Conclusion

I hope that if htmx isn't right for your application, one of these other libraries might be useful in allowing you to
utilize the hypermedia model. There is a lot of exciting stuff happening in the hypermedia world right now, and these
libraries each contribute to that.

Finally, if you have a moment, please give them (especially the newer ones) a star on Github: as an open source
developer I know that Github stars are one of the best psychological boosts that help keep me going.

