Meet the HTML Superpower: htmx

Published in

Bina Nusantara IT Division

4 min readOct 10, 2023

Are you tired of wrestling with complex JavaScript frameworks to build interactive and dynamic web applications? Enter htmx, a new UI library that revolutionizes web development with the simplicity of HTML. In this article, we’ll explore how it can empower developers to create modern, feature-rich web applications effortlessly.

In a nutshell

In standard HTML, every click on a link or submission of a form automatically triggers an HTTP request, fetching the server’s response to render on the UI.

But why stop there? htmx embraces the architectural constraint of “Hypermedia as the Engine of Application State,” elevating HTML to manage complex modern UI requirements. At its core, it harnesses the true potential of HTML to handle server requests and seamlessly update the user interface by adding additional attributes to the HTML elements.

How does it work?

htmx extends the capabilities of standard HTML by introducing special attributes that act as commands. These attributes are prefixed with “HX” to distinguish them from regular attributes.

<button hx-get="https://example.com" hx-swap="outerHTML">
 Click me!
</button>

For instance, clicking on a link or submitting a form with an “HX get” attribute will trigger a server request to the specified URL using the HTTP GET method. When the server responds to the request, htmx can asynchronously update the UI without requiring a full page reload. The server’s response can replace, append, or prepend content on the page as specified by the “HX swap” or “HX target” attributes.

<button hx-get="https://example.com" hx-trigger="keyup changed delay:5s">
  Click me!
  <img class="htmx-indicator" src="spin.gif">
</button>

Additionally, you can customize how the event is triggered and the delay to control the timing and frequency of server requests with an “HX trigger” attribute. It also keeps tracking the loading states of the request, enabling a smooth user experience with spinners and CSS transitions.

Other interesting features

Boost: The Client-Side Router Enhance user experience with boost, htmx’s client-side router. Transform traditional web applications into faster, single-page applications (SPAs) with minimal effort.
Extensions for Advanced Features: htmx doesn’t just stop at the basics. The library offers extensions for more advanced functionalities, including seamless web socket integration and compatibility with other HTML frameworks like Alpine.

Installation

Simply import the library in a script tag from the head of your HTML document, and you’re all set! No convoluted installations or steep learning curves; it’s just that simple.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Website</title>
    <script src="https://unpkg.com/htmx.org@1.9.6" integrity="sha384-FhXw7b6AlE/jyjlZH5iHa/tTe9EpJ1Y55RjcgPbjeWMskSxZt1v9qkxLJWNJaGni" crossorigin="anonymous"></script>
  </head>
  <body>
    <main>
        <h1>Welcome to My Website</h1>  
    </main>
  </body>
</html>

Let’s see it in action! We want to get a HTML response from a server and put it into the inner element with hx-swap.

Put this line into the body of index.html

<div hx-get="/example" hx-swap="innerHTML">Get Some HTML & Append It</div>

And create a simple node.js server that will respond to the GET request.

const http = require('http');

const server = http.createServer((req, res) => {
  if (req.method === 'GET' && req.url === '/example') {
    // Set the Content-Type header to HTML
    res.setHeader('Content-Type', 'text/html');

    // Send the HTML response
    res.end('<p>Hello World</p>');
  }
});

const PORT = process.env.PORT || 8080;

server.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

When a client loads the page, it initiates a GET request to http://localhost:8080/example. In response, it receives the “Hello World” enclosed within a <p> element. This response is seamlessly integrated into the designated <div> element within the target. It’s worth noting that you have the flexibility to specify various attributes to control how this element replacement occurs, including outerHTML, beforebegin, afterbegin, beforeend, afterend, and more

Conclusion

htmx has proven to be a game-changer for web developers worldwide. With its user-friendly approach, you can build highly polished, full-stack HTML applications effortlessly. Say goodbye to the complexities of JavaScript frameworks and embrace the simplicity and power of HTML with htmx.

So, do you love it, or do you hate it? I’d love to hear your thoughts in the comments below. Thank you for reading this article, and happy coding!