nehuu
HTMX the controversial library

Photo by Nate Grant on Unsplash

HTMX the controversial library

This article explains what HTMX even is, what are it's uses and how to get started with it.

Neha Keshri's photo
Neha Keshri
·

4 min read

Introduction

HTMX is a lightweight library that enables modern browser features like AJAX, CSS Transitions, WebSockets, and Server-Sent Events directly through HTML attributes, such as hx-get, hx-post, hx-put, hx-patch, and hx-delete, allowing developers to create interactive web applications without using JavaScript.

What is HTMX?

HTMX is a small, dependency-free, extendable library that allows users to access modern browser features directly from HTML, instead of using JavaScript. In particular, it gives users access to AJAX (i.e., fetching content without reloading the whole page), CSS Transitions, WebSockets, and Server Sent Events directly through HTML attributes.

Each attribute represents a different HTTP request method shown as follows :

  1. hx-get: issues a GET request to a specified URL.

  2. hx-post: issues a POST request to a stated URL.

  3. hx-put: issues a PUT request to a certain URL.

  4. hx-patch: issues a PATCH request to a set URL.

  5. hx-delete: issues off a DELETE request to a declared URL.

These attributes accept a URL, to which they will send the Ajax request. By default, Ajax requests are triggered by the "natural" event of an HTML element. The idea behind HTMX is to keep things simple, allowing developers to wander into the magic of the Web without abandoning familiar HTML. The ultimate goal of HTMX is to provide modern browser interactivity directly within HTML, without the need for JavaScript.

Creation And History

The HTMX was created by Carson Gross at Big Sky Software. HTMX simplifies the process of making interactive web applications by reducing the need for extensive JavaScript code. It leverages server-side rendering, making it easier to integrate with existing server-side frameworks. Since HTMX relies on server-side rendered HTML, it is more SEO-friendly compared to client-side heavy frameworks.HTMX can enhance existing HTML, making it easy to add dynamic features without a complete rewrite.

Getting Started With HTMX

The HTMX docs are a great way to get started with HTMX.

Installation

Htmx is a dependency-free, browser-oriented javascript library. This means that using it is as simple as adding a <script> tag to your document head and get the work done.

The different ways of installing/ using HTMX includes:

  1. Via CDN: The fastest way of getting started with HTMX is via using CDN.
    Just add the following in the head to your HTML file and you're good to go.
<script src="https://unpkg.com/htmx.org@1.9.12" integrity="sha384-ujb1lZYygJmzgSwoxRggbCHcjc0rB2XoQrxeTUQyRjrOnlCoYta87iKBWq3EsdM2" crossorigin="anonymous"></script>

The CDN approach is simple but it is not recommended to use CDN in production.
Know more about it here.

  1. Downloading a copy: A copy of htmx.min.js from unpkg.com and add it to the appropriate directory in your project and include it where necessary with a <script> tag:
<script src="/path/to/htmx.min.js"></script>
  1. npm: For npm style build systems you can install htmx via npm:
npm install htmx.org

For more info have a look at official docs.

A Simple Example

Let's make a simple project using HTMX and Flask, for demonstration, we will be using HTMX via CDN and a simple Flask webserver to handle the requests.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTMX Example</title>
    <script src="https://unpkg.com/htmx.org@1.5.0"></script>
</head>
<body>
    <h1>HTMX Simple Example</h1>
    <button hx-get="/greet" hx-target="#greeting">Click me!</button>
    <div id="greeting"></div>
</body>
</html>

Server in Python Flask

from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/greet', methods=['GET'])
def greet():
    return jsonify(message="Hey there, HTMX!")

if __name__ == '__main__':
    app.run(debug=True)

Explanation

  1. HTML: The button element uses the hx-get attribute to make a GET request to the /greet endpoint when clicked. The response is injected into the <div> with the id greeting.

  2. Flask Server: A simple Flask server defines the /greet endpoint, returning a JSON response containing a greeting message.

This combination provides a basic demonstration of how HTMX can be used to fetch and display content dynamically without writing any JavaScript.

NOTE: The code is for demonstration purposes only and will not run as to hx-get="/greet" attribute will make a request relative to the domain from which the HTML file is served. If you're running the HTML file directly in the browser (e.g., by double-clicking the file on your local machine), it won't work correctly because it won't know where to send the request. To correctly run this example, you'll need to serve the HTML file from the Flask server or any server you're using to handle requests.

Alternatives

The alternatives to HTMX for enhancing the capabilities of HTML without relying heavily on JavaScript, here are a few options:

  • Alpine.js is a lightweight JavaScript framework designed to handle common interactivity tasks directly in HTML. It's similar to Vue.js but much lighter.

  • Turbolinks is a library that makes navigating your web application faster by loading pages asynchronously and replacing the '' and merging the '' of the document instead of a full page reload.

  • Unploy is a framework for creating fast and responsive web applications with minimal JavaScript.It enables partial page updates and navigation.

  • Vue.js is more comprehensive than HTMX, Vue.js can be used for enhancing HTML with reactivity and component-based architecture, allowing for both simple and complex interactivity.

Each of these alternatives has its own advantages and disadvantages, so the choice depends on specific project requirements and preferences.

flask-htmxHTML5PythonFlask Frameworkhtmx