Scribd
Upload
492 views

Introduction To HTMX

HTMX is a library that enables dynamic and interactive web applications by updating parts of a page without JavaScript. It uses HTML attributes and actions to handle interactions and make requests, replacing elements with responses. Common attributes include hx-get, hx-post, and hx-trigger. A Django example increments a counter with a button click using HTMX.

Uploaded by

Gora
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
492 views

Introduction To HTMX

HTMX is a library that enables dynamic and interactive web applications by updating parts of a page without JavaScript. It uses HTML attributes and actions to handle interactions and make requests, replacing elements with responses. Common attributes include hx-get, hx-post, and hx-trigger. A Django example increments a counter with a button click using HTMX.

Uploaded by

Gora
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

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.

You might also like