Htmx 2.0.0 has been released
htmx.org
htmx.org
The app is now chock full of htmx interactions and has very little client side JS for the size of the app and it’s a joy to work on.
Without htmx I would not be able to turn around features as quickly as I do for the wider team so thank you, thank you, thank you.
I’ve been in web dev for 20 years and this feels like what we should have made all along.
The one area I would like to see some development is the file upload experience, I’ve had to do something a bit weird to get htmx and dropzone playing nice.
That means that any validation that you do client-side you need to repeat server-side. Any business logic that you have client-side you also need to repeat server-side.
Its like old school for validation back in the CodeIgniter days.
htmz looks very cool, though.
this isn't much of a feature upgrade, but we took the opportunity to clean up a few things and drop IE support, which will help us slim down the library over time
hopefully it's an easy upgrade for most htmx users, upgrade guide is here:
https://htmx.org/migration-guide-htmx-1/
happy to answer any questions
The entire experience using Go + Fiber (gofiber.io) + templates + HTMX (htmx.org) is fantastic. This approach has allowed us to create a beautiful modern application that's highly performant, interactive in all the places you'd expect, and simple code, deps, devops, etc.
https://www.youtube.com/watch?v=inRB6ull5WQ
we are talking w/the chrome developers about these ideas, i'm cautiously optimistic
I hope this does not become a chrome-only feature in that case
their latest features have started leaning into improving the hypermedia infrastructure of the web so i'm optimistic
i have told my chrome team contacts about bugs in other browsers (e.g. safari not properly updating completion results when datalist elements are replaced asynchronously) and they have communicated these issues to those teams and gotten them fixed
if anyone reading this from other browser teams is interested in getting in contact w/me they can email me at carson at bigsky dot software
You can make tabs, accordions, carousels, modals, popovers and even Pure HTML Out-Of-Order Streaming (PHOOOS) using only HTML & CSS: https://kodus.pl
we are planning on implementing a minimalist version of alex's ideas from "The Birth & Death of htmx" talk as a POC for people to look at too.
I genuinely think htmx is the only one I have liked even after I built something substantial in it.
To me that is big, to be able to walk away from a significant amount of time with something and say "yeah! I want to use that again!" instead of some variant of "it's the least bad option" is both rare and cherished so thanks for all the hard work.
is returning 404.
But this is weirdly hard to find on the new site as searching just opens a scoped google search.
Probably would be good to setup redirects to the new extensions site.
big congrats on the launch!
could still fold it in at some point in the 2.x line!
My only question: how can I get a set of those sweet sweet floppy disks?
i often recommend it for people that want a more "batteries included" hypermedia-oriented library
---
1: https://github.com/bigskysoftware/htmx/blob/master/src/htmx....
Perhaps, there's already a good way to hijack xhr that I'm unaware of too.
Edit: Relevant link: https://logankeenan.com/posts/client-side-server-with-rust-a...
i may restructure the internals to allow for mocking out responses using events, it comes up, especially w/ extensions
Thanks for making htmx!
Thank you!
This architecture was chosen partly because I am a boomer who remembers when websites were HTML files uploaded via FTP and couldn't understand why we shouldn't just return HTML for pages that didn't need app-style functionality, partly because we wanted something easy to manage with a small number of devs (HTML+vanilla js shines here), and partly because SPAs were new-ish when we first began development and the ecosystem was very immature and a long way from coalescing around a single winner (as it has now with React).
So in this case, HTMX is used with HTML templates and ordinary routing, while VueJS is isolated to single purpose SPA-style views with their own endpoints (for example, WebRTC video). And I suspect that we will even be able to eliminate the Vue-based pages altogether with a combination of HTMX and vanilla js if we want to, with how good vanilla js has gotten.
https://bundlephobia.com/package/htmx.org@1.9.12
and 2.0.0 was 45.3:
https://bundlephobia.com/package/htmx.org@2.0.0-beta4
i think that the better web components support blew is up a little. there is a reasonable amount of fat we can cut around IE support that is still in there, planning on doing so over the next few months & slowly
17ms over emerging 4G (and hopefully cached forever after that) doesn't freak me out too much
It's not only about bandwidth, but JS code has to be parsed and executed, which takes CPU time, which is especially affecting low end mobile devices. Compare HTMX with e.g. Ajaxial, which is only 5KB minified: https://ajaxial.unmodernweb.com
One more suggestion: use `<script src="https://unpkg.com/htmx.org@2.0.0" defer>` in `<head>` (https://htmx.org/docs/#installing).
my understanding from the browser engineers is that javascript files are compiled and kept in a cache for the browser, and i never see compilation or execution times in htmx profiles unless someone is processing a ton of htmx attributes (1000+ row tables w/ loads of hx-* attributes per row) which is an orthogonal problem
end of the day i don't think grinding out another few K on the minified source is gonna make a big diff, although we do plan on doing things like moving to modern closures (i assume gzip nukes most of that advantage, idk)
i think a minimal preact-like htmx might be interesting, not as minimal as htmz, but something close. might be worth looking at if you are interested, the concept isn't hard and w/ different design decisions you could prob keep it really small
This is a good essay on the topic: https://htmx.org/essays/when-to-use-hypermedia/
Definitely one place htmx can be abused is oob-swap: https://htmx.org/attributes/hx-swap-oob/, which allows any given HTMX request to replace any part of the page. It sort of destroys the concept of locality of concern that HTMX pushes for.
It's completely stupid HTML, by default, doesn't have basic controls found in EVERY UI toolkit since circa 1980. The standard examples being ListView and TreeView.
This is one of my greatest frustrations with the web as a platform. These controls are so basic they should just be there, eliminating the need to sift through dozens of third-party implementations all with wildly varying feature sets, performance profiles, framework compatibility, levels of upkeep, etc to find one that works for your project.
Web Platform Dev: Boss, can we add TreeView to HMTL?
Web Platform Boss: Sounds cool, what are the advantages and disadvantages of doing this?
Web Platform Dev: Advantage: cross platform widget that's going to be super useful to many developers, replacing 3rd party ones of varying quality. Disadvantage: would take N months to implement and M years to have full adoptions, and yeah, it would probably increase adoption of the web platform, maybe even on mobile platform, where there is a chance that indirectly we will lose about $1-2bn per year from our walled garden, coupled with other web platform enhancements we should also make, regarding progressive web apps, local storage, etc.
Walled Garden Boss: Hey, SVP, can we please FIRE Web Platform Dev and Web Platform Boss as what they said amounts to a 2% drop in our share price?
Look at Windows, MacOS, iOS, Android, Gtk, Qt.
Which of those doesn't have these widgets?
I'm tired of defending mega corps with thousands of employees with IQs through the roof, working on this for decades. It has to be latent malice. Banality of evil, if you will.
The W3C specced out such a tag nearly 20 years ago, but because the browser devs are terrified of all things XML it was never implemented.
https://twitter.com/htmx_org/status/1799661735781261592
There's even some sweet ascii art on the disk: https://twitter.com/jcs224/status/1799586838161621339
Great to see the continued love of this framework. (don't throw anything at me)
I’m interested in trying EdgeJS as a templating alternative to HB but haven’t got round to it yet.
I’ve added a NestJS error handler that looks to see if the request came from an htmx request and then serve the error response as html, if not then it sends back json since I do have json api end points as well in the back end.
> mini framework for adding some structure to the templates
Would be good to read little more about this mini-framework
- axum: web application framework - https://github.com/tokio-rs/axum
- axum-htmx: axum extractors, responders, guards for htmx - https://github.com/robertwayne/axum-htmx
- rusqlite: SQLite bindings - https://github.com/rusqlite/rusqlite
- maud: HTML templating as a macro - https://maud.lambda.xyz
The way maud lets you compose markup works very nicely with htmx. The HX-Request header lets you know if the request is coming from htmx or if it is a regular request. You either call the top-level function if it's a regular request to get the entire page rendered, or call a subset of functions to get the appropriate partial rendered if it's an htmx request.
It's also nice to easily have tests for the rendered pages. My unit tests cover verification of the rendered HTML, too.
It's basically cheating. The setup is dead-simple to operate.
After reviewing few templaters/etc (handlebars, ejs, lit-html, virtual-dom) and few abstractions (html``, just ``, h()), barely anything seems too easy and too freedom-y. Arcane syntaxes, high character noise (ejs, lit, js), lack of typing (all non-`` based), trivial screw ups (virtual-dom, handlebars), experimental status (lit ssr). Sigh.
I use PUG. I don’t like to close HTML tags. This cuts 30% of the visual bloat out of my templates.
One man's structure is another man's "bloat", I guess.
What it removes is the visual bloat of closing html tags.
So instead of:
<div id='foo' class='bar baz'>
<p>Some content</p>
</div>
<div id='foo2' class='bar2 baz2'>
<p>More content</p>
<p>Another paragraph</p>
</div>
In PUG you do: #foo.bar.baz
p Some content
#foo2.bar2.baz2
p More content
p Another Paragraph
Even without syntax highlighting, it's plain at a glance where markup stops and content starts in PUG.And it's easier to visually parse element IDs and chained classes this way too.
Most people prefer templ but I don't like logic in templates, I just want to parse values. I keep different states in different template files.
Each template file is a portion of a full page which makes it easy to create an endpoint that pulls the partial with the latest values. HTMX can then hit that endpoint to load or refresh values.
Endpoints are usually
domain/page/partial
so if I'm on a configuration page at example.com/config
then the endpoint for the privacy settings partial would be example.com/config/privacy
Going directly there in a browser would get a 404 because I check for the HX-Request header.Endpoint handlers return a processed template with the current state. I use those functions to both compose the full page on the backend, and to build the output for the partial endpoint.
I don't automatically expose all partials. I add endpoints as I need them. This is probably more idiomatically Go than anything to do with htmx.
Templ is great when you need to separate reusable components.
Or a photo gallery with thumbnails that are enlarged when clicked.
At least, that’s one way it could work.
one example which I distinctively remember using before AJAX was a word: https://github.com/twisted/nevow/blob/master/nevow/stan.py
https://extensions.htmx.org/ Has a big where the “no-load” extension is listed twice
We have a few jQuery-era websites (that still work today because why not), and Htmx could be where we trim hundreds of lines.