HTMX Crash Course | Dynamic Pages Without Writing Any JavaScript

Learn HTMX by creating a couple of small projects with a Node.js and Express backend, including a contacts search, temperature converter, mock weather app with polling and form validation component. We will learn about the common HTMX attributes like hx-get, hx-post, hx-swap, etc.
Final Code:
github.com/bradtraversy/htmx-...
Alpine Crash Course:
• Alpine.js Crash Course
Check out my courses:
traversymedia.com
Social Media:
Github - github.com/bradtraversy
Twitter - / traversymedia
Instagram - / traversymedia
Facebook - / traversymedia
Linkedin - / bradtraversy
Timestamps:
0:00 - Intro
3:42 - Node.js/Express Server Setup
9:23 - Simple request with hx-get & hx-trigger
11:12 - hx-swap
11:58 - Route to get a list of users
16:04 - hx-target
17:00 - hx-confirm
17:30 - Get users from jsonplaceholder
18:40 - hx-indicator
21:06 - hx-vals
23:27 - Temperature converter with hx-post
29:44 - Polling
33:23 - Mock weather app with polling
36:44 - Contacts search widget
39:50 - Backend route for search
47:08 - Inline form validation
50:12 - Backend route for validation
56:01 - Wrap up

[@anggaradotnet]

If one day a lot of people manage to create an app that revolutionizes the world, they should thank you for making such clear tutorial. Thank you so much! HTMX is cool!

[@jkiamafish]

You are the only person who has mad an actually valuable HTMX tutorial, to my knowledge. I needed to learn this for school and the docs were not super helpful for getting started. I'm 12 minutes in and I now understand how to get HTMX running.

[@BGdev305]

I was just thinking the same thing! This is because he's a really good "teacher".

[@joel-rg8xm]

heck of a "how a Crash Course should be", nice variety of mind-opening mini projects as well. Kudos

[@mohammadjalifathi6193]

Brad we really need a full great next js course I really love your courses

[@TraversyMedia]

Working on it next (pun intended)

[@veenmikki27]

It's great to finally get a good HTMX tutorial. Happy New Year Brad and thanks for the great tutorials.

[@user-yq4gk7th6m]

I have been exploring HTMX for the past few days and trying to build a todo app using the BETH Stack, which includes Bun, Elysia, Turso, and HTMX. This video has come in handy! Thank you!

[@gedaredorke5941]

First of Happy New Year to Brad. Your Crash Courses provide a wealth of knowledge and they always lay the foundation for exploring in-depth topics. Looking forward to more content this and hope that this year will be extremely great year for you.

[@anakobe]

Always there for the community! Thanks Brad!

[@nizamuddinshaikh3185]

A simple but lucid explanation of HTMX. Anyone can use this as a stepping stone in further advancement in web development. Thank you Brad for sharing. 😃

[@zapphoddbubbahbrox5681]

htmx, finally ;) You've just scratched the surface... Hope you will continue on this path as, IMO, you are probably the only YT coding instructor that is clear and devoid of fast-edit/fast-speak. Thanks!

[@outwithrealitytoo]

My pet peeve is demos where the person keeps having to retype things because they are trying to talk and type at the same time. "Every once in a while... fine... but that's the third line in a row you've have at least three stabs at... and you have code completion switched on".

[@MarkVolkmann]

Excellent video! Thanks for sharing it! When picking a server-side stack, I think it’s a good idea to choose one that has good support for generating HTML (not just string concatenation) and has tooling support that gives syntax highlighting and understands what is valid in HTML.

[@scotthallett]

Amazing! Been waiting for a course on this - Thank you Brad! Happy New Year.

[@samnako]

Happy new year to you Brad. Thanks again for enriching our learning. Wishing you good health in 2024.

[@TraversyMedia]

Thank you 😊Same to you!

[@user-yx1ic8kv5s]

New Years gift from Brad is here! Thank you a lot! 😊

[@davidriveros5422]

I was searching for an HTMX guide to start my next project, this came up right on time. This was a great tutorial, thank you!

[@giuzp95]

Wow, what a treat! I've been looking for a quick and simple tutorial for HTMX. Thank you!

[@NoahNobody]

I'm really happy you took an interest in HTMX. I've been using it for personal projects and am very happy with it.

[@ryandsouza7100]

Thank you Brad. Had been waiting for this one.

[@codybishop7526]

I'm in love with this. It makes reasoning about what is going on, so much simpler than react. God, hooks and the complexities of react these days just makes my head hurt. This is so elegant, minimal and wonderful. Here's to hoping that HTMX becomes a web standard and breaks us away from these overly complex "solutions".

[@wazeeharaa8100]

The Excellent! Clear Notch Voice, Pace and Modulation which makes easy understanding

[@gbengaomoyeni4]

Thank you Brad, the best and award-winning programming instructor in the world. Keep up the good work. May the good Lord bless you and water your garden as you water ours. Happy new prosperous year.

[@chrisnortonjr]

Whenever I want to learn something, I always check your channel first man.

[@adrianmisak07]

that was just amazing… thank you, I needed an introduction to htmx, and this was better than i could have hoped for

[@SiteStudio]

Love seeing more HTMX knowledge content popping up.

[@Sergatx]

Awesome, I’ll have to actually watch this course soon, I’m still learning some JS. From what I’ve seen online, lot of the content surrounding Htmx makes it seem like it’s not a serious thing.

[@blue_mustang_]

Thax Brad.This is really cool! Happy new year!

[@TraversyMedia]

Happy New Year!

[@omomer3506]

Following your github i always know new video is coming when you have a new repo, love it

[@atibyte]

I was waiting for an HTMX video from you. Thanks for posting!

[@MarkusEicher70]

Hi Brad and hello community. Thank you for this intro to HTMX. I like the simplicity and the low footprint of HTMX. I want to use it with Rust and now need to figure out how. Overall it looks very nice. May you all have a great 2024!

[@Bargains20xx]

I will be doing the same, there is something about performance that's very fascinating

[@DarrelDavis]

Great video. It's what I needed to get on with HTMX. Thanks.

[@therealnoel.]

Yes 🥂. That's the course I've been waiting for. I literally used the documentation to learn it 6 months ago - something I never do 😂. Anyways, Happy New Year Brad 🎉

[@smddev]

This crash course was extremely helpful for a school project I’m working on.

[@stiofanmacthomais]

Excellent overview - easy and clear to follow along!

[@arnaudpoutieu1331]

Hey Brad, I wish you all the best for 2024!!! Regarding the vid, this is the best one I have seen about HTMx thanks 👍🏿

[@MrPanzerDragoon]

Thanks for posting this!

[@rangabharath4253]

Impressive as always Brad. Just want to notify the fellow developers if you are facing an issue while running the project as fetch is not defined. Please install node-fetch package and import it in server.js. import fetch from "node-fetch"; Thanks

[@NNNedlog]

I just finished watching the tutorial. Thanks a lot for these videos sir, I really appreciate you and your efforts

[@tanaht23]

HTMX... by Traversy MediaX >> Happy New Year BradX ! Thank you.

[@stronglycorrelated]

Great tutorial, gets straight to the point.

[@donovan8031]

Thanks Brad, been curious about HTMX.

[@abrafgesvbeac3676]

I love you! ♥ Learning from your courses since 2019

[@JavedURRehman]

Thanks Brad, this is really a great introduction of HTMX.

[@judevector]

You never disappoints always coming through for the community when needed the most, now I can finally learn HTMX. Videos I have been seeing are not worth it Thank you and Happy New Year to everyone 💖🥳

[@TraversyMedia]

Thanks so much. Yeah surprisingly, not a lot out there as far as content on HTMX. Happy New Year!

[@user-bf6yx4nn5k]

Also here to learn this new paradigm. Happy new year 🎉

[@marilynlucas5128]

@@TraversyMedia You should do a codux tutorial

[@noodlespwn42]

you know you can read the docs ?

[@paulthomas1052]

Thanks for another great demo !

[@jamesbell8148]

The man is backkkkk 😊

[@user-zs6bp4qu8j]

Great content! Thank you for this tutorial. Happy New Year. Do you have tutorials for framework agnostic components ? Like say LitElement or Adobe Spectrum ?

[@ehabbustami7691]

thank you very much for a very useful course. It would a great addition to have another course on both HTMX and Alpine.js from your experience how to get the best of these two libraries.

[@dee.s.4513]

A book fitted into a 58 min video. HTMX is really amazing; hope there are no caveates. The code you give is so multi-utility. Thank you Brad! (Would be so happy to see more on Express.js from you.)🌻

[@abhinavadarsh7150]

Book(Hypermedia systems) is more than htmx tutorial. Its about what hypermedia is? why we should use it? What REST really means...

[@azizkira7505]

Happy new year 🎉🎉 And thanks a lot because of you i learn dev the way it's supposed to be ❤❤❤❤❤

[@tomasnovellino5980]

That's a great video. I loved it. I kinda don't like the fact you still have to kinda pre-render or generate front-end HTML(X) code from the back-end. But I can also see how a multi tiered app can have a pseudo back-end just as a bridge between front-end and proper backend responses. I can't wait to try it

[@gnuter3000]

Mr Traversy! can you read my mind? I needed this htmx intro from YOU!!! Over the years I learned a lot from you. By the way: your voice sounds like having a cold?!

[@demystifyingdev]

Thanks for doing this... just what people need to progress beyond the htmx example page and/or learn python for backend... question: have you considered Astro partials as "backend" for HTMX???

[@Andy-vh3ns]

This is awesome, thank you for sharing! =)

[@ukaszzbrozek6470]

Thank you for the tutorial ! It was very interesting. We should think of HTMX as a replacement of back end templates 🤔

[@Rajisunusi]

I was about to email you and recommend this crash course.

[@Readraid_]

> uses htmx to avoid writing js > node js server backend

[@markg1netsg]

Hey Brad, great tutorials as per usual, quick question, if the form is updating some other part of the page like adding an item to a list, how do you clear out the form with htmx after updating the list - thanks

[@evanter8180]

Thank you for this amazing tutorial. I think you could explore more the potential of HTMX and Django in another tutorial, showing how to manipulate fetched data with jinja or post processing after a POST request. A CRUD application with python, django and htmx will be welcome.

[@scoppyeah]

Brilliant as always

[@skyy_banerjee]

Happy New Year sensei 🎊

[@nftsasha]

Really great, thanks dude!

[@TomNook.]

Happy new year Brad

[@The-Untitled-One]

KZbin Intro Tutorials are a requirement nowadays for people who cant even understand the documentation. Videos like this actually explain what you should/and should not do and I appreciate that. ❤ If more tutorials are done like this first, developers will understand the documentation better. Then they will he able to use these "steel lego bricks" to build "tools" to build components that (feel) very easy to reuse. You are the first best teacher on these things and I appreciate that. ❤ Thank you. ❤️

[@prashlovessamosa]

Happy New Year Brad

[@peterkulik5943]

Everywhere I hear about "no-js," "0% js," etc. Is htmx suitable for enterprise-level web applications? Can someone provide an example where htmx is used with a normal datagrid-like functionality? I'm not referring to a basic table but rather features such as column resizing, drag-and-drop movement, etc. Something like AgGrid.

[@LalitKumawat53]

Happy New Year! 🎉

[@matteyahmed8956]

Great HTMX Crash Course . **thumbs up**

[@StannYo]

Thanks ! Is htmx a good addition for the app developped in the course "PHP From Scratch 2024" ?

[@user-tg8yf7sg8g]

Great Brad ! A quick question - Since we don't use JS at client side , there is no way to do some client validations ? Lets say , we want to validate email format at client side before even hitting the server ?

[@PhilParadis]

Very nice intro; I’ve seen others use it in videos but none yet who explained it as well or as thoroughly. PS The regex for email addresses is outdated now ICANN has allowed vanity TLDs; there are now plenty of TLDs >4 characters.

[@harpo187bling]

Thanks Brad!

[@Hit307]

Imagine using Htmx and Tailwind in your project... No comment , HTMX powerfull!💀

[@m3w7ub3]

I wasn't sure if I should learn Vue or HTMX for my next project and I just happened to look at my notifications. HTMX it is.

[@razdelovski]

thanks for the great tutorial imho, implementation of the email validation though doesn't look like a good practice - having that complex piece of markup both in the frontend and backend is an issue in case that markup needs to be updated, it would be better to use a dedicated separate element to hold the validation message and only fetch that from the backend, keeping markup and styling only in the frontend

[@LongJourneys]

YASSS I'm loving HTMX so far. I'm trying to move away from stuff like React/Vue as much as possible.

[@berndeckenfels]

Btw beware injection attacks if you render html from the server and don’t use protection there (that’s better with the automatic quoting of eg angular)

[@alnahian2003]

New Year started with this big ka-baooom from Brad Thanks so much for making the first day of the year so special

[@mycloudvip]

Awesome content! Where can I find your courses ONLINE? Kudos!

[@AtacamaHumanoid]

I saw people on Twitter regularly mocking htmx for reasons I didn't understand. I think some were saying it opens up security issues that haven't been around since the earlier days of javascript, but then I saw other people saying "nu-uh, you don't know what you're talking about" and explaining why their claims were wrong. But, after seeing that whole conversation a couple times, I gave up trying to figure out who was right because I'm trying to learn other stuff right now.

[@vectoralphaAI]

This is cool. Anything that lets me not write any JS is a plus. Man, i hate JavaScript.

[@Woeden]

This is so magical wtffff

[@HuynhLuong227]

Thank for sharing 🎉🎉🎉

[@owenwexler7214]

Excellent video and a very good primer for HTMX. Very important note: anyone using HTMX to make a user-facing production project that takes user input should use a templating system that escapes user input to send the HTML as part of whatever backend stack they choose. res.send()ing raw HTML in strings is a big XSS vulnerability, as someone could easily inject a tag that does bad things into unescaped user input.

[@PaulSpades]

User input needs to be sanitised before it gets stored, in your backend controller. All input checks need to be performed on the server, not in the browser - because all users and malicious agents have full control of their browser (not just a text input), including js scripts. Escaping text input twice is also a common problem in inexperienced projects.

[@teaman7v]

Thank you for this

[@Ipadstands]

Thanks for the introduction. I am not a web developer and have stayed away because of the Giant Complex frameworks. Maybe certain sites like FB need those beast frame works but probably 80% of web sites do not. IMHO. So a easy to learn , expressive functionality and ease to maintain like this HTMX appears is a good thing., It would be neat to see a KZbin tutorial building a site like this KZbin web page I am editing this comment in. Any Takers ?

[@lolibonmamo3410]

hello sir thank you for your best tutorial of js 12 hours,i have finished js tutorial 12 hrs shall i proceed to this one?

[@charlesbaldo]

This reminds me of the goal for originial Angular

[@ChristiaanHunter]

what theme are you using in VS code which makes your html tags green please? (mine are blue tags) I looked though a few videos of yours but this I could not find. Thanks

[@Nab_001]

this Course was easy to follow, especially for those who already has ExpressJS background. HTMX is a great solution for applications that primarily focus on AJAX interactions and that doesn't require complex UI. it looks like it still worth to learn alongside with it React or any other popular framework to perform complex stuff like using websockets or using an API type other then REST (tRPC for example), am I wrong?

[@OhFega]

Thanks Brad

[@victormendoza3295]

Isn't offline mode a problem for htmx? I'm sticking with Svelte for the frontend and I can add in HTMX as needed.

[@pratiyushs381]

Happy new year

[@AHRienks]

Brad, I would like to know the settings.json that you are using in this demo. I have seen a dozen of suggestions on StackOverflow, but I can not get it the way you have it. I want to be able to place every attribute on its own lin, if there are many, like in an input. But in other cases, where there are only 2 or 3 attributes, they can all go on one line. All presets do one thing or the other, but not as want it to be. What is the wrapping setting you have in VSCode? (on windows)?

[@grandpowr]

Really liking what I'm seeing, I vastly prefer this style over what Next does currently (but still a must to learn because of jobs requirements), simplicity is king always

[@TomislavMiletic]

Big thank you👏👏

[@pjosxyz]

thanks Brad

[@likandokayombo]

Helpful video

[@arijitRoyFullyStressedOut]

thanks, more HTMX videos please.

[@_nightfall_artist]

I have installed XAMPP already, Now if I install Express js Server does it cause any issues?

[@saivaishnav2]

Hello sir, I am watching your video of RTM video call and i am in state of confusion because i can't find the agora RTM in that website could you kindly please say what should i do