Introduc�on to HTMX

Ge�ng Started

Atributes

hx-get

hx-post

hx-put

hx-delete

Ac�ons

hx-trigger

hx-confirm

hx-select

Django Example

1. Introduc�on to HTMX
HTMX is a library that enables you to create dynamic and interac�ve web applica�ons with ease. It
allows you to update parts of a web page without having to write extensive JavaScript code. HTMX
relies on HTML atributes and ac�ons to handle interac�ons and make requests to the server, making
it a powerful tool for enhancing user experiences.

2. Ge�ng Started
To get started with HTMX, you need to include the HTMX script in your HTML file. You can download
it from the official HTMX website or include it from a content delivery network (CDN):

<script src="https://unpkg.com/htmx.org@latest/dist/htmx.js"></script>

Once you've included the HTMX script, you can start adding HTMX atributes and ac�ons to your
HTML elements.

3. Atributes
HTMX atributes are used to define the behavior of HTML elements. These atributes are prefixed
with "hx-" and provide instruc�ons to HTMX on how to handle interac�ons.

a. hx-get
The hx-get atribute is used to fetch content from the server and replace the content of the current
element with the response. Here's an example:

<button hx-get="/api/data" hx-target="#result">Fetch Data</button>

<div id="result">Data will be displayed here.</div>

In this example, when the "Fetch Data" buton is clicked, HTMX makes a GET request
to /api/data and updates the content of the #result div with the response.

b. hx-post
The hx-post atribute is used to send data to the server using a POST request. It can be combined
with other atributes like hx-target to specify where the response should be placed. Here's an
example:

<form hx-post="/submit" hx-target="#result">

<input type="text" name="username" placeholder="Enter your

username">

<button type="submit">Submit</button>

</form>

<div id="result">Response will be displayed here.</div>

In this example, when the form is submited, HTMX sends a POST request to /submit with the form
data and updates the content of the #result div with the response.

c. hx-put
The hx-put atribute is similar to hx-post but sends a PUT request to the server. It's used for
upda�ng exis�ng resources. Here's an example:

<button hx-put="/update" hx-trigger="click">Update Data</button>

In this example, when the "Update Data" buton is clicked, HTMX sends a PUT request to /update.

d. hx-delete
The hx-delete atribute sends a DELETE request to the server to delete a resource. Here's an
example:

<button hx-delete="/delete" hx-confirm="Are you sure?" hx-

target="#result">Delete Data</button>

In this example, when the "Delete Data" buton is clicked, HTMX sends a DELETE request
to /delete a�er confirming with the user.

4. Ac�ons
Ac�ons in HTMX allow you to define behavior in response to events.

a. hx-trigger
The hx-trigger atribute specifies the event that triggers an ac�on. It can be used in conjunc�on
with other atributes like hx-get or hx-post. Example:
<button hx-get="/data" hx-trigger="click">Fetch Data on
Click</button>

In this example, the data is fetched when the buton is clicked.

b. hx-confirm
The hx-confirm atribute is used to show a confirma�on dialog before an ac�on is executed.
Example:
<button hx-post="/submit" hx-confirm="Are you sure you want to
submit?" hx-target="#result">Submit</button>

This buton will display a confirma�on dialog before submi�ng the form.

c. hx-select
The hx-select atribute allows you to specify elements to be updated when an ac�on is triggered.
Example:
<button hx-get="/data" hx-select="#result">Fetch Data</button>
<div id="result">Data will be displayed here.</div>

In this example, when the buton is clicked, the content of the #result div will be updated.

5. Django Example
Now, let's see a simple Django example using HTMX. We'll create a counter that increments when a
buton is clicked.
<!-- Django Template -->
<button hx-post="{% url 'increment_counter' %}" hx-
target="#counter">{{ counter }}</button>
<div id="counter">{{ counter }}</div>

In this Django template, we have a buton that sends a POST request to

the increment_counter URL and updates the content of the #counter div with the counter
value.

In your Django views, you can handle the POST request and increment the counter value:
# views.py
from django.http import JsonResponse

counter = 0

def increment_counter(request):
 global counter
counter += 1
return JsonResponse({'counter': counter})

This example demonstrates how to use HTMX with Django to create a dynamic counter without
wri�ng complex JavaScript code.

Congratula�ons! You've learned the basics of HTMX and how to use it to enhance your web
applica�ons with minimal effort. HTMX's atributes and ac�ons make it a powerful tool for crea�ng
interac�ve web pages.