World's easiest live dashboard with htmx
So I'm gonna show you, how to take basically any dashboard that you have, any admin dashboard, and make it a live dashboard. In probably the least amount of code possible. This is gonna be, like, five lines of HTMX code. Okay. So what I've done is I've taken just a template that is a template for an admin dashboard.
Speaker 1:In this case, it's ecommerce or something, But I've given it this section here. So we have this widget, which is got this sort of circular progress bar. I've changed it so that just so that when you refresh, you can see now when I refresh, the data updates, because I I set it to some formula that's based on the time. In real life, you know, you would have your own data from your own database. It doesn't matter what it is.
Speaker 1:The point is every time you refresh this page, you get new data, you get fresh data for from this part of the dashboard. So that's not good enough. We don't wanna have to make the user refresh or click something or something like that. We want this data to be live or to appear to be live. Okay.
Speaker 1:So what do we do? I've taken this dashboard. This is intentionally messy code. This is a real life dashboard. This is a bunch of stuff happening here.
Speaker 1:This is what you're gonna really have on a on a big project. In this case, it's a template. You might have even had a dashboard template that you started with. So the point is it's messy, and you can do this with any dashboard, with any bit of code. Okay.
Speaker 1:So how do we do this? There's a few ways. The first way, I would say, the way that I would you know, the correct way would be to actually isolate this widget and, you know, make it a component, have it control its own data, the HTML, the queries, and you'd sort of include them as a standalone thing. And then you'd make them available with their own route, and you'd use HTMX to load in that snippet and just put it where it's supposed to go. Very efficient.
Speaker 1:That is, like, the correct way, but that's not what we're doing today. We are doing the fast and easy way, the hack. Okay. It's a hack, but it's also it's less efficient, but it's maybe more clever because it requires almost no edits to the underlying system. No edits to anything except just adding a little bit of HTMX code in there.
Speaker 1:Okay. So let's get to it. The first thing you need to do is add HTMX to your site. That part's easy. You just copy the CDN into the head of your page.
Speaker 1:You can get the CDN from htmx.org, or from Hypecp.com. There's a quick, you know, one click copy button there. Okay. So you put that into the top, the head of your page. Now next thing you gotta do is find the div that you want to make live.
Speaker 1:So however you find that div, you can use inspect element, or if you just wanna go through the code and find it in there, make sure you have the right div. Now give that div an ID if it doesn't have one already. If it already has one, fine. But give it an ID, and this is use this you need this because you need to reference which div it is that you're that you're loading. So in this case, I'm gonna say ID equals user activity because that's kind of what I've made this widget into.
Speaker 1:Okay. So now we're getting into the h t m x. So set h x get equals blank string. That just means reload the current page, whatever page you're on. So I say blank string.
Speaker 1:If you wanna make it specific to your page, fine. But just like when you submit a form, if you use the blank string, it's gonna reload the page you're on. So h x get equals blank string. H x trigger equals every five s. K?
Speaker 1:So that's if you want it to be live every five seconds, you could set that to ten seconds, sixty seconds, however live you want it to be, you can set that trigger. Okay. Next one is the big one. This is the one that's doing a little bit of the magic. H x select equals, and then you use that ID.
Speaker 1:This is a CSS selector. H x select equals and then user activity, pound user activity. What this is doing okay. I'll first, and I'll finish. H x swap equals outer HTML.
Speaker 1:That is specifying how you are going to swap the data in, whether it's going to replace what's there or whether it's going to go inside what's there. Okay. So what's happening here? I'll just say quickly. H x get is getting the full HTML of that entire dashboard.
Speaker 1:Right? HX trigger is saying do that every five seconds. K? HX select is saying in the response that comes back, just select out that CSS selector. So in this case, it's user activity.
Speaker 1:Okay. And then outer HTML, h x swap equals outer HTML says, put that user activity, the the response that we got back in the outer HTML of whatever our target is. We have not specified a target, h x target. That's by default, it's gonna do the div that we're currently on. And since we're on the user activity div right now, we don't need to set the HX target.
Speaker 1:It just assumes that's the div that we're doing. So and then it swaps it with the outer HTML. Okay. So that's it. We're done.
Speaker 1:We now have a live dashboard, completely live. Let's go back and look at our page. Okay. So we refresh. That's the last time we're gonna have to refresh.
Speaker 1:Now every five seconds, that's going to bring in the new data. And you can see it's updating the progress bar. It's updating whatever else it needs to because all that is just the same as if you had reloaded the whole page, but it's now isolated to just that widget because we're using HX Select to pull everything else that it gets, push it to the side, and just take out what we need and put it where we need to with HTMX. So you can see if I'm now typing in some other part of this dashboard, it's not going to be affected by this, you know, live widget we have running in the background. Now is this the most efficient?
Speaker 1:No. If you have full access to the code, like I said, I would recommend doing it, isolating it a little more, setting up a special route for it. That's gonna make it a little smoother, a little faster. But this little trick is an easy win. You can turn any static, you know, web one point o dashboard into a live dashboard with live widgets all over the place.
Speaker 1:It looks like something that is, you know, more complex than it is. This is just some HTMX basics, some polling, an HX select. So in four or five lines of code, depending if you count, you know, the HTMX CDN as a line of code, you now have this live dashboard.
