9 ms·

hi there, as many of you know, i am the creator of htmx and I'm happy to answer any questions about it htmx has seen a surge in popularity, triggered by a vide

hi there, as many of you know, i am the creator of htmx and I'm happy to answer any questions about it htmx has seen a surge in popularity, triggered by a video by fireship dev (https://www.youtube.com/watch?v=r-GSGH2RxJs https://www.youtube.com/watch?v=r-GSGH2RxJs) and a series of videos by ThePrimeagen, a popular twitch streamer on it hacker news readers might be interested in the essays I have written on htmx & hypermedia in general here: https://htmx.org/essays https://htmx.org/essays and in a book I authored with a few other writers that we recently released on hypermedia, htmx and a mobile hypermedia called Hyperview: https://hypermedia.systems https://hypermedia.systems while I am a fan of htmx, obviously, I think the deeper concept that it touches on is hypermedia, which is a worthwhile idea for people to explore even if they don't plan on using it in day-to-day programming. There are also lots of other great hypermedia-oriented libraries worth checking out such as Hotwire from 37signals, or, my favorite after htmx, https://unpoly.com https://unpoly.com

guggle 3y ago
> my favorite after htmx That's interesting. I discovered Unpoly after HTMX (which I like) and decided to stay with Unpoly for a few reasons. Do you think hypermedia libraries will converge or do you think there is space for different interpretations ?
- mollerhoj 3y ago
  Same path for me here. In particular, I found unpolys codebase to be of higher quality.
  - recursivedoubts 3y ago
    henning is an excellent programmer, I really admire him and his work
    - phplovesong 3y ago
      The htmx author is an excellent programmer, I really admire him and his work
      - recursivedoubts 3y ago
        :) thank you I appreciate you saying that
- recursivedoubts 3y ago
  i definitely think there is room for multiple implementations unpoly is higher level than htmx, with different design sensibilities and concepts like 'layers' (https://unpoly.com/up.layer https://unpoly.com/up.layer) which is something that doesn't make sense from htmx's "just extend HTML" perspective
  - silver-arrow 3y ago
    Exactly! I love the sweet spot that htmx hits; please don't change that!
    - recursivedoubts 3y ago
      :) i will not
pyrossh 3y ago
I've enjoyed using htmx and created a simple library in golang to help out. Here is an example app https://github.com/pyrossh/gromer/tree/master/_example https://github.com/pyrossh/gromer/tree/master/_example
- RileyJames 3y ago
  Legend. Well done for supporting, and for putting your money where your mouth is and laying down some code.
- hdlothia 3y ago
  Gonna try this out!
toddmorey 3y ago
Congrats on the GitHub program! Very cool. I just had a fresh read of the docs and htmx is refreshingly, gloriously simple--such a breath of fresh air. So natural, self-documenting, and well thought out. It _does_ feel like a natural extension of html. To me, the only "missing" piece of htmx is a component model, but for anyone looking for that, htmx would pair amazingly well with Astro[1] which allows you to define and use html components without the runtime overhead of say Vue or React. [1] http://astro.build http://astro.build
- toddmorey 3y ago
  Also: I think every project / saas service should be required to have a footer haiku: javascript fatigue: longing for a hypertext already in hand
- fshr 3y ago
  Not sure what you mean by html components. That's kind of missing the point of HTMX, no? Most backend frameworks like Django or templating engines like Jinja2 have the concept of blocks or fragments so its easy to render out component pieces to send back to the frontend. If you combine that with the OOB options in HTMX and/or the Hyperscript or Alpine libraries, then I'm not sure what you would gain by using Astro.
  - toddmorey 3y ago
    I mean, I just don’t think you should have to have Django for a simple website. Astro is an alternative to those backend frameworks. It’s a backend framework itself in many ways.
logankeenan 3y ago
What plans do you have for 2.0?
- recursivedoubts 3y ago
  No major changes, it should be about 99% API compatible with htmx 1.x. Big things: - Websocket & SSE support will be completely pulled out to extensions (already available in 1.0) - We will drop IE support - We may include a "morph" swap strategy based on idiomorph (https://github.com/bigskysoftware/idiomorph/ https://github.com/bigskysoftware/idiomorph/) - We will change a few defaults around how HTML is parsed, taking advantage of the removal of IE support Hopefully transparent to the vast majority of htmx users.
  - bardak 3y ago
    Will HTMX 2.0 have a smaller bundle size since you are removing things? I don't think HTMX is too big or anything but I have a love tiny libraries. And on that note do you think that a smaller striped down version of HTMX is feasible like petite-vue is for vue
    - recursivedoubts 3y ago
      I don't think the bundle size will shrink too much, especially if we include the morph-style merge, which is somewhat complicated yes, I think you could do a stripped down htmx that doesn't support a lot of the stuff htmx does, particularly life cycle events and more elaborate swapping mechanism for example, most response headers could be just done as the HX-Trigger response header + some client side scripting history support and form-value gathering is likewise a source of complexity and code that could be omitted or done less completely
      - bardak 3y ago
        Sounds like reasonable places to strip out stuff while keeping the fundamental features. I think the history support would be important enough to keep though.
dcastm 3y ago
Awesome work! I love the simplicity of htmx. It’s one of those tools that makes me feel super productive. Will there ever be a “htmx“ for building mobile apps?
- recursivedoubts 3y ago
  there already is! https://hyperview.org/ https://hyperview.org/ Adam Stepinski, the creator of Hypreview, built it after his experience with intercooler.js, the predecessor to htmx. It is a very interesting piece of technology and, through the magic of HATEOAS, allows you to update your mobile app instantly for all your users, without dealing with the mobile store! There is an entire section on Hyperview, written by Adam, in part three of our book: https://hypermedia.systems/book/contents/ https://hypermedia.systems/book/contents/
  - dcastm 3y ago
    Amazing! Gonna check it out. Thank you!
  - replwoacause 3y ago
    Looks cool but it seems it requires React which makes it a lot more difficult to use than regular HTMX. Form the GitHub repo: “More importantly, the client is designed to be incorporated into an existing React Native project”
    - didibus 3y ago
      Well, you need some cross platform native UI toolkit that can dynamically render the hxml, and React native is hard to beat there.
pragma_x 3y ago
This is a great project, and reminds me a lot of where folks saw hypertext going many years ago. I have read a little of the website and picked through many of the online examples. One thing I did notice is the preference to update client state (DOM rewrites) based on server HTTP request responses containing full-blown markup. Does the HTMX framework provide concessions for client-side-only triggers and client generated content? The reason why I ask is that an advantage of the current crop of JS heavy-client frameworks is they offload as much work to the browser as possible. This can result in less resource use on the server end (e.g. data, CPU), which is a big deal for web-scale apps. Is HTMX able to meet these kinds of engineering goals or is the project intended to do something different entirely? I totally get that something like a Facebook client is not at all hypermedia oriented, but folks are going to draw the comparison anyway.
- recursivedoubts 3y ago
  we do have a client-side template extension: https://htmx.org/extensions/client-side-templates/ https://htmx.org/extensions/client-side-templates/ however, I would encourage most folks to use HTML as the network format: it typically isn't much more CPU to generate the equivalent HTML string that corresponds to a JSON string (sometimes even less, as with tables) for pure client-side, htmx is largely hands off. We support an `hx-on` attribute to address the fact that HTML doesn't support general `on*` attributes, but that's it it does, however, emit a large number of events that you can hook into to extend things: https://htmx.org/reference/#events https://htmx.org/reference/#events And it plays well w/ scripting solutions like Alpine.js or, our our own scripting solution, _hyperscript: https://hyperscript.org https://hyperscript.org
  - lcnPylGDnU4H9OF 3y ago
    Another benefit of using HTML is ease of progressive enhancement. If the default behavior of the server is to render a full HTML page, anyone hitting that URL directly will get the full HTML from the server with no additional back-end work. Additionally, if JS is disabled in the browser, links still work as traditional links.
  - 3y ago
foxy4096 3y ago
https://twitter.com/foxy4096/status/1691432812870828032?s=20 https://twitter.com/foxy4096/status/1691432812870828032?s=20 This is a boon to many django developers. I remember few month ago I was making a post liking system, before htmx, I had to use jQuery to fetch the json api server and update the like count, but with the use of HTMX, oh boy it was like I was just writing plain html along with my django logic. This is one of the greatest thing I've found. Also, handling forms with HTMX is also very easy. HTMX really improve both user and developer experience.
- recursivedoubts 3y ago
  i'm very glad to hear you are finding it useful :)
- eddd-ddde 3y ago
  The other day I wrote an htmx extension for aws api. You could describe an element using the common htmx tag such as for confirmation, triggers etc, but the ajax fetched any aws object like ec2 instances, pipelines, whatever. It's awesome!
  - perpil 3y ago
    I'd be interested in learning more about this can you share any links?
    - eddd-ddde 3y ago
      It's still very early and a wip, I haven't published anything yet. If I get the time I will publish and link it for you. The way it works is by leveraging the existing aws client libraries to sign and (de)serialise parameters and responses, so you can do something like: hx-ext="aws" hx-post="aws:ec2:us-east-1" aws-action="DescribeInstances" and it will just work with any params such as form inputs or hx-vals etc the reason i haven't posted it yet is i want to find a good way of mapping parameters since the aws api can have some notoriously complicated parameter formats
- nicois 3y ago
foxy4096 3y ago
It might be a weird question, But why are the websockets and SSE are migrating to extensions?
- recursivedoubts 3y ago
  doing them right requires a fair bit of code and I'd like to keep the core AJAX-focused functionality as small as possible
javajosh 3y ago
>a video by fireship dev (https://www.youtube.com/watch?v=r-GSGH2RxJs https://www.youtube.com/watch?v=r-GSGH2RxJs) That's a great video explaining the core use-cases of htmx in 100 seconds. Would be great if all projects had such a thing! Htmx reminds me of tailwind in that you've created a set of attribute names and values that are picked up at runtime by a singular library. There's no front-end build required, which is a Very Big Deal for most devs who don't want (and shouldn't have to) to mess with npm and webpack. It looks like the "breaking point" for page size is something like a small SPA - when it gets to big, make another SPA. Particularly for react/vue devs I think the thing they'll miss is the idea of a uniform, singular object representing global state that is rendered by a single function (defined hierarchically in your component codebase) into the UI. However, it must be accepted that this idea is very demanding in itself, resulting in lots of opinions and hurt feelings, and in addition comes with the weight of a front-end build (and all the confusing variation there). I don't use it but I'm already a big fan. Congrats!
GenericDev 3y ago
I love you. Thanks for making the web feel like the web again <3
- recursivedoubts 3y ago
  :) i hope htmx is useful to you
sdesol 3y ago
> htmx has seen a surge in popularity For those curious, here's some numbers for the last 6 weeks to put things into context: - 4147 new stars - 86 new contributors - New contributors account for most of the commits and issues created which is a very strong sign of growth. Even in very popular projects, it is usually existing contributors that contribute most of the code. https://devboard.gitsense.com/bigskysoftware/htmx https://devboard.gitsense.com/bigskysoftware/htmx Full Disclosure: This is my tool
- recursivedoubts 3y ago
  very cool tool! we've had a new person come on the project who is focused on auditing PRs and getting the good ones in front of me, which helps a lot w/ getting new contributors in
  - sdesol 3y ago
    > focused on auditing PRs Something like this https://reviews.gitsense.com/insights/github?q=pull-age%3A%3C%3D120&t=crc-insights&tb=all&v=bigskysoftware%2Fhtmx%3A%3Agithub%3Abigskysoftware%2Fhtmx%3A%3A%3A%3A https://reviews.gitsense.com/insights/github?q=pull-age%3A%3... might help as well. Click on the different pills (Authors, Targets, Days open, ...) to get a different view of the contributions.
- deleted 3y ago
  [deleted]
throw1234651234 3y ago
This will just die like Web Components and RxJS after a few people write blog posts and do conference talks on it for hype, right? Does this work with Web Assembly? Of course Web Assembly will die too since it can't do SEO. In all seriousness though, what is the "core" reason to actually adopt this over the current approach?
- recursivedoubts 3y ago
  if you sincerely wish to understand how htmx is different than the current SPA-talking-to-a-JSON-API approach I would start here: https://htmx.org/essays/hypermedia-driven-applications/ https://htmx.org/essays/hypermedia-driven-applications/ and then work through the rest of the essays: https://htmx.org/essays/ https://htmx.org/essays/
  - throw1234651234 3y ago
    Thank you, reading now - do genuinely want to know. I understand how my message came across, but I do intentionally reflect how many attempts there have been to change the paradigm so far.
    - andy800 3y ago
      Not a valid excuse, dude. You have every right to be skeptical or to avoid "bleeding edge" but to assume the whole thing is just a front to raise someone's speaking/blogging/social media profile, to buzz in from nowhere and start off by declaring that it's going to "die" is not the way to act if you "genuinely want to know." Recursivedoubts has legitimately demonstrated he's not a one-trick pony (previously built intercooler, concurrently building hyperscript) and he deals with skeptics like yourself dozens of times every time an HTMX article gets posted on this site (which all seem to go to #1, if that serves as an indicator of the library's popularity). He handles himself with grace and patience and humor, far better than most of us would do. You don't even state what your "current approach" happens to be in order for him, or anyone else, to provide you with a satisfactory answer.
    - recursivedoubts 3y ago
spion 3y ago
How do you organize a backend for a htmx based frontend? Specifically getting templates that serve as reusable components, but also endpoints (there is some proliferation of endpoints which I remember from my days with ASP.NET MVC partials.
- recursivedoubts 3y ago
  depends a lot on what your backend gives you i agree it can spiral out of control if you try to do too much, e.g. a routes file that is just incomprehensible i often end up reusing the same controller method to handle a few related routes, using pattern matching in the route declaration i think also picking your battles and not getting too fiddly with screens that don't matter so much also helps a lot here
- traverseda 3y ago
  So you start by just re-sending the entire page but with content changed. Generally you'd use query parameters, like say you have a page with a table and you need to sort it. Add to your query parameters what order you want them in, re-render the whole page. Then once you've got it figured out you just return the part of the template that you actually need to. Makes sense when you think of it as a progressive enhancement on a plain html page.
grose 3y ago
Just wanted to say thank you for what you do. I've long been a fan of HATEOAS and I'm very happy that there's finally a movement towards it and ecosystem growing. Also, the memes are unparalleled.
habosa 3y ago
Not the point if your post but it's amazing how influential the Fireship team is! A true developer influencer, without being a cult of personality.
- recursivedoubts 3y ago
  yeah, he was the one that really started the madness: https://star-history.com/#bigskysoftware/htmx&bigskysoftware/_hyperscript&Date https://star-history.com/#bigskysoftware/htmx&bigskysoftware... his video posted on july 7th
phplovesong 3y ago
One minor thing. This is not an issue directly with htmx, but more on the backend. This always feels clumsy for me: I land on the index page, and get the full site, then click on about page, and now htmx swaps the content for the about page. However if i refresh the url stays the same, but i now only get the content without the container. I know this can be solved with checking for a htmx header, but i feel like "there must be a better way" like raymond httinger of python fame has said multiple times.
- recursivedoubts 3y ago
  i typically have a middleware component that decides whether to render the "chrome" around a given response, so my controller methods aren't junked up with it worth thinking more about though
- dgb23 3y ago
  This annoyed me a bit but it's not a big deal. You make two skeleton templates: One for full documents, one that has nothing in it except the parts that change (say, the meta > title, the body > main and the body > header > nav parts) each wrapped in a hx-swap-oob. In general, out of band swaps are really, really convenient for non-hierarchical layout relationships.
- aszen 3y ago
  This can be solved by returning the full about page always, but swapping only the content part of in the index page by selecting which element to swap from the requested page. Htmx supports it
jeremyloy_wt 3y ago
I can’t believe you aren’t crediting your hilarious and pervasive ~~psyops~~ meme campaign
- recursivedoubts 3y ago
  first rule of psyops...
paczki 3y ago
As someone relatively new (few months in) to full-stack development, what can HTMX offer me? I've been semi interested since Prime mentioned it a handful of times, but I feel maybe I'm too new to fully understand what I gain from it. As soon as I'm finish with my current project, I'd like to check it out. For reference, I'm currently working within the T3 Stack.
- riskable 3y ago
  HTMX is just a convenient way of handling user-initiated UI updates AJAX calls (for whatever purpose). So instead of writing some JavaScript that looks for a specific element to attach an `onclick` event and subsequently makes an AJAX call then again searches for an element on the page to update with the result you can put some (very simple) HTMX code in the HTML directly and it'll handle that sort of thing automatically; "without having to think." It's just a nice, convenient way of handling such things. The argument in the article is that "this is how HTML should've been from the start" because it lets you do some pretty sophisticated stuff just by adding some simple/intuitive attributes to the HTML.
  - nonethewiser 3y ago
    So my apis need to return html specific to the page its called from with the data embedded? I guess my apis would need different endpoints that return json for other clients. And different endpoints for the exact same data if they need to be displayed differently? It just seems like a bad thing to couple. What about CSS? I guess you have to look at what the server returns to figure out how to select/style it. I recognize thats how templates work but for some reason it seems weirder when applied to the element, rather than page level.
    - NaritaAtrox 3y ago
      In there book, the authors specify that it is valid and normal to have additionnal endpoints for json. For exemple, Mastodon provide html endpoints as a interface for the user's browser, but also json endpoints for other clients (mobile app, cli tools, or others web app providing an alternative ui)
enahs-sf 3y ago
Hello, Maybe stupid question, but what are the downstream implications for folks like Vercel/Netlify/etc. who bet the farm on complex server rendered JS pipelines?
- nchmy 3y ago
  Fuck those hucksters... https://twitter.com/rauchg/status/1619492334961569792 https://twitter.com/rauchg/status/1619492334961569792
  - fud101 3y ago
    can you epxlain this to the <100 iq
    - nchmy 3y ago
      Guillermo Rauch is the ceo of vercel. In this tweet, he's effectively saying that the bulk of what his company was built upon (SPAs) is bullshit (zero interest rate phenomenon is a reference to when financial interest rates are very low/zero, as they've been for many years, all sorts of things will seem great and successful because you can borrow money for free. When rates go up, only actually viable projects will survive - as we're seeing in the startup world now).
- deleted 3y ago
  [deleted]
- recursivedoubts 3y ago
  i don't think there are major implications: the web development world is still very react/javascript/JSON-centric there is no reason that they can't tweak their services to be more hypermedia friendly if and when this approach becomes more popular netlify (which offers free hosting for https://htmx.org https://htmx.org, so is a sponsor of the project) is very HTML/hypermedia friendly as far as I can tell, and I don't have enough experience w/ vercel to say much other than a vague sense that they are extremely react-oriented no reason that can't change as the market changes though: hypermedia pushes the main value locus of applications back on the server side and so server-side companies should like that
doitLP 3y ago
Are you also the writer of https://grugbrain.dev/ https://grugbrain.dev/?
- recursivedoubts 3y ago
  yes :)
  - doitLP 3y ago
    Huzzah! I laughed harder at that than anything in a long time.
    - recursivedoubts 3y ago
      :) i'm glad you found it funny and I hope useful as well, at least in parts
      - doitLP 3y ago
        Yes. Funny because it was so true and full of hard won wisdom!
  - gsuuon 3y ago
    This is hilarious!
  - FrankyHollywood 3y ago
    "danger, however, is agile shaman! many, many shiney rock lost to agile shaman! whenever agile project fail, agile shaman say "you didn't do agile right!" LOL
- winrid 3y ago
  > javascript developer get what deserved let grug be frank
tommica 3y ago
Stupid question, why doesn't htmx parse the response html and extract from that the relevant data out needs to fulfill the configuration? Feels a bit cumbersome to return the exact part of the response on server side, like the next page of the table, if it was requested with htmx, else return the full page. This way htmx would be even easier to implement in any front-end. Or maybe I am just crazy. Edit: or is it this? https://htmx.org/docs/#selecting-content-to-swap https://htmx.org/docs/#selecting-content-to-swap
- spapas82 3y ago
  This is how unpoly works (it receives the whole response and patches the page with the correct part of that response).
  - tommica 3y ago
    Oh that's cool!
- Lukas_Skywalker 3y ago
  Rails does this with Turbo Frames [1]. When clicking a link that is contained in a <turbo-frame> element, the frame is automatically replaced if the response contains a frame with the same ID. 1: https://turbo.hotwired.dev/handbook/frames https://turbo.hotwired.dev/handbook/frames
- mst 3y ago
  It is that, yes.
mildred593 3y ago
Do you think that at some point in the future, browsers could bundle in htmx or something similar, and that we could imagine web pages that have javascript disabled but with great interactivity due to htmx? This could perhaps be used as a security feature.
- struant 3y ago
  No need to wait for browsers. You can just whitelist htmx and block any other javascript.
scoofy 3y ago
I owe you a beer or 6. Let me know if I can pitch you a few bucks.
- recursivedoubts 3y ago
  if you want to support htmx development you can do so via github sponsors: https://github.com/sponsors/bigskysoftware?o=esb https://github.com/sponsors/bigskysoftware?o=esb but please don't feel the need to do so
tagfowufe 3y ago
Hi, I've been skimming over your book. There might be a typo under [1], where you write: "An HTTP response to this htmx-driven request might look something like this", but then the next figure's header is "JSON" Also, I love your username! [1] https://hypermedia.systems/hypermedia-reintroduction/#_hypermedia_driven_applications https://hypermedia.systems/hypermedia-reintroduction/#_hyper...
synergy20 3y ago
can htmx work for restful backend that requires client side rendering and routing? my understanding is that htmx only fits for server side rendering such as Django.
- ensignavenger 3y ago
  HTMX pulls text from your backend, so normally folks serve HTML snippets... but you could have a bit of js that takes JSON and turns it into HTML in the browser, and HTMX will pull the JSON (or any other text) into the browser, so you could still use it with a JSON api, if you wanted to I use DRFs renderrers so my Django backend can render either JSON or HTML, so my API is still "restful", it just serves HTML to clients that request HTML like browsers with HTMX and JSON to other clients that request JSON.
  - synergy20 3y ago
    interesting,using DRF for json and Django for html at the same time for browser and nonbroswer clients. my use case is embedded systems that can typically do client side rendering in browsers, the only server side rendering I can afford is some simple lua or c/c++ mvc alike backend,Django is too 'fat' on resources. there are some of them but none that is great and actively maintained as far as I know.
FieryTransition 3y ago
Does unpoly try to solve the same problem and how does their approach differ compared to htmx? Curious to hear thoughts, I haven't done web in a while, so understanding your thoughts might help understanding the whole thing better.
mstade 3y ago
Thank you for all your hard work put into htmx and indeed promoting hypermedia driven applications! Since htmx works by way of custom attributes, can you write a bit about a11y recommendations for developers using htmx? It would seem to me that a lot of things that we get from using standard attributes are lost, and we’d need to do more nuts-and-bolts type work with regards to dom structure and aria attributes. Or does the htmx engine deal with this to generate relevant aria attributes etc.? I couldn’t find any references to this in the documentation.
ouraf 3y ago
Loved the memes on the essays page. It has motivated me into checking the project more thoroughly

guggle 3y ago

> my favorite after htmx That's interesting. I discovered Unpoly after HTMX (which I like) and decided to stay with Unpoly for a few reasons. Do you think hypermedia libraries will converge or do you think there is space for different interpretations ?

mollerhoj 3y ago
Same path for me here. In particular, I found unpolys codebase to be of higher quality.
- recursivedoubts 3y ago
  henning is an excellent programmer, I really admire him and his work
  - phplovesong 3y ago
    The htmx author is an excellent programmer, I really admire him and his work
    - recursivedoubts 3y ago
      :) thank you I appreciate you saying that
recursivedoubts 3y ago
i definitely think there is room for multiple implementations unpoly is higher level than htmx, with different design sensibilities and concepts like 'layers' (https://unpoly.com/up.layer https://unpoly.com/up.layer) which is something that doesn't make sense from htmx's "just extend HTML" perspective
- silver-arrow 3y ago
  Exactly! I love the sweet spot that htmx hits; please don't change that!
  - recursivedoubts 3y ago
    :) i will not

pyrossh 3y ago

I've enjoyed using htmx and created a simple library in golang to help out. Here is an example app https://github.com/pyrossh/gromer/tree/master/_example https://github.com/pyrossh/gromer/tree/master/_example

RileyJames 3y ago
Legend. Well done for supporting, and for putting your money where your mouth is and laying down some code.
hdlothia 3y ago
Gonna try this out!

toddmorey 3y ago

Congrats on the GitHub program! Very cool. I just had a fresh read of the docs and htmx is refreshingly, gloriously simple--such a breath of fresh air. So natural, self-documenting, and well thought out. It _does_ feel like a natural extension of html. To me, the only "missing" piece of htmx is a component model, but for anyone looking for that, htmx would pair amazingly well with Astro[1] which allows you to define and use html components without the runtime overhead of say Vue or React. [1] http://astro.build http://astro.build

toddmorey 3y ago
Also: I think every project / saas service should be required to have a footer haiku: javascript fatigue: longing for a hypertext already in hand
fshr 3y ago
Not sure what you mean by html components. That's kind of missing the point of HTMX, no? Most backend frameworks like Django or templating engines like Jinja2 have the concept of blocks or fragments so its easy to render out component pieces to send back to the frontend. If you combine that with the OOB options in HTMX and/or the Hyperscript or Alpine libraries, then I'm not sure what you would gain by using Astro.
- toddmorey 3y ago
  I mean, I just don’t think you should have to have Django for a simple website. Astro is an alternative to those backend frameworks. It’s a backend framework itself in many ways.

logankeenan 3y ago

What plans do you have for 2.0?

recursivedoubts 3y ago
No major changes, it should be about 99% API compatible with htmx 1.x. Big things: - Websocket & SSE support will be completely pulled out to extensions (already available in 1.0) - We will drop IE support - We may include a "morph" swap strategy based on idiomorph (https://github.com/bigskysoftware/idiomorph/ https://github.com/bigskysoftware/idiomorph/) - We will change a few defaults around how HTML is parsed, taking advantage of the removal of IE support Hopefully transparent to the vast majority of htmx users.
- bardak 3y ago
  Will HTMX 2.0 have a smaller bundle size since you are removing things? I don't think HTMX is too big or anything but I have a love tiny libraries. And on that note do you think that a smaller striped down version of HTMX is feasible like petite-vue is for vue
  - recursivedoubts 3y ago
    I don't think the bundle size will shrink too much, especially if we include the morph-style merge, which is somewhat complicated yes, I think you could do a stripped down htmx that doesn't support a lot of the stuff htmx does, particularly life cycle events and more elaborate swapping mechanism for example, most response headers could be just done as the HX-Trigger response header + some client side scripting history support and form-value gathering is likewise a source of complexity and code that could be omitted or done less completely
    - bardak 3y ago
      Sounds like reasonable places to strip out stuff while keeping the fundamental features. I think the history support would be important enough to keep though.

dcastm 3y ago

Awesome work! I love the simplicity of htmx. It’s one of those tools that makes me feel super productive. Will there ever be a “htmx“ for building mobile apps?

recursivedoubts 3y ago
there already is! https://hyperview.org/ https://hyperview.org/ Adam Stepinski, the creator of Hypreview, built it after his experience with intercooler.js, the predecessor to htmx. It is a very interesting piece of technology and, through the magic of HATEOAS, allows you to update your mobile app instantly for all your users, without dealing with the mobile store! There is an entire section on Hyperview, written by Adam, in part three of our book: https://hypermedia.systems/book/contents/ https://hypermedia.systems/book/contents/
- dcastm 3y ago
  Amazing! Gonna check it out. Thank you!
- replwoacause 3y ago
  Looks cool but it seems it requires React which makes it a lot more difficult to use than regular HTMX. Form the GitHub repo: “More importantly, the client is designed to be incorporated into an existing React Native project”
  - didibus 3y ago
    Well, you need some cross platform native UI toolkit that can dynamically render the hxml, and React native is hard to beat there.

pragma_x 3y ago

This is a great project, and reminds me a lot of where folks saw hypertext going many years ago. I have read a little of the website and picked through many of the online examples. One thing I did notice is the preference to update client state (DOM rewrites) based on server HTTP request responses containing full-blown markup. Does the HTMX framework provide concessions for client-side-only triggers and client generated content? The reason why I ask is that an advantage of the current crop of JS heavy-client frameworks is they offload as much work to the browser as possible. This can result in less resource use on the server end (e.g. data, CPU), which is a big deal for web-scale apps. Is HTMX able to meet these kinds of engineering goals or is the project intended to do something different entirely? I totally get that something like a Facebook client is not at all hypermedia oriented, but folks are going to draw the comparison anyway.

recursivedoubts 3y ago
we do have a client-side template extension: https://htmx.org/extensions/client-side-templates/ https://htmx.org/extensions/client-side-templates/ however, I would encourage most folks to use HTML as the network format: it typically isn't much more CPU to generate the equivalent HTML string that corresponds to a JSON string (sometimes even less, as with tables) for pure client-side, htmx is largely hands off. We support an `hx-on` attribute to address the fact that HTML doesn't support general `on*` attributes, but that's it it does, however, emit a large number of events that you can hook into to extend things: https://htmx.org/reference/#events https://htmx.org/reference/#events And it plays well w/ scripting solutions like Alpine.js or, our our own scripting solution, _hyperscript: https://hyperscript.org https://hyperscript.org
- lcnPylGDnU4H9OF 3y ago
  Another benefit of using HTML is ease of progressive enhancement. If the default behavior of the server is to render a full HTML page, anyone hitting that URL directly will get the full HTML from the server with no additional back-end work. Additionally, if JS is disabled in the browser, links still work as traditional links.
- 3y ago

foxy4096 3y ago

https://twitter.com/foxy4096/status/1691432812870828032?s=20 https://twitter.com/foxy4096/status/1691432812870828032?s=20 This is a boon to many django developers. I remember few month ago I was making a post liking system, before htmx, I had to use jQuery to fetch the json api server and update the like count, but with the use of HTMX, oh boy it was like I was just writing plain html along with my django logic. This is one of the greatest thing I've found. Also, handling forms with HTMX is also very easy. HTMX really improve both user and developer experience.

recursivedoubts 3y ago
i'm very glad to hear you are finding it useful :)
eddd-ddde 3y ago
The other day I wrote an htmx extension for aws api. You could describe an element using the common htmx tag such as for confirmation, triggers etc, but the ajax fetched any aws object like ec2 instances, pipelines, whatever. It's awesome!
- perpil 3y ago
  I'd be interested in learning more about this can you share any links?
  - eddd-ddde 3y ago
    It's still very early and a wip, I haven't published anything yet. If I get the time I will publish and link it for you. The way it works is by leveraging the existing aws client libraries to sign and (de)serialise parameters and responses, so you can do something like: hx-ext="aws" hx-post="aws:ec2:us-east-1" aws-action="DescribeInstances" and it will just work with any params such as form inputs or hx-vals etc the reason i haven't posted it yet is i want to find a good way of mapping parameters since the aws api can have some notoriously complicated parameter formats
nicois 3y ago

foxy4096 3y ago

It might be a weird question, But why are the websockets and SSE are migrating to extensions?

recursivedoubts 3y ago
doing them right requires a fair bit of code and I'd like to keep the core AJAX-focused functionality as small as possible

javajosh 3y ago

>a video by fireship dev (https://www.youtube.com/watch?v=r-GSGH2RxJs https://www.youtube.com/watch?v=r-GSGH2RxJs) That's a great video explaining the core use-cases of htmx in 100 seconds. Would be great if all projects had such a thing! Htmx reminds me of tailwind in that you've created a set of attribute names and values that are picked up at runtime by a singular library. There's no front-end build required, which is a Very Big Deal for most devs who don't want (and shouldn't have to) to mess with npm and webpack. It looks like the "breaking point" for page size is something like a small SPA - when it gets to big, make another SPA. Particularly for react/vue devs I think the thing they'll miss is the idea of a uniform, singular object representing global state that is rendered by a single function (defined hierarchically in your component codebase) into the UI. However, it must be accepted that this idea is very demanding in itself, resulting in lots of opinions and hurt feelings, and in addition comes with the weight of a front-end build (and all the confusing variation there). I don't use it but I'm already a big fan. Congrats!

GenericDev 3y ago

I love you. Thanks for making the web feel like the web again <3

recursivedoubts 3y ago
:) i hope htmx is useful to you

sdesol 3y ago

> htmx has seen a surge in popularity For those curious, here's some numbers for the last 6 weeks to put things into context: - 4147 new stars - 86 new contributors - New contributors account for most of the commits and issues created which is a very strong sign of growth. Even in very popular projects, it is usually existing contributors that contribute most of the code. https://devboard.gitsense.com/bigskysoftware/htmx https://devboard.gitsense.com/bigskysoftware/htmx Full Disclosure: This is my tool

recursivedoubts 3y ago
very cool tool! we've had a new person come on the project who is focused on auditing PRs and getting the good ones in front of me, which helps a lot w/ getting new contributors in
- sdesol 3y ago
  > focused on auditing PRs Something like this https://reviews.gitsense.com/insights/github?q=pull-age%3A%3C%3D120&t=crc-insights&tb=all&v=bigskysoftware%2Fhtmx%3A%3Agithub%3Abigskysoftware%2Fhtmx%3A%3A%3A%3A https://reviews.gitsense.com/insights/github?q=pull-age%3A%3... might help as well. Click on the different pills (Authors, Targets, Days open, ...) to get a different view of the contributions.
deleted 3y ago
[deleted]

throw1234651234 3y ago

This will just die like Web Components and RxJS after a few people write blog posts and do conference talks on it for hype, right? Does this work with Web Assembly? Of course Web Assembly will die too since it can't do SEO. In all seriousness though, what is the "core" reason to actually adopt this over the current approach?

recursivedoubts 3y ago
if you sincerely wish to understand how htmx is different than the current SPA-talking-to-a-JSON-API approach I would start here: https://htmx.org/essays/hypermedia-driven-applications/ https://htmx.org/essays/hypermedia-driven-applications/ and then work through the rest of the essays: https://htmx.org/essays/ https://htmx.org/essays/
- throw1234651234 3y ago
  Thank you, reading now - do genuinely want to know. I understand how my message came across, but I do intentionally reflect how many attempts there have been to change the paradigm so far.
  - andy800 3y ago
    Not a valid excuse, dude. You have every right to be skeptical or to avoid "bleeding edge" but to assume the whole thing is just a front to raise someone's speaking/blogging/social media profile, to buzz in from nowhere and start off by declaring that it's going to "die" is not the way to act if you "genuinely want to know." Recursivedoubts has legitimately demonstrated he's not a one-trick pony (previously built intercooler, concurrently building hyperscript) and he deals with skeptics like yourself dozens of times every time an HTMX article gets posted on this site (which all seem to go to #1, if that serves as an indicator of the library's popularity). He handles himself with grace and patience and humor, far better than most of us would do. You don't even state what your "current approach" happens to be in order for him, or anyone else, to provide you with a satisfactory answer.
  - recursivedoubts 3y ago

spion 3y ago

How do you organize a backend for a htmx based frontend? Specifically getting templates that serve as reusable components, but also endpoints (there is some proliferation of endpoints which I remember from my days with ASP.NET MVC partials.

recursivedoubts 3y ago
depends a lot on what your backend gives you i agree it can spiral out of control if you try to do too much, e.g. a routes file that is just incomprehensible i often end up reusing the same controller method to handle a few related routes, using pattern matching in the route declaration i think also picking your battles and not getting too fiddly with screens that don't matter so much also helps a lot here
traverseda 3y ago
So you start by just re-sending the entire page but with content changed. Generally you'd use query parameters, like say you have a page with a table and you need to sort it. Add to your query parameters what order you want them in, re-render the whole page. Then once you've got it figured out you just return the part of the template that you actually need to. Makes sense when you think of it as a progressive enhancement on a plain html page.

grose 3y ago

Just wanted to say thank you for what you do. I've long been a fan of HATEOAS and I'm very happy that there's finally a movement towards it and ecosystem growing. Also, the memes are unparalleled.

habosa 3y ago

Not the point if your post but it's amazing how influential the Fireship team is! A true developer influencer, without being a cult of personality.

recursivedoubts 3y ago
yeah, he was the one that really started the madness: https://star-history.com/#bigskysoftware/htmx&bigskysoftware/_hyperscript&Date https://star-history.com/#bigskysoftware/htmx&bigskysoftware... his video posted on july 7th

phplovesong 3y ago

One minor thing. This is not an issue directly with htmx, but more on the backend. This always feels clumsy for me: I land on the index page, and get the full site, then click on about page, and now htmx swaps the content for the about page. However if i refresh the url stays the same, but i now only get the content without the container. I know this can be solved with checking for a htmx header, but i feel like "there must be a better way" like raymond httinger of python fame has said multiple times.

recursivedoubts 3y ago
i typically have a middleware component that decides whether to render the "chrome" around a given response, so my controller methods aren't junked up with it worth thinking more about though
dgb23 3y ago
This annoyed me a bit but it's not a big deal. You make two skeleton templates: One for full documents, one that has nothing in it except the parts that change (say, the meta > title, the body > main and the body > header > nav parts) each wrapped in a hx-swap-oob. In general, out of band swaps are really, really convenient for non-hierarchical layout relationships.
aszen 3y ago
This can be solved by returning the full about page always, but swapping only the content part of in the index page by selecting which element to swap from the requested page. Htmx supports it

jeremyloy_wt 3y ago

I can’t believe you aren’t crediting your hilarious and pervasive ~~psyops~~ meme campaign

recursivedoubts 3y ago
first rule of psyops...

paczki 3y ago

As someone relatively new (few months in) to full-stack development, what can HTMX offer me? I've been semi interested since Prime mentioned it a handful of times, but I feel maybe I'm too new to fully understand what I gain from it. As soon as I'm finish with my current project, I'd like to check it out. For reference, I'm currently working within the T3 Stack.

riskable 3y ago
HTMX is just a convenient way of handling user-initiated UI updates AJAX calls (for whatever purpose). So instead of writing some JavaScript that looks for a specific element to attach an `onclick` event and subsequently makes an AJAX call then again searches for an element on the page to update with the result you can put some (very simple) HTMX code in the HTML directly and it'll handle that sort of thing automatically; "without having to think." It's just a nice, convenient way of handling such things. The argument in the article is that "this is how HTML should've been from the start" because it lets you do some pretty sophisticated stuff just by adding some simple/intuitive attributes to the HTML.
- nonethewiser 3y ago
  So my apis need to return html specific to the page its called from with the data embedded? I guess my apis would need different endpoints that return json for other clients. And different endpoints for the exact same data if they need to be displayed differently? It just seems like a bad thing to couple. What about CSS? I guess you have to look at what the server returns to figure out how to select/style it. I recognize thats how templates work but for some reason it seems weirder when applied to the element, rather than page level.
  - NaritaAtrox 3y ago
    In there book, the authors specify that it is valid and normal to have additionnal endpoints for json. For exemple, Mastodon provide html endpoints as a interface for the user's browser, but also json endpoints for other clients (mobile app, cli tools, or others web app providing an alternative ui)

enahs-sf 3y ago

Hello, Maybe stupid question, but what are the downstream implications for folks like Vercel/Netlify/etc. who bet the farm on complex server rendered JS pipelines?

nchmy 3y ago
Fuck those hucksters... https://twitter.com/rauchg/status/1619492334961569792 https://twitter.com/rauchg/status/1619492334961569792
- fud101 3y ago
  can you epxlain this to the <100 iq
  - nchmy 3y ago
    Guillermo Rauch is the ceo of vercel. In this tweet, he's effectively saying that the bulk of what his company was built upon (SPAs) is bullshit (zero interest rate phenomenon is a reference to when financial interest rates are very low/zero, as they've been for many years, all sorts of things will seem great and successful because you can borrow money for free. When rates go up, only actually viable projects will survive - as we're seeing in the startup world now).
deleted 3y ago
[deleted]
recursivedoubts 3y ago
i don't think there are major implications: the web development world is still very react/javascript/JSON-centric there is no reason that they can't tweak their services to be more hypermedia friendly if and when this approach becomes more popular netlify (which offers free hosting for https://htmx.org https://htmx.org, so is a sponsor of the project) is very HTML/hypermedia friendly as far as I can tell, and I don't have enough experience w/ vercel to say much other than a vague sense that they are extremely react-oriented no reason that can't change as the market changes though: hypermedia pushes the main value locus of applications back on the server side and so server-side companies should like that

doitLP 3y ago

Are you also the writer of https://grugbrain.dev/ https://grugbrain.dev/?

recursivedoubts 3y ago
yes :)
- doitLP 3y ago
  Huzzah! I laughed harder at that than anything in a long time.
  - recursivedoubts 3y ago
    :) i'm glad you found it funny and I hope useful as well, at least in parts
    - doitLP 3y ago
      Yes. Funny because it was so true and full of hard won wisdom!
- gsuuon 3y ago
  This is hilarious!
- FrankyHollywood 3y ago
  "danger, however, is agile shaman! many, many shiney rock lost to agile shaman! whenever agile project fail, agile shaman say "you didn't do agile right!" LOL
winrid 3y ago
> javascript developer get what deserved let grug be frank

tommica 3y ago

Stupid question, why doesn't htmx parse the response html and extract from that the relevant data out needs to fulfill the configuration? Feels a bit cumbersome to return the exact part of the response on server side, like the next page of the table, if it was requested with htmx, else return the full page. This way htmx would be even easier to implement in any front-end. Or maybe I am just crazy. Edit: or is it this? https://htmx.org/docs/#selecting-content-to-swap https://htmx.org/docs/#selecting-content-to-swap

spapas82 3y ago
This is how unpoly works (it receives the whole response and patches the page with the correct part of that response).
- tommica 3y ago
  Oh that's cool!
Lukas_Skywalker 3y ago
Rails does this with Turbo Frames [1]. When clicking a link that is contained in a <turbo-frame> element, the frame is automatically replaced if the response contains a frame with the same ID. 1: https://turbo.hotwired.dev/handbook/frames https://turbo.hotwired.dev/handbook/frames
mst 3y ago
It is that, yes.

mildred593 3y ago

Do you think that at some point in the future, browsers could bundle in htmx or something similar, and that we could imagine web pages that have javascript disabled but with great interactivity due to htmx? This could perhaps be used as a security feature.

struant 3y ago
No need to wait for browsers. You can just whitelist htmx and block any other javascript.

scoofy 3y ago

I owe you a beer or 6. Let me know if I can pitch you a few bucks.

recursivedoubts 3y ago
if you want to support htmx development you can do so via github sponsors: https://github.com/sponsors/bigskysoftware?o=esb https://github.com/sponsors/bigskysoftware?o=esb but please don't feel the need to do so

tagfowufe 3y ago

Hi, I've been skimming over your book. There might be a typo under [1], where you write: "An HTTP response to this htmx-driven request might look something like this", but then the next figure's header is "JSON" Also, I love your username! [1] https://hypermedia.systems/hypermedia-reintroduction/#_hypermedia_driven_applications https://hypermedia.systems/hypermedia-reintroduction/#_hyper...

synergy20 3y ago

can htmx work for restful backend that requires client side rendering and routing? my understanding is that htmx only fits for server side rendering such as Django.

ensignavenger 3y ago
HTMX pulls text from your backend, so normally folks serve HTML snippets... but you could have a bit of js that takes JSON and turns it into HTML in the browser, and HTMX will pull the JSON (or any other text) into the browser, so you could still use it with a JSON api, if you wanted to I use DRFs renderrers so my Django backend can render either JSON or HTML, so my API is still "restful", it just serves HTML to clients that request HTML like browsers with HTMX and JSON to other clients that request JSON.
- synergy20 3y ago
  interesting,using DRF for json and Django for html at the same time for browser and nonbroswer clients. my use case is embedded systems that can typically do client side rendering in browsers, the only server side rendering I can afford is some simple lua or c/c++ mvc alike backend,Django is too 'fat' on resources. there are some of them but none that is great and actively maintained as far as I know.

FieryTransition 3y ago

Does unpoly try to solve the same problem and how does their approach differ compared to htmx? Curious to hear thoughts, I haven't done web in a while, so understanding your thoughts might help understanding the whole thing better.

mstade 3y ago

Thank you for all your hard work put into htmx and indeed promoting hypermedia driven applications! Since htmx works by way of custom attributes, can you write a bit about a11y recommendations for developers using htmx? It would seem to me that a lot of things that we get from using standard attributes are lost, and we’d need to do more nuts-and-bolts type work with regards to dom structure and aria attributes. Or does the htmx engine deal with this to generate relevant aria attributes etc.? I couldn’t find any references to this in the documentation.

ouraf 3y ago

Loved the memes on the essays page. It has motivated me into checking the project more thoroughly