HTMX Crash Course | Dynamic Pages Without Writing Any JavaScript

[@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".

[@saitaro]

Do you have an HTMX class in your high school?

[@aham.manishverma]

Hands down, this is the best HTMX tutorial on KZbin!

[@joel-rg8xm]

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

[@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".

[@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. 😃

[@veenmikki27]

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

[@king.trismegistus]

At 10:30 you may get an "htmx:invalidPath" error in your console when trying to fetch data by clicking the button. Adding the following to your index.html should fix it: Great video so far! Thank you.

[@ribz747]

Thank you!!

[@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!

[@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.

[@АртурЮсупов-ю5щ]

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

[@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.

[@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!

[@PepePlaca-t6s]

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 ?

[@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".

[@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

[@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.

[@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

[@wazeeharaa8100]

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

[@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. ❤️

[@aruprakshit7218]

After 10:30 if you wondering why the button press not loading the JSON as the author shown here, that is because of some config change. Add `` to the section you will be fine after that.

[@mohammadjalifathi6193]

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

[@TraversyMedia]

Working on it next (pun intended)

[@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 👍🏿

[@ryandsouza7100]

Thank you Brad. Had been waiting for this one.

[@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

[@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.

[@alnahian2003]

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

[@scotthallett]

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

[@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.

[@borishaus-official]

Honestly, fantastic. Coming from a background where I can work with NPM, this is an excellent tutorial.

[@smddev]

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

[@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!

[@daymaker_trading]

I love you! ♥ Learning from your courses since 2019

[@maskman4821]

I have learned a lot practical and useful examples from this crash course, thank you Brad 🙏

[@atibyte]

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

[@giuzp95]

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

[@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?!

[@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

[@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...

[@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.

[@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 🎉

[@stiofanmacthomais]

Excellent overview - easy and clear to follow along!

[@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.

[@NNNedlog]

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

[@JavedURRehman]

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

[@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

[@tanaht23]

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

[@vabhynadar]

Really great tutorial. I enjoyed following along.

[@stronglycorrelated]

Great tutorial, gets straight to the point.

[@DarrelDavis]

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

[@vectoralphaSec]

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

[@kiracancode]

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

[@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.

[@funkdefied1]

You can use any standalone web component in conjunction with HTMX, but not React components. That means that you have a smaller selection of libraries out of the box

[@soumadip_banerjee]

Happy New Year sensei 🎊

[@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.

[@LongJourneys]

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

[@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.

[@Readraid_]

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

[@muhammad6780]

you can use go python or any other language 😁

[@MrPanzerDragoon]

Thanks for posting this!

[@d.dwijanto]

Being a developer since the Netscape era, discovering htmx has been a delightful journey back to basics for me. This tutorial is particularly outstanding: it's not only easy for beginners to grasp, but it also comprehensively covers the key aspects of htmx in a single video. It's rare to find such an effective blend of simplicity and depth. Thank you for this enlightening tutorial.

[@donovan8031]

Thanks Brad, been curious about HTMX.

[@prashlovessamosa]

Happy New Year Brad

[@matteyahmed8956]

Great HTMX Crash Course . **thumbs up**

[@jamesbell8148]

The man is backkkkk 😊

[@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)

[@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 ?

[@TomNook.]

Happy new year Brad

[@963design8]

I had a ton of issues even with the very first steps, try with node versions 10, 13, and 20 and got the same error: "[nodemon] app crashed - waiting for file changes before starting..." this is pretty weird

[@hasibulalamprionto2010]

Thanks for such an amazing tutorial!!

[@Rajisunusi]

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

[@FullStackApps-u8g]

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 ?

[@DxBlack]

Something must be outdated here...at no point before starting the nodemon server is a "index.js" file ever created, but he can run it just fine. However, following every step of his from 0:00, node can't find the file and crashes...something is HELLA off.

[@Hamzaelbouti]

Can we do htmx with firebase and without any backend ❤

[@scoppyeah]

Brilliant as always

[@_nightfall_artist]

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

[@paulthomas1052]

Thanks for another great demo !

[@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.

[@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.

[@ukaszzbrozek6470]

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

[@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

[@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

[@SergiuMunteanu]

Great tutorial, I learned the basics in 10 minutes. As for the specs itself, sounds like a terrible idea, unless you make some hacky dashboard or backend page. You have the HTML Dome split between frontend and backend, it replaces JavaScript with attributes that are hard to read and understand and then for sure you need to add event listeners using JS for validations and stuff.

[@dcmtigre]

Is it possible to receive only the JSON response (without generating dynamic HTML on the server-side) and create the dynamic HTML on the front-end like React or Angular?

[@praphael]

Pretty sure you would need Javascript for that

[@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

[@zensukai]

This is awesome, thank you for sharing! =)

[@VidyaB-c1h]

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

[@nftsasha]

Really great, thanks dude!

[@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?

[@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

[@mycloudvip]

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

[@intune6]

I just want to use my apache localhost, but can't seem to get htmx to work like that. Does anyone know what to do?

[@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)?

[@villarmaryan6577]

Nice, how to seperate files and include it in the index.html? ejs or .html?

[@LalitKumawat53]

Happy New Year! 🎉

[@cmdr-reflipd]

I use htmx for static pages, yep just static HTML. Once you understand it, it is super powerful.

[@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

[@Eugtrader]

I like to use htmx, but I ran into a problem - when loading part of the page using htmx, which contains swiper, it stops working, but if I load the entire page, everything works fine. Can anyone tell me how to solve the problem?