HTMX Frontend Revolution | Thomas Güttler

This video features Thomas Güttler at DjangoCon Europe 2021 in Online.

HTMX Frontend Revolution | Thomas Güttler
0:44:49
Published June 27, 2021
6,683 views

I developed my first CGI script in 1998. Since that day I have seen a lot of hypes coming and going.

The talk will consist of three parts:

  • My humorous odyssey of trying to find a great frontend framework
  • Retrospective: What do I want from the frontend?
  • I finally found: HTMX: HTML Fragments over the wire

Besides simplicity, good Web Vitals performance (SEO) is a benefit of this method.

The talk will express my personal opinion, feelings and fun. It won't dive into technical details.

Thank you to https://www.djangsters.de for supporting the talk.

Slides: https://docs.google.com/presentation/d/1Gx1UGVAgD2ALLOucsIm9myF5mDflbP06-M6_d-RdZAY/edit?usp=sharing

Example Project: https://github.com/guettli/django-htmx-fun

Summary

Thomas Güttler argues that many Django applications do not need a large client-side framework or a JSON API between the database and the user interface. HTMX lets Django return complete pages initially and small HTML fragments for later interactions, using HTML attributes to request, target, and swap server-rendered content without writing much JavaScript. He explains how this approach reduced his cognitive load in a spare-time project, describes practical Django naming and view patterns, and shows examples including inline editing, lazy loading, CSS transitions, cascading selects, browser history, and out-of-band updates. He recommends HTMX for fast, mostly stateless applications such as shops, ERP systems, database frontends, CMSs, and MVPs, while noting that highly interactive, offline-first, charting, and rich client-side editor applications may be better served by JavaScript frameworks.

Key takeaways

  • HTMX adds declarative HTML attributes that let the browser fetch server responses and replace selected elements without a full-page reload.
  • A Django application can return a complete initial page and then small HTML fragments from simple function-based views for subsequent interactions.
  • Server-side validation remains essential, while client-side JavaScript can be added later only where it improves the user experience.
  • The approach suits stateless, form-heavy applications and MVPs, but is less suitable for offline-first software or interfaces with extensive client-side state.
  • HTMX supports patterns such as lazy loading, CSS transitions, cascading selects, browser history updates, targeted updates, and out-of-band swaps.
  • Güttler chose HTMX over Unpoly and Hotwire because he found its documentation and examples easier to understand and its model simpler.

Summarised automatically from the transcript.

Chapters

  1. 0:09 Introduction and Frontend Frameworks Thomas Güttler traces his journey from Python and Django through the changing landscape of frontend frameworks.
  2. 3:13 The Frontend Blues A spare-time lunch-service project leads to analysis paralysis over frontend technology and the need to reduce cognitive load.
  3. 4:52 Rethinking Server-Side Rendering The talk examines simple server-rendered forms, page updates, and why a single-page application is not always the right answer.
  4. 10:21 Fragments over the Wire Güttler introduces HTML fragments as a fast alternative to sending JSON and describes how this led him to HTMX.
  5. 12:37 How HTMX Works A step-by-step explanation of HTMX attributes, HTTP requests, fragment responses, and DOM swapping.
  6. 15:40 Declarative Web Development HTMX is compared with HTML, CSS, SQL, Django Admin, and other declarative tools, followed by a discussion of locality of behavior.
  7. 17:15 HTMX with Django Güttler presents his Django development patterns, including function-based views, fragment endpoints, and reusable HTML helpers.
  8. 20:24 Use Cases and Tradeoffs The talk covers HTMX’s strengths for fast, server-driven applications and its limitations for offline-first apps, charts, and rich client-side editors.
  9. 25:55 HTMX Examples Live examples demonstrate click-to-edit forms, lazy loading, CSS transitions, and the small amount of markup needed to use HTMX.
  10. 32:03 Questions The Q&A covers project experience, cascading selects, URL history, nested fragments, alternative libraries, forms, out-of-band updates, and graceful degradation.

Transcript

6,283 words · auto-generated Show

Automatically transcribed, so expect mistakes in names and technical terms.

0:09

Speaker 1: So first thank you that I'm allowed to speak here and thank you for the people behind Django Conference Europe. Thank you for organizing this great event My name is Thomas Güttler. I'm from Germany working for Jungstus, a software agency with a lot of experience with Python and Django. Today I want to talk about HTMX, make web development simple and fun again. So this is not an academic, too detailed or dry talk. I want it to be personal, opinionated, and a little bit of fun. So I studied computer science roughly 20 years ago and finding the right front-end framework today is really hard. In the past, things were much easier since you had less options to choose from. 1999 I wrote some small TGI scripts with Shell and Perl on Linux and it was simple and fun.

0:55

Speaker 1: Not fun were the languages. So Perl was ugly, Shell was not reliable, you don't have exceptions and Java and C<unk> too complicated. So 2001, I found Python and it was fun and easy to read 2008 I started to use Django and I don't regret this in the 13 years. I have seen a lot of hyping and going to name some Perl, Virtual Basic. Corebar, XML, XSLT, Java Uplets, and Macromedia Flash. And I'm deeply relaxed and guess that some things we love today will be called deeply created or technical depth soon. So 2014, so roughly, I came across Angular and it was amazing for me. I was mind-blowing.

1:41

Speaker 1: I thought, hey, that's the future. So the server sent JSON to the browser. So like a real application. But customers kept us busy doing the things we did before, so we keep on creating HTML on the server with um Django and with a little bit of jQuery for the interactivity. But this um equation JSON is equal and HTML is dirty somehow um was um burned into my brain. But let's talk about this later. So six years went by in a flash and last year I checked how what's the state of Angular today. So this is the stack overflow tech trend and you see here very clearly that

2:27

Speaker 1: the Angular hype is over. So if you start a new project from scratch today, it is very unlikely that will you you will use Angular. So Today they are React and Vue very hyped and I played around with React and somehow I liked it because it was a mixture, or there is a mixture, of HTML and the programming language. It somehow reminds us my reminds me of PHP, but um executed in the browser. Then I looked at Vue, it's nice too, but for both frameworks there was not so much of wow because I'm somehow a little bit lazy and uh first I need to create an endpoint maybe with a Django rest framework and then on top I create

3:13

Speaker 1: can create the front end. I'm not so much um amazed So in 2021 a friend told me how she manages her work. She has a vegan lunch service organized in Excel. It was a mess. Up to now people ordered via email and WhatsApp and the Excel sheet was edited by her for every order by hand. So I wanted to help her and since it was a spare time project and not for money, one thing was very important for me. It should be somehow some kind of fun. I need to love the technology stack and that's very different from a business context. I knew I will be coding in the evening after the kids went to bed, and this means for me only roughly 30% of my mental energy will be available, so it was very important for me to reduce cognitive load.

4:06

Speaker 1: So I created a list. For the back end it was easy. I want to use Django. But the front-end list was very long. There were so many choices and there was no favorite analysis, paralysis. I could not act because there were too many options. I created a spreadsheet to get an overview. And one thing important is very important here, I don't get paid by the hour in this context. So I want to get the things done fast and I want powerful tools. So say that's maybe different from a business context. And I want to be, I want to master the front end and the back end somehow in an easy way. One thing in this context is there's nobody telling me

4:52

Speaker 1: telling me, hey Thomas, please use tool A for task B. This freedom has a benefit I can choose, but of course it means analysis paralysis. Which tool do I want to use? So I had the front end blues. I still haven't found what I'm looking for. So what I did, I tried to relax and said, um really calm and Get rid of the pressure, relax. What do you enjoy? What do you like, Thomas? And there are some things which I like. For example, I like the Django Forms library It's an easy way to create HTML forms on the server and that's really cool way. And you can

5:38

Speaker 1: then validate the user input which you get from the client and that's very handy and that's a thing which I really Really like so. Another thing which I like is uh Django RM. So it's a very cool interface to InSQL database, so it's very clean and powerful. And there are some other things, of course, which I like as a web developer. HTTP is cool, HTML, CSS, and what I want as a user, I want a fast page load. I want to get to the URL and then bam I want this page to be visible as a user and as a developer JavaScript that's that's somehow not my not my favorite so I ask myself, Thomas, what do you want to improve?

6:25

Speaker 1: So one thing of course, I want to avoid the full page reload after submitting a file. So this very old post redirect get pattern. Oh no, I don't want this and maintaining and do it yourself, JavaScript library for submitting and reloading snippets. I don't think that's the would be fun. So let's have a look at this use case from a bird's eye's perspective. I have one page and there are several paths on this page And I want to update each part on its own. So the part one could be, for example, a news sticker, part two could be um a complex form

7:10

Speaker 1: and part three could be a chat or something like this. And if you paint this picture to a developer Most people have the answer immediately. They know it right now. They hey Thomas, you need a single page application. Oh wait, uh thinking fast, thinking slow. Let's wait, wait, wait. I have several pages. And each page should be some kind of interactive or updatable. So I don't have uh one page, no. I have several pages And each page should be yes some kind of interactive. That's what I want. And if you um reject this modern front-end framework and you talk to people and they start to argue, hey, wait, Thomas.

7:59

Speaker 1: form validation in the browser is a really cool thing and you need to use JavaScript for it. And of course it makes sense to have form validation in the browser sometimes, but overall one thing is clear. I need to validate the data on the server side if I receive it again for security reasons and just to be safe that I only um store valid data into the database and Overall HTML5 has some cool features too and yes, maybe I need form validation in JavaScript later. But not at the moment. At the moment, a simple form handling is enough for me. And re -reusing JavaScript on the back end just to reuse some three lines of code.

8:47

Speaker 1: I know this This makes no sense for me. Then if you look around the current trend, server-side rendering, it's a big hype. And I looked at the implementations of Next. js and Nux. js and But wait, somehow somehow I feel like this cartoon figure which you see here. So you have a huge stack and it's getting bigger and bigger and It's not a foundation, it's it's a huge tower and it does not feel at least for me does not feel so so stable, not like a foundation which I can build upon And so I want good web vitals and other no alternatives to modern alternatives to server side rendering. Yes, and then I found a cool page from the Google blog.

9:35

Speaker 1: It's called Rendering on the Web and it compares several ways to render HTML today on the web on the left hand side, the left column, that's a traditional approach. So you have maybe Django templates or maybe PHP, which renders HTML and which gets sent to the to to the browser and there are several ways to make this more complicated um to up to full client-side rendering and wait wait wait I think this traditional approach has a lot of benefits. It makes things quite quite easy. So I was beginning to question myself, hey Thomas, are you stupid? Are you too old

10:21

Speaker 1: or are you just strange that Everything is doing it completely different. I don't know. Is it just me? Bah! And there came the revolution. By chance I came across Unpoly. A big thank you to Henning Koch, the author of this library. He created a really cool comparison where he compares his the page speed of Angular with his approach. And it's very clear his approach is very fast. So his approach was sending HTML fragments over the wire. First I was unsure, isn't this considered dirty? What will people say if I go this way?

11:07

Speaker 1: And fragments over the wire is for me a real revolution in the truest sense of the word, because it means to evolve to something which has been the state in the past. It took me some time to get this this useless equation out of my head. So JSON is clean HTML dot you. That's nonsense. If something is clean, then it's for me SQL and Python. These things are clean and of course I need to render HTML somehow, so yes, but maybe I don't need JSON at all. So now that I have found the way I want to develop with fragments over the wire, I had analysis paralysis paralysis again. Hmm, which

11:52

Speaker 1: fragment over the wire framework should I choose? There are several, for example, unpoly, hot wire or HTMX, and I was meander meandering forward and backward and The cool thing about spare-time projects is that there is no pressure. You have freedom. You can do relaxed decisions. In business context, this is quite different. So you have deadlines and you would need to convince co-workers, employer or clients. to try out something completely new and that's quite hard these days. And so I was lucky I can decide on my own and start from scratch and I decided to use HTMX So again, let's have a look at this picture. I have one page and several parts are

12:37

Speaker 1: on this page and I want to update one part of this page. So here at the top you have some HTML, at the bottom you have some HTML, and here you have a button. And if this button gets pressed. I want to exchange this HTML with some new HTML which I get from the server. That's how fragments over the wire works. And HTMX is quite simple, it just adds some attributes to the HTML. So for example, hxget, there's an URL and hxsweb, which defines then the swap method I get a response from the server from this URL and then HTMX merges this fragment into the

13:23

Speaker 1: page using the defined method, for example outer HTML, it could be inner HTML too. So I like to onboard everybody, so let's have a look at it step by step. Once again, the user clicks on the button. So HTMX receives the click event. HTMX does an HTTP get opposed to the URL. And then the server sends a fragment or also called snippet to the browser. So it's just then fragment. There's no head HTML tag, there's no body tag, it's just in snippet. It could be a div or a table row or something like this. And then HTMX merges this fragment into the page. Yes, and that's it, that's all. And there's no big magic.

14:10

Speaker 1: The magic is the simplicity. Yo. While creating this slide, I realized HTMX, it's quite similar to and it's declarative. to some other things which I like. I like HTML though that's very similar. HTMX just as some new attributes and It's similar to CSS or SQL. It's similar to the Django admin where you in a lot of cases don't need to write code. You just define the things you want to And it's declarative like a terraform or like a Kubernetes manifest. And of course, declarative is not um this golden bullet.

14:55

Speaker 1: Somehow you need to write loops on conditions, but I like to use Python for these things okay so hmxx is in javascript library so that you can avoid javascript It works with every language on the server side and it's very small. And the cool thing about this if you follow this pattern The first page with which the user loads is a full page and this page is already complete. So you even don't need HTMX to render the first page. And this makes this um page load very fast. Here I have got some examples, but I have

15:40

Speaker 1: concerns that I run out of out of time, so I will look at these examples at the end So let's have a look at some um philosophy here. So we have separation of concerns. I guess most people of know separations of concern. It's like a rule that does even something maybe like holy, you need to separate the concerns. And I have separated the concerns several times and in the past. And for example, I separate the concerns by having several files. I have a Python file and then I have an HTML or template file and then I have some GS CSS and some JS. So I can separate these concerns. But There's a different way you can

16:27

Speaker 1: do you can mix these concerns to have more power and some call this locality of behavior. So I have back-end code and in this back-end code I yes I use format HTML and have their create an HTML string inside my Python code. And inside this string I use atomic or inline CSS. So I have all the things which I need in one place and this gives me a lot of power and makes me feel productive. So up to now I have just talking about some boring HTML extension. We are here at a Django conference, so what does this mean for me or you as a Django developer?

17:15

Speaker 1: So my way of developing Django application has changed. I now write small methods returning small fragments. And this means I switched back to function-based views instead of class-based views. because this somehow feels more easy and simple. And of course string is super cool. I use format HTML which uses conditional escape in the background so I am on the safe side that no um HTML injection can happen here. So that's a very cool thing with these powerful tools and I hardly use a Django template in this context anymore. So I discovered some naming patterns

18:02

Speaker 1: which make sense to me and maybe you like them. I want to share them with you. I have two function-based views and I have two contexts. I either I want to create a full page and then I have a method and I use a suffix underscore page And this read method returns an HTTP response and this HTTP response contains a whole page. So you have an HTML tag, a head tag, a body tag, and so on. And I call this URL user usually foo, so without underscore page here. And if I have a function-based view which should return only a fragment, I name this method underscore hx.

18:48

Speaker 1: So I'm Yes, I I I have this naming pattern to to to understand the code easier, which makes it more fun for me. And this only returns a fragment. So this could be a div, a table row or yeah something like this. And here I leaks the name into the URL namespace. So this URL is called foo underscore hx. And I think that's perfectly fine because the average user only sees this URL. That's the first page which gets loaded And if the user wants to share or bookmark this page, that's the URL he sees. And of course he could see these other Ajax calls in the background. but only um experienced developers open dev

19:35

Speaker 1: tools and then have looks. So I think it's perfectly fine to leak this HX into the URL namespace. It makes it easier for me to understand what's going on if I have an exception or something like this. Of course, now we have these two function-based views And sometimes I want to reuse an HTML snippet. So I want to use an HTML snippet in several places, and then I create a method which Just creates HTML and to make things more obvious I use the naming pattern here underscore HTML and this can then be return used in a fragment response or in a page response. But this is just my personal pattern.

20:24

Speaker 1: You can develop HTMX the way you want. To sum it up, HTMX is great for a super fast largest content full paint. So to get a first-time user experience and a fast page load. compare this for example to loading Gmail. Gmail loading for me for the for the first time if I load Gmail, it's I have this loading indicator and no, I don't want this. I want my page to be fast and immediately available. So I think HTMX is great for professional, serious, maybe a bit boring, stateless applications like shops, ERP systems or database frontend. And I think

21:10

Speaker 1: HTMX is very well suited for an MVP, so you create a prototype and then you optimize later to have maybe less server on. trips or maybe add later than a little bit of client-side form um validation to to increase the user experience but that's only some sugar and of course there you you you use then um JavaScript. So HTMX is not so well suited for offline first applications because the server plays a central role here. Without a server, this application won't run. I have no clue how to create an offline first application with HTMX. If you have a cool idea, please tell me. And there are a lot of interactive chart libraries

21:58

Speaker 1: out there, and they usually want some JSON data, and of course this makes sense to reuse these chart libraries and They are HMX makes no sense or uh what you see is what you get editor. That's uh that's an area of JavaScript on the client side, of course. So first let's rethink what uh how I changed my mind in so six or seven years ago I came across Angular and thought boah Angular that's the future that's so cool and I I created this picture here. So I have a server and the server contains the nice tasty data

22:44

Speaker 1: as SQL. And there I have some JSON API, so I can use it for machine-to-machine communications this API. And I could then build upon this JSON API. some cool um interface with ein heavy uh frontend framework like angular react view or pine trails I could do this, but somehow I switched my mind because I think there are two very different use cases And again, I have SQL on my server and I want to create a nice user interface. So and there, of course, I will use HTML and If I want to get from

23:30

Speaker 1: SQL to a nice user interface, I just need HTML and on this road, at least I don't need JSON. And here's my use use case. I want to improve daily. I want to have continuous integration, continuous development. So push out new features soon and in small steps. And maybe I want to do some A B testing. No, now I look at this. The other use case is in stable API. You don't do A-B testing on an on an API for a machine-to-machine communication. Of course here, JSON makes sense. And there 's a Django Rest framework is great so you can

24:16

Speaker 1: give other systems access to your database models. So I think there are two use cases and these two use cases should use a different way to get the data to the consumer then. So is this the end of the Odyssey? Maybe it's just the beginning. At least I solved my frontend blues and found HGMX and now I can focus and um my mental energy to get me to to uh to to get me to my goal and i have i have easy and lightweight tool so So I was quite fast, but we have the examples. First I want to say thank you to my employer, the gangsters.

25:04

Speaker 1: We are a cool company working on Python and Django and of course we have React developers and JavaScript experts. So if you want to get things done, please contact us. And

25:18

Speaker 2: managing multiple general services in a single room.

25:21

Speaker 3: Okay, Thomas. Thank you so much.

25:28

Speaker 1: So if I have enough time, I was unsure how fast I am. So I would like to get to the examples now. And please interrupt me.

25:36

Speaker 2: Please interrupt me if time is over. Okay.

25:39

Speaker 3: Okay, no problem.

25:41

Speaker 2: Okay.

25:42

Speaker 1: So can you see my screen now here? I want to see HTMX. Click to edit. Could you please confirm that the users can see this?

25:54

Speaker 2: Yes.

25:55

Speaker 1: Okay, thanks. Thanks. So I enlarge the font a little bit. Here's a small demo, so let's have a look at how it works. This is plain HTML here and I have a button click to edit. If I press this button Boom, then HTMX contacts the server and fetches an HTML fragment from the server and puts this fragment into this place here, for example, a form. Then I can update my form here and I could Submit it and again in the background HTMX takes my data,

26:41

Speaker 1: sends it to the server. The server replies with some plain HTML, and HTMX inserts the HTML. into this part here. So and the nice thing about the examples here, um I just to recall, I'm at I am at the official HTMX homepage and I'm here at the examples. And these examples all have a nice feature. At the bottom you can see what you have done. So it's only a fake server here in the background And you can see what has happened here. So the initial state was that I have this div and this div has some special attributes. For example Example hx target means please update.

27:28

Speaker 1: This div and you have an swap method Then you have this button within HX get and so on. And here you you see it's like HTML with a little bit of HTMX sugar. And if I click on the button Then I get my form from the server. This again has some tiny HTMX attributes. For example, this form should be then sent via HTTP to the server. and then an HX web should happen. Okay, so I filled out the form, I pressed the submit button, and the third

28:13

Speaker 1: event is this that the form gets sent to the server and the server replies again with a read-only div of the data which is in the database And yes, that's that's easy, that's simple, that's the way I like it. And somehow I I think why hasn't this been invented somehow earlier? Maybe this should this even should be an official um World Wide Web standard But let's have a look uh at some other examples. So we have a special event here. It's a trigger event revealed

29:00

Speaker 1: And that's something very cool. The HTMX triggers the revealed event as soon as the HTML gets into the viewable part of the page. So let's have a look. I scroll to the bottom and I see the loading indicator. And then HTMX patches the new data from the server and inserts it into this page. And if I scroll down again. I again hit the place where this revealed event gets triggered and I get new data from the server. And it's So simple, I can create such a lazy loading here without writing a single line of JavaScript myself.

29:46

Speaker 1: And this really um yeah fascinated me So let's have a look at another example um animations HTMX does a fancy trick so that you can very easily define um CSS transitions. So During this swapping phase, HTMX adds um CSS classes to the elements so that you can use these classes to create CSS transitions. Just have a look at this fade out

30:31

Speaker 1: demo. There's a button and if I click on it, it will fade out. Wom, so it's gone. And this is very easy from a developer perspective. You just need to find this HTMX swapping attribute. Put on this class some CSS style and you can say opacity zero, so at the end zero, it should be invisible, and then you can find can define the transition to make it um fade away this button. The same thing works for um fading in. So it's here roughly the same. If you click on this button

31:16

Speaker 1: And the fading in will be done via the HTMX settling CSS class. Yes. And for me it's a very simple way to do front-end development, especially since I like to keep it simple and easy. So then I reached the end of my talk. I could talk for hours, but of course I want to be here to answer your questions. So that's it. Thank you for listening. And let's meet in the Jitsi room here at the bottom

32:03

Speaker 1: So now I hope you can see me and hear me, oh technology. So great. So I'm here at Tritsi and I see a lot of yeah letters and some faces here. So yes, please speak up. I'm here to answer your questions.

32:23

Speaker 4: Yeah, I uh thanks for your talk. I really liked it uh because it's something I I've been looking I think in this dichotomy of uh Some I have some projects where I need like a very kind of interactive front end where I need to do stuff in the browser and then I'm using View, but I have other places where I need just a regular simple app. And I I had I didn't know how to go about it because one of the things I'd really like about the front end frameworks view and and stuff is that you can very easily comp componentize your frontend bits in small chunks. And that was something that I found it hard to do in Django somehow, even with

33:10

Speaker 4: creating your own custom. template tags and all of that. I just didn't like but this is amazing. I really like this. I wanna try this now. How long have you been using this and how long did it take you to choose between the the different solutions and

33:25

Speaker 1: Yeah. It it took me some time to to settle on HTMX because there are several frameworks which which go this way and I'm using it so today we have June. So like uh since five months I use it now. So I'm still fresh, but nevertheless I want to talk about it because it's so much fun. And it's very easy. So um So it could you you said template tags. I don't use template tags here, I use just plain Python and format HTML and um stack it together the way I like. And it works for me very well. I don't say it's a golden bullet for every use case. You said for example, if you have a lot of interaction and and client-side

34:10

Speaker 1: state Then it makes no sense. So if you have a database front end which is a little bit of of boring and maybe a lot of complex forms, in this case HTMX makes sense, yeah Okay.

34:26

Speaker 4: Yes, yes. How large is like you have built one larger large ish application with it or

34:32

Speaker 1: one one application I built with it, yeah.

34:36

Speaker 4: Cool, cool, thanks. Thank you.

34:39

Speaker 1: Yeah, thank you. So don't be shy, speak up. Daniel, you want to speak? I can't hear you, Daniel.

34:53

Speaker 5: Okay, yeah, I'm here. Um yeah, I I was Wondering whether you'd manage to sell it to your employer to use in the in their business.

35:02

Speaker 1: That's a really good question. No, up to now not. Um because we have uh At at work we have an application which is um several years old and there is no time to rewrite something from scratch. So um at my employee I'm a senior software backend developer. I keep on doing back-end stuff. But I think as soon as our agency has this matching topic, we will we could use HTMX for it So up to now, as I said, it was just a spare time project, but which worked out very easily and very fine. And maybe we will use it in the business context in the future.

35:45

Speaker 5: Mm-hmm. Okay. And one other question was um do you think it would work for a a CMS type application where you have to swap from from one page To to to another with mm with the same template but different content that might be spread across the whole page.

36:05

Speaker 1: I I think uh for a CMS application it would fit, yes.

36:09

Speaker 5: Okay.

36:17

Speaker 1: Okay, please speak up. Any questions or comments you have? I'm here to answer your question.

36:25

Speaker 4: There are some some people speaking in the chat.

36:28

Speaker 1: Oh, I don't see the chat, sorry. Uh I have not looked at it yet. Ah, thank you. Thank you. Can you give my GitHub link? No, my my project I developed in spare time is not open source, at least not up to now. Um but the overall pattern is so easy. I think you don't need so many just use it. If you know Django, if you know HTML, I think you will you get the concept quite um soon. At least I don't have uh examples here at the moment. I have a one one I have one small, but it's not a a big application. Adam, you ask, Abra, at least there's Django HTMX.

37:15

Speaker 1: Yes, um Adam has um a Django HTMX integration So next question here is hi Thomas, really cool library. How can I implement cascaded drop-down selects with HTMX? Just go to the examples. There is an example on the HGMX homepage and which exactly implements this cascading drop-down. They have cars. So if you first you choose BMW or Audi and then you choose the type of car you want to have. Just look at the examples on the homepage. So next question, will there any page reload while HTMX

38:02

Speaker 1: merge fragments? No, no. So um HTMX does not reload um the whole page except told told to do so So next question, is there any feature routing one UL to the other? Um No, also at least I think you don't need this um URL routing. You have your URLs. py in in Django and there you define your URLs and then you call your URLs. So at least I think you don't need this kind of URL routing here. With HTMX. So it's plain Django.

38:49

Speaker 5: Okay. I I think that was about uh changing the the the the uh URL history.

38:56

Speaker 1: Ah the URL history, of course. Yes, yes you can. You can update the URL history. So if you want to, you create you can create a single page application. You can update the URL of the browser. So that you have an in history and you can different bookmarks and so on. And of course this works here. So thank you, thank you for the update. I did not understand the question so. Hi Thomas. If the returned HTML contains HTMX text Does it automatically recognize them and patch them? Yes, of course, yes. So the these fragments which you get from the server and which get merged into the DOM, they can contain HTMX again. So it's a little bit of recursive. Yeah,

39:41

Speaker 5: okay. One other question I thought of. Um obviously hot wire and uh you mentioned another uh solution and I think Alpin Alpin and JS as well.

39:52

Speaker 1: I think Alpine JS is different now.

39:54

Speaker 5: Okay, all right. But did you specifically decide against the other two offerings or

40:01

Speaker 1: Yes, yes, yes. I think Unpoly and Hotwire are cool solutions too. Somehow it was for me that HTMX is somehow simpler. I go to the homepage htmx. org I see the examples, I see the talks, and I understand it immediately. For example, in Hotwire there there's a lot of like marketing blah blah and I somehow don't get the the the the real magic behind it Maybe I'm too stupid. So um HTMX was easy to understand for me. And unpoly is somehow it's it's older. And it's a little bit settled. So HTMX is a more new SARS development. And so I settled on HTMX.

40:42

Speaker 5: Okay. Good.

40:46

Speaker 1: So, um some more questions here. I'm curious, are forms the only mechanism available to submit data to the server? And if so, does the sets ever present a problem monopoly. So I follow the usual pattern if I want to submit data to the server, I use a form. But uh HTMX allows you to make a div a form too. So you could use uh use HTMX to avoid forms. But overall for me I forms don't cost money. I create the form tag and then I have the things together. You can submit data via HTMX without forms too. Yes.

41:31

Speaker 1: That's uh That's possible. So next question from Michael. Is it possible an HTMX component to trigger another one? Hm, at least for me I would answer this like this do you have um and some some kind of button and if the user presses this button you don't want this button to repr to be replaced but you want to update Something else, maybe an icon at the top or something like that.

42:07

Speaker 6: Exactly. Maybe the notification icon, for example, uh based on a server action.

42:12

Speaker 1: Genau, okay. And then you can uh um specify the target. There's an attribute called hx target And there you can define which element in the DOM should get updated. So you don't um this was just an example with the button. It's very likely that you that you press a button and want to update something else. So you have you can specify a target here, yes. And to add something here, you have um out of band data too. This means the server can send a fragment to the client And there you can add out of band data so you can update something else. That's something very cool, for example, you have an order page and you you update um

42:58

Speaker 1: one order row then the count on this row increases and maybe you have a shopping cart icon at the top with the number of um items in this card and you can update this thing too with out of band data. Okay. Adam Chains has some link here to examples. If you want to go there, have a look. I think we still have some seconds, so speak up if you have a question.

43:35

Speaker 4: I think you missed Israel's question maybe.

43:38

Speaker 1: Israel's um Israel, okay. How it degrades in case of a JS3 environment Okay, if you don't have JavaScript at all, then all these special tags get ignored. And if you want to optimize for the use case, so if you have this use case, then you could Do maybe always do a full page reload every time a fragment update would happen. That's a strange use case, at least for me, because all my clients have JavaScript. But I think you can use HTMX to get something to make both happy, JavaScript-free and with JavaScript, yeah Uh

44:18

Speaker 4: tying a bit into that question, um do you know if there's a way to do server-side rendering with this to support those scenarios and also just and initial page loads and some other scenarios where that might be needed.

44:30

Speaker 1: Yes, server-side rendering you do with a Django function-based view which returns HTML Okay, next talk starts. See you folks, thank you for listening.

Questions this talk answers

How does HTMX update part of a page without a full-page reload?

HTMX adds attributes such as `hx-get` and `hx-swap` to HTML. When an event occurs, it requests an HTML fragment from the server and merges that fragment into the DOM using the specified swap method.

Discussed at 12:37

How do I use HTMX with Django?

The speaker uses small function-based Django views that return either complete pages or HTML fragments, often generating the HTML with Python’s `format_html`. He names full-page views with a `_page` suffix and fragment views with `_hx`.

Discussed at 17:15

What types of applications is HTMX best suited for?

HTMX is well suited to fast, stateless applications such as shops, ERP systems, database frontends, and MVPs. It is less suitable for offline-first apps, highly interactive client-side state, chart libraries that require JSON, and browser-based editors.

Discussed at 21:10

How do I implement lazy loading with HTMX?

Use HTMX’s `revealed` trigger, which fires when an element enters the visible part of the page. The server can then return more HTML, allowing lazy loading without writing custom JavaScript.

Discussed at 29:00

How can I add CSS animations with HTMX?

HTMX adds CSS classes during the swapping and settling phases. You can define CSS transitions on those classes to create effects such as fading elements in or out.

Discussed at 29:46

How do I create cascading dropdowns with HTMX?

The speaker points to the official HTMX examples, which include cascading selects—for example, choosing a car make and then loading the available models.

Discussed at 37:15

Does HTMX reload the whole page when it merges a fragment?

No. HTMX updates only the targeted part of the page; it reloads the entire page only if explicitly instructed to do so.

Discussed at 38:02

Can HTMX update the browser URL and history?

Yes. HTMX can update the browser URL and history, allowing users to bookmark different states or views even when the application behaves like a single-page application.

Discussed at 38:56

Can an HTMX response contain more HTMX attributes?

Yes. Fragments returned by the server can contain HTMX attributes themselves, so newly inserted elements can participate in further HTMX interactions.

Discussed at 38:56

Can I submit data with HTMX without using a form?

Yes. Forms are the usual approach, but HTMX can also submit data from other elements, such as a `div`, without requiring a form tag.

Discussed at 40:46

How can one HTMX action update a different component on the page?

Set an `hx-target` to identify the element that should be updated rather than the element that triggered the action. HTMX also supports out-of-band responses for updating additional elements, such as a cart count.

Discussed at 42:12

What happens if JavaScript is disabled when using HTMX?

Without JavaScript, the HTMX-specific attributes are ignored. To support that case, the application can fall back to performing full-page reloads instead of fragment updates.

Discussed at 43:38

Can I use server-side rendering with HTMX?

Yes. A Django function-based view can render and return HTML on the server, supporting server-side rendering for initial page loads and other scenarios where it is needed.

Discussed at 44:30

Note: We understand that names change, people change, and bodies change. We respect each individual's journey and privacy. If you have any concerns about a video or need us to remove content, please don't hesitate to contact us. We will handle your request with care and promptly address any issues.

More videos by Thomas Güttler

More videos from DjangoCon Europe