mirror of
https://github.com/bigskysoftware/htmx.git
synced 2025-09-30 06:21:19 +00:00
6d39919b99
* Add description to architectural-sympathy And fix some typos * Add description to codin-dirty * Add description to complexity-budget * Add description to does-hypermedia-scale * Add description to future and fix date * Add description to hateoas * Add description to how-did-rest-come-to-mean-... * Add description to htmx-sucks * Add description to hypermedia-apis-vs-data-apis * Add description to hypermedia-clients * Add description to hypermedia-driven-applications * Update hypermedia-friendly-scripting.md * Update hypermedia-on-whatever-youd-like.md * Update is-htmx-another-javascript-framework.md * Update locality-of-behaviour.md * Update lore.md * Update mvc.md * Update no-build-step.md * Update prefer-if-statements.md * Update rest-copypasta.md * Update right-click-view-source.md * Update spa-alternative.md * Update splitting-your-apis.md * Update template-fragments.md * Update rest-explained.md * Update two-approaches-to-decoupling.md * Update vendoring.md * Remove double-quote characters from descriptions * Add description block to demo.html * Update view-transitions.md * Update web-security-basics-with-htmx.md * Update webcomponents-work-great.md * Update when-to-use-hypermedia.md * Update why-gumroad-didnt-choose-htmx.md * Update why-tend-not-to-use-content-negotiation.md * Update you-cant.md * Fix description for htmx-sucks * Use `authors` built-in variable Instead of the custom `author` taxonomy * Descriptions and typos in interviews * That double word is actually correct
131 lines
6.3 KiB
Markdown
131 lines
6.3 KiB
Markdown
+++
|
|
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).
|
|
|
|
## Alpine-ajax
|
|
|
|
Speaking of Alpine (which is a common library to use in conjunction with htmx) you should look at
|
|
[Alpine AJAX](https://alpine-ajax.js.org/), an Alpine plugin which integrates htmx-like concepts directly into Alpine.
|
|
|
|
If you are already and Alpine enthusiast, Alpine AJAX allows you to stay in that world.
|
|
|
|
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.
|
|
|