HTMX in Django - A dynamic process log view

Building a dynamic process log view with HTMX in Django

HTMX is a powerful framework for creating interactive and modern interfaces driven by hypertext, without writing any JavaScript. Wildfish developers have used HTMX in various projects to build dynamic web applications.

By simplifying the process of building modern web applications, HTMX reduces complexity and helps developers create feature-rich apps with an improved user experience, more efficiently.

In this guide, we demonstrate how to create a dynamic process log view using HTMX and Django. The log view will automatically update when new entries are added and allows users to filter the displayed entries based on metadata. This serves as a practical example of HTMX's capabilities when integrated with Django.

1. What is HTMX and why use it?

HTMX enables the reloading of specific components instead of the entire page, CSS transitions, and web socket and server-sent event integration. It allows developers to build modern and interactive interfaces without delving deep into JavaScript.

2. Setting up the HTML structure

Our approach is to use a form for filter parameters and a log view for displaying all messages. Although we primarily use Django at Wildfish, HTMX is backend-independent. The backend code for generating responses can be found in the repository, but we'll focus on the HTMX results in this post.

Here's the fully rendered HTML on page load:

<h2>Logs</h2>
<h2>Filter</h2>
<!-- The filter form -->
<form>
    <label>
        <input
            name="filter"
            value=""
            hx-get="/_/select-filter"
            type="radio"
            checked
        > All
    </label>
    <label>
        <input
            name="filter"
            value="first"
            hx-get="/_/select-filter"
            type="radio"
        > First
    </label>
    <label>
        <input
            name="filter"
            value="second"
            hx-get="/_/select-filter"
            type="radio"
        > Second
    </label>
</form>
<!-- The filter form -->

<!-- The main log content -->
<div id="log-container">
    <h2>Results</h2>
    <div id="log-list" hx-get="/_/log-list" hx-trigger="load, every 1s">
        LOADING...
    </div>
</div>
<!-- The main log content -->

Upon loading, the log container requests /_/log-list replacing the LOADING... content with the response. When a filter is selected, a request is made to /_/select-filter and HTMX processes the response and replaces the necessary components.

3. Implementing the filter form

HTMX allows requests to be sent when an input element is clicked, passing the name and value as query parameters to the requested URL. We can use this to request a filtered version of the log component.

<form>
    <label>
        <input
            name="filter"
            value=""
            hx-get="/_/select-filter"
            type="radio"
            checked
        > All
    </label>
    <label>
        <input
            name="filter"
            value="first"
            hx-get="/_/select-filter"
            type="radio"
        > First
    </label>
    <label>
        <input
            name="filter"
            value="second"
            hx-get="/_/select-filter"
            type="radio"
        > Second
    </label>
</form>

Each radio button has a hx-get attribute, telling HTMX to request the provided URL and update the DOM using the response. The response from /_/select-filter will look something like:

<div hx-swap-oob="outerHTML:#log-container" id="log-container">
    <h2>Results: First</h2>
    <div id="log-list" hx-get="/_/log-list?filter=first" hx-trigger="load, every 1s">
        LOADING...
    </div>
</div>

Key elements to note are:

The hx-swap-oob property: This instructs HTMX to perform an "Out of Band" swap, allowing it to swap an element that isn't the current target. In this case, the value outerHTML:#log-container tells HTMX to replace the content of the #log-container element and the entire element due to the outerHTML: prefix. The new hx-get value on the #log-list element now includes the filter parameter, so only logs for that filter are returned. Once the request is processed, HTMX stops polling the old log URL and starts requesting the new, filtered log URL.

HTMX in practice: making Django development easier

As demonstrated in this example, HTMX offers a powerful and efficient solution for creating dynamic and interactive websites without requiring extensive JavaScript knowledge. The benefits of this approach include faster development times, reduced complexity, and easier maintainability of the codebase. Moving forward, we can expect to see increased adoption of HTMX among Django developers, as it aligns well with Django's philosophy of promoting rapid development and clean, pragmatic design. While HTMX is not the only solution for creating dynamic web applications, its ease of use and compatibility with Django make it an attractive option for developers who want to create feature-rich applications with an improved user experience. It's worth noting that the impact of HTMX on Django development may vary depending on the specific use case and the complexity of the application being built. For some projects, HTMX may be a game-changer, while for others, it may be just a helpful tool that streamlines certain aspects of development.

If you encounter any issues or questions, feel free to raise an issue on the GitHub project or comment below.