Advanced htmx: hx-history-elt
So the next advanced attribute we're gonna talk about here is h x history elt. So this is another elt attribute, but it has nothing to do with the last one, the disabled elt. El elt is just element. So what h x history ELT is doing is it allows you to specify which part of the page is used to build your history snapshots. So we talked about it before, but HTMLX, because it's overriding, you know, it's using this Ajax, to to make these calls.
Lazarus:It's not the sort of your normal browser history back and forth. So HTMLX gives you all these, it does a lot of work behind the scenes to make sure that your history is correct. So it's building these snapshots. And by default, it's building the snapshots of your site using the body tag, which makes sense. That's the whole, you know, that contains all the stuff that you're gonna see.
Lazarus:So that's the default. But there may be times where you want to put something outside the history. So when you go back and forth, whatever is outside that, that history and that snapshot is not going to change. So just first of all, the documentation on this on the h t m x site kind of recommends against this. It says like you usually don't need to do this, because if this element that you that you put this on is not on every page, if it's missing or something, this this ID, it's gonna mess with your history.
Lazarus:So just in general, why would we do something if even the documentation is kind of saying, like, well, you probably don't need to do this. A perfect example of why you would do this is running an audio player. So something that you need to be persistent. And we already have seen this with HX preserve. You can preserve parts of this when you click and when you load stuff in.
Lazarus:You can preserve parts of your site to not update along with HMX. But AJX preserve does not work with the back button, because this is like your back button is kind of, you know, it's a separate thing. It's your browser, and it is replacing your whole page and h x preserves. It's not gonna try to, like, you know, that that's not enough for it. So HTMLX is making these snapshots of your site.
Lazarus:So if you wanted to do something like an audio player, what you would do is you would set a div somewhere inside the body with everything else on your page, but your audio player would be outside of that. And then when you you set your snapshot, so that it can fill the whole page with the other stuff, but leaving the audio player out, everything's gonna be loaded with Ajax. That audio player is gonna be untouched even by your back button. So that's, you know, I think there's there's probably other examples of of when you want to do this, but like the documentation said, you probably don't need to do it very often. So what you need to do is you just add the h x history elt.
Lazarus:You don't need to put anything, there's no, value for it or anything like that, you just add that attribute by itself to whichever div. And why else would you want to do this? Maybe you have a little chat thing and you want that to persist from page to page even with the back button. There's actually a great Reddit thread that I came across recently, with a code sample. So if you wanna see this, I'm gonna include that in the notes.
Lazarus:It's, the Reddit thread is how to make an audio player that survives the back button. So that's, you know, a perfect sort of, use case. And you can see that they use a couple other, couple other attributes as well. But the one that makes it the one that does the magic is this HX history ELT. So these are tools that you might never need.
Lazarus:And it's kind of, you may I I think my experience has been using HTMX. You worry because it's, first of all, because it's a new tool, second, because it's sort of minimal, that you're gonna hit these things where, okay, there's just no way around this. And then you come across tools like this and this attribute is one of those where it's you you would think this cannot be done almost. That's sort of my opinion is that, you know, how how are you gonna override what the back button's doing? We already are doing so much with the back button, but this is just another thing for those those weird edge cases where you've got something going on and you wanna keep it persistent through all the parts of the page.
Lazarus:So you can keep your sections of your site untouched, even using the browser's back and forward commands. And this is, you know, this is HTMLX is a front end tool. People sort of think it as, like, sort of a back end solution and or something like that, but, you know, this is you're you're getting these front end tools and yes, you're sort of it's maybe more comfortable for people who are used to working in the back end, because you're not converting everything on your site over to the front end. You're not making a JavaScript, modeled version of your site on the front end. But you are doing these things on the front end.
Lazarus:It's a it's more and more like a complete front end solution with all of these advanced attributes. So you're getting all the benefits of that SPA without having to convert your site into JavaScript framework nightmare land, whatever you want to call it. I I'm I don't want to be too, you know, I I just my experience with those has not been, has not been great, for maintainability. So we are approaching the end of going through every advanced attribute, which means all the attributes are gonna be done soon, but there's a lot more. We're gonna I'll finish up the attributes, and I think the next advanced topics are gonna be the request and the response headers.
Lazarus:So, yeah, we do have a couple more attributes first, but we're gonna talk about the headers that you can put that are separate from the attributes, but there you can include them in your requests and your response. And these kind of give you little special overrides and stuff like that. So stay tuned.
