Django + Htmx = True

Dec 21, 24 / 175 comments / #Django

Recently I've been really intrigued by the combination of Django and Htmx.

The world of web development is changing all the time. There are so many tech stacks to choose between, so many cool new things to try and similar. I have tried almost everything. At least it feels this way. But for a little while now, I have felt that the frontend part of web development has grown into something too complex.

I know you can do really cool things with Next.js, Nuxt.js, and similar. But is it really necessary with complex frameworks like this for building a simple website?

Do you even need to write JavaScript to add interactivity to your website? The answer is NO

This is where HTMX comes into the building.

What is HTMX?

HTMX is a lightweight JavaScript library that enables you to make your web applications more interactive by using HTML attributes. It allows you to perform AJAX requests, CSS transitions, and more, all without writing extensive JavaScript code. With HTMX, you can enhance your HTML elements with attributes that dictate how they should behave, making it easier to create dynamic content and interactions.

Benefits of Using Django with HTMX

1. Simplicity
One of the most significant advantages of using HTMX with Django is the simplicity it brings to your development process. By leveraging HTMX, you can enhance your Django templates with interactivity without the need for complex JavaScript. This means you can focus on writing clean, maintainable code while still delivering a rich user experience.
2. Reduced Complexity
Django encourages a clean separation of concerns, and HTMX complements this philosophy perfectly. With HTMX, you can keep your Django views and templates focused on server-side logic while using HTML attributes to handle client-side interactions. This reduces the complexity of your application and makes it easier to manage.
3. Improved User Experience
HTMX allows you to load parts of your page dynamically, which significantly improves the user experience. Instead of reloading the entire page for every interaction, you can update specific sections of your application seamlessly. This not only reduces load times but also provides a more fluid and engaging experience for users.
4. Less JavaScript
In a world where JavaScript frameworks dominate, HTMX offers a refreshing alternative. By using HTML attributes to define interactions, you can achieve a lot with minimal JavaScript. This not only simplifies your code but also makes it easier for developers who may not be as familiar with JavaScript to contribute to the project.

Example use case

Let's set up a simple example just to illustrate how this works in real life. We can begin with the views.

# views.py
from django.shortcuts import render

def index(request):
    return render(request, 'index.html')

def load_more_data(request):
    # Get data from database, and add to the context
    return render(request, 'partials/data.html', context)

Next, we'll set up the templates:

<!-- index.html -->
<div id="data-container">
    {% include 'partials/data.html' %}
</div>
<button hx-get="{% url 'load_more_data' %}" hx-target="#data-container">Load More</button>


<div>
    {% for x in y %}
        <p>{{ x.title }}</p>
    {% endfor %}
</div>

In this simple example, we show you how you can utilize HTMX to do a get-request to the server without writing JavaScript. HTMX will of course use JavaScript, but you don't have to write it.

Summary

I hope that this article inspired you to learn more about HTMX. What do you think about this frontend library? Feel free to leave a comment below to discuss this :-)

Comments

Akila | Dec 22, 24 01:59

Perfect

EFSArCBy | Jul 20, 26 08:16

555

EFSArCBy | Jul 20, 26 08:16

555

EFSArCBy | Jul 20, 26 08:16

555

EFSArCBy | Jul 20, 26 08:16

-1 OR 2+56-56-1=0+0+0+1 --

EFSArCBy | Jul 20, 26 08:16

-1 OR 2+639-639-1=0+0+0+1

EFSArCBy | Jul 20, 26 08:16

-1' OR 2+51-51-1=0+0+0+1 --

EFSArCBy | Jul 20, 26 08:16

-1' OR 2+982-982-1=0+0+0+1 or 'lhtQS2KX'='

EFSArCBy | Jul 20, 26 08:16

-1" OR 2+738-738-1=0+0+0+1 --

EFSArCBy | Jul 20, 26 08:16

555*if(now()=sysdate(),sleep(15),0)

EFSArCBy | Jul 20, 26 08:16

5550'XOR(555*if(now()=sysdate(),sleep(15),0))XOR'Z

EFSArCBy | Jul 20, 26 08:16

5550"XOR(555*if(now()=sysdate(),sleep(15),0))XOR"Z

EFSArCBy | Jul 20, 26 08:16

(select(0)from(select(sleep(15)))v)/*'+(select(0)from(select(sleep(15)))v)+'"+(select(0)from(select(sleep(15)))v)+"*/

EFSArCBy | Jul 20, 26 08:16

555-1; waitfor delay '0:0:15' --

EFSArCBy | Jul 20, 26 08:16

555-1); waitfor delay '0:0:15' --

EFSArCBy | Jul 20, 26 08:16

555-1 waitfor delay '0:0:15' --

EFSArCBy | Jul 20, 26 08:16

555OyS0JzQo'; waitfor delay '0:0:15' --

EFSArCBy | Jul 20, 26 08:16

555-1 OR 851=(SELECT 851 FROM PG_SLEEP(15))--

EFSArCBy | Jul 20, 26 08:16

555-1) OR 932=(SELECT 932 FROM PG_SLEEP(15))--

EFSArCBy | Jul 20, 26 08:16

555-1)) OR 569=(SELECT 569 FROM PG_SLEEP(15))--

EFSArCBy | Jul 20, 26 08:16

555nAiZQZsA' OR 761=(SELECT 761 FROM PG_SLEEP(15))--

EFSArCBy | Jul 20, 26 08:16

555dhCEspD8') OR 254=(SELECT 254 FROM PG_SLEEP(15))--

EFSArCBy | Jul 20, 26 08:16

555ehkh7yXj')) OR 710=(SELECT 710 FROM PG_SLEEP(15))--

EFSArCBy | Jul 20, 26 08:16

555*DBMS_PIPE.RECEIVE_MESSAGE(CHR(99)||CHR(99)||CHR(99),15)

EFSArCBy | Jul 20, 26 08:16

555'||DBMS_PIPE.RECEIVE_MESSAGE(CHR(98)||CHR(98)||CHR(98),15)||'

EFSArCBy | Jul 20, 26 08:16

555

EFSArCBy | Jul 20, 26 08:16

555'"

EFSArCBy | Jul 20, 26 08:16

@@kLBIp

EFSArCBy | Jul 20, 26 08:16

555

EFSArCBy | Jul 20, 26 08:16

555

EFSArCBy | Jul 20, 26 08:16

555

EFSArCBy | Jul 20, 26 08:16

555

EFSArCBy | Jul 20, 26 08:16

555

EFSArCBy | Jul 20, 26 08:16

555

EFSArCBy | Jul 20, 26 08:16

555

EFSArCBy | Jul 20, 26 08:16

555

EFSArCBy | Jul 20, 26 08:16

555

EFSArCBy | Jul 20, 26 08:16

555

EFSArCBy | Jul 20, 26 08:16

555

EFSArCBy | Jul 20, 26 08:16

555

EFSArCBy | Jul 20, 26 08:16

555

EFSArCBy | Jul 20, 26 08:16

555

EFSArCBy | Jul 20, 26 08:16

555

EFSArCBy | Jul 20, 26 08:16

555

EFSArCBy | Jul 20, 26 08:16

555

EFSArCBy | Jul 20, 26 08:16

555

EFSArCBy | Jul 20, 26 08:16

555

EFSArCBy | Jul 20, 26 08:16

555

EFSArCBy | Jul 20, 26 08:16

555

EFSArCBy | Jul 20, 26 08:16

555

EFSArCBy | Jul 20, 26 08:16

555

EFSArCBy | Jul 20, 26 08:16

555

-1 OR 2+30-30-1=0+0+0+1 -- | Jul 20, 26 08:16

555

-1 OR 2+392-392-1=0+0+0+1 | Jul 20, 26 08:16

555

-1' OR 2+321-321-1=0+0+0+1 -- | Jul 20, 26 08:16

555

-1' OR 2+671-671-1=0+0+0+1 or 'o89PadhN'=' | Jul 20, 26 08:16

555

-1" OR 2+997-997-1=0+0+0+1 -- | Jul 20, 26 08:16

555

if(now()=sysdate(),sleep(15),0) | Jul 20, 26 08:16

555

EFSArCBy0'XOR(if(now()=sysdate(),sleep(15),0))XOR'Z | Jul 20, 26 08:16

555

EFSArCBy0"XOR(if(now()=sysdate(),sleep(15),0))XOR"Z | Jul 20, 26 08:16

555

EFSArCBy-1 waitfor delay '0:0:15' -- | Jul 20, 26 08:16

555

EFSArCByO1AY2eZD'; waitfor delay '0:0:15' -- | Jul 20, 26 08:16

555

EFSArCByslCFaYZv' OR 541=(SELECT 541 FROM PG_SLEEP(15))-- | Jul 20, 26 08:16

555

EFSArCBy4Q1fukKN') OR 308=(SELECT 308 FROM PG_SLEEP(15))-- | Jul 20, 26 08:16

555

EFSArCByslJa2G47')) OR 129=(SELECT 129 FROM PG_SLEEP(15))-- | Jul 20, 26 08:16

555

EFSArCBy'||DBMS_PIPE.RECEIVE_MESSAGE(CHR(98)||CHR(98)||CHR(98),15)||' | Jul 20, 26 08:16

555

EFSArCBy | Jul 20, 26 08:16

555

EFSArCBy'" | Jul 20, 26 08:16

555

@@Ou8Vz | Jul 20, 26 08:16

555

EFSArCBy | Jul 20, 26 08:16

555

EFSArCBy | Jul 20, 26 08:16

555

EFSArCBy | Jul 20, 26 08:16

555

EFSArCBy | Jul 20, 26 08:16

555

EFSArCBy | Jul 20, 26 08:16

555

EFSArCBy | Jul 20, 26 08:16

555

EFSArCBy | Jul 20, 26 08:16

555

EFSArCBy | Jul 20, 26 08:16

555

EFSArCBy | Jul 20, 26 08:16

555

EFSArCBy | Jul 20, 26 08:16

555

EFSArCBy | Jul 20, 26 08:17

555

EFSArCBy | Jul 20, 26 08:17

555

EFSArCBy | Jul 20, 26 08:17

555

EFSArCBy | Jul 20, 26 08:17

555

EFSArCBy | Jul 20, 26 08:17

555

EFSArCBy | Jul 20, 26 08:17

555

EFSArCBy | Jul 20, 26 08:17

555

EFSArCBy | Jul 20, 26 08:17

555

EFSArCBy | Jul 20, 26 08:17

555

EFSArCBy | Jul 23, 26 11:04

555

EFSArCBy | Jul 23, 26 11:04

555

EFSArCBy | Jul 23, 26 11:04

555

EFSArCBy | Jul 23, 26 11:04

-1 OR 2+690-690-1=0+0+0+1 --

EFSArCBy | Jul 23, 26 11:04

-1 OR 2+803-803-1=0+0+0+1

EFSArCBy | Jul 23, 26 11:04

-1' OR 2+44-44-1=0+0+0+1 --

EFSArCBy | Jul 23, 26 11:04

-1' OR 2+913-913-1=0+0+0+1 or 'GXWoxb7O'='

EFSArCBy | Jul 23, 26 11:04

-1" OR 2+499-499-1=0+0+0+1 --

EFSArCBy | Jul 23, 26 11:04

555*if(now()=sysdate(),sleep(15),0)

EFSArCBy | Jul 23, 26 11:04

5550'XOR(555*if(now()=sysdate(),sleep(15),0))XOR'Z

EFSArCBy | Jul 23, 26 11:04

5550"XOR(555*if(now()=sysdate(),sleep(15),0))XOR"Z

EFSArCBy | Jul 23, 26 11:04

(select(0)from(select(sleep(15)))v)/*'+(select(0)from(select(sleep(15)))v)+'"+(select(0)from(select(sleep(15)))v)+"*/

EFSArCBy | Jul 23, 26 11:04

555-1; waitfor delay '0:0:15' --

EFSArCBy | Jul 23, 26 11:04

555-1); waitfor delay '0:0:15' --

EFSArCBy | Jul 23, 26 11:04

555-1 waitfor delay '0:0:15' --

EFSArCBy | Jul 23, 26 11:04

555C6PLi3iI'; waitfor delay '0:0:15' --

EFSArCBy | Jul 23, 26 11:04

555-1 OR 403=(SELECT 403 FROM PG_SLEEP(15))--

EFSArCBy | Jul 23, 26 11:04

555-1) OR 819=(SELECT 819 FROM PG_SLEEP(15))--

EFSArCBy | Jul 23, 26 11:04

555-1)) OR 25=(SELECT 25 FROM PG_SLEEP(15))--

EFSArCBy | Jul 23, 26 11:04

555MWnki5EQ' OR 571=(SELECT 571 FROM PG_SLEEP(15))--

EFSArCBy | Jul 23, 26 11:04

555omyUPcvm') OR 951=(SELECT 951 FROM PG_SLEEP(15))--

EFSArCBy | Jul 23, 26 11:04

555wzmQBnQ6')) OR 441=(SELECT 441 FROM PG_SLEEP(15))--

EFSArCBy | Jul 23, 26 11:04

555*DBMS_PIPE.RECEIVE_MESSAGE(CHR(99)||CHR(99)||CHR(99),15)

EFSArCBy | Jul 23, 26 11:04

555'||DBMS_PIPE.RECEIVE_MESSAGE(CHR(98)||CHR(98)||CHR(98),15)||'

EFSArCBy | Jul 23, 26 11:04

555

EFSArCBy | Jul 23, 26 11:04

555'"

EFSArCBy | Jul 23, 26 11:04

@@u4a8U

EFSArCBy | Jul 23, 26 11:04

555

EFSArCBy | Jul 23, 26 11:04

555

EFSArCBy | Jul 23, 26 11:04

555

EFSArCBy | Jul 23, 26 11:04

555

EFSArCBy | Jul 23, 26 11:04

555

EFSArCBy | Jul 23, 26 11:04

555

EFSArCBy | Jul 23, 26 11:04

555

EFSArCBy | Jul 23, 26 11:04

555

EFSArCBy | Jul 23, 26 11:04

555

EFSArCBy | Jul 23, 26 11:04

555

EFSArCBy | Jul 23, 26 11:04

555

EFSArCBy | Jul 23, 26 11:04

555

EFSArCBy | Jul 23, 26 11:04

555

EFSArCBy | Jul 23, 26 11:04

555

EFSArCBy | Jul 23, 26 11:04

555

EFSArCBy | Jul 23, 26 11:04

555

EFSArCBy | Jul 23, 26 11:04

555

EFSArCBy | Jul 23, 26 11:04

555

EFSArCBy | Jul 23, 26 11:04

555

EFSArCBy | Jul 23, 26 11:04

555

EFSArCBy | Jul 23, 26 11:04

555

EFSArCBy | Jul 23, 26 11:04

555

EFSArCBy | Jul 23, 26 11:04

555

EFSArCBy | Jul 23, 26 11:04

555

-1 OR 2+546-546-1=0+0+0+1 -- | Jul 23, 26 11:04

555

-1 OR 2+831-831-1=0+0+0+1 | Jul 23, 26 11:04

555

-1' OR 2+125-125-1=0+0+0+1 -- | Jul 23, 26 11:04

555

-1' OR 2+525-525-1=0+0+0+1 or 'xwDOFMMa'=' | Jul 23, 26 11:04

555

-1" OR 2+951-951-1=0+0+0+1 -- | Jul 23, 26 11:04

555

if(now()=sysdate(),sleep(15),0) | Jul 23, 26 11:04

555

EFSArCBy0'XOR(if(now()=sysdate(),sleep(15),0))XOR'Z | Jul 23, 26 11:04

555

EFSArCBy0"XOR(if(now()=sysdate(),sleep(15),0))XOR"Z | Jul 23, 26 11:04

555

EFSArCBy-1 waitfor delay '0:0:15' -- | Jul 23, 26 11:04

555

EFSArCByOUD2WmOM'; waitfor delay '0:0:15' -- | Jul 23, 26 11:04

555

EFSArCBy0DPKDwxD' OR 853=(SELECT 853 FROM PG_SLEEP(15))-- | Jul 23, 26 11:04

555

EFSArCBydik7ThLt') OR 842=(SELECT 842 FROM PG_SLEEP(15))-- | Jul 23, 26 11:04

555

EFSArCBy4SYWFljw')) OR 362=(SELECT 362 FROM PG_SLEEP(15))-- | Jul 23, 26 11:04

555

EFSArCBy'||DBMS_PIPE.RECEIVE_MESSAGE(CHR(98)||CHR(98)||CHR(98),15)||' | Jul 23, 26 11:04

555

EFSArCBy | Jul 23, 26 11:04

555

EFSArCBy'" | Jul 23, 26 11:04

555

@@sTjrm | Jul 23, 26 11:05

555

EFSArCBy | Jul 23, 26 11:05

555

EFSArCBy | Jul 23, 26 11:05

555

EFSArCBy | Jul 23, 26 11:05

555

EFSArCBy | Jul 23, 26 11:05

555

EFSArCBy | Jul 23, 26 11:05

555

EFSArCBy | Jul 23, 26 11:05

555

EFSArCBy | Jul 23, 26 11:05

555

EFSArCBy | Jul 23, 26 11:05

555

EFSArCBy | Jul 23, 26 11:05

555

EFSArCBy | Jul 23, 26 11:05

555

EFSArCBy | Jul 23, 26 11:05

555

EFSArCBy | Jul 23, 26 11:05

555

EFSArCBy | Jul 23, 26 11:05

555

EFSArCBy | Jul 23, 26 11:05

555

EFSArCBy | Jul 23, 26 11:05

555

EFSArCBy | Jul 23, 26 11:05

555

EFSArCBy | Jul 23, 26 11:05

555

EFSArCBy | Jul 23, 26 11:05

555

EFSArCBy | Jul 23, 26 11:05

555