Log in Subscribe
htmx

How to use htmx to create dynamic web pages with HTML

Creating dynamic web pages with htmx: Learn how to enhance HTML-based sites with interactive content, real-time updates, and seamless user experiences. Explore htmx attributes, data binding, events, and server-side integration. Transform static HTML into dynamic, responsive web experiences.

Riadh
ยท 4 min read
htmx simple guide
htmx simple guide

Introduction

htmx is a library that allows you to access modern browser features like AJAX, CSS Transitions, WebSockets, and Server-Sent Events directly from HTML, rather than using JavaScript. It allows you to build user interfaces quickly directly in markup.

Some common use cases of htmx are:

  • Adding interactivity to static web pages without writing JavaScript
  • Updating parts of a web page dynamically based on user actions or events
  • Creating fast and responsive web applications with minimal server load
  • Simplifying the development process by using HTML attributes and server-side logic
  • Enhancing the user experience with transitions, animations and web sockets

What is htmx?

htmx is the successor of intercooler.js, a library that aimed to make AJAX as easy as possible by using HTML attributes. htmx extends this idea by adding more features and flexibility, such as:

  • Any element, not just anchors and forms, can issue an HTTP request
  • Any event, not just clicks or form submissions, can trigger requests
  • Any HTTP verb, not just GET and POST, can be used
  • Any element, not just the entire window, can be the target for update by the request

htmx also supports extensions that add more functionality, such as:

  • Validation: validate form inputs using server-side logic
  • Morphdom: use a diffing algorithm to update only the changed parts of the DOM
  • WebSockets: use WebSockets for bidirectional communication with the server
  • SSE: use Server-Sent Events for unidirectional communication with the server

How to install htmx?

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. No need for complicated build steps or systems.

  • You can load htmx from a CDN, such as unpkg.com:
<script src="https://unpkg.com/htmx.org@latest"></script>
  • Or you can download a copy of htmx.min.js from the same source and add it to your project directory:
<script src="/path/to/htmx.min.js"></script>
  • You can also install htmx via npm or webpack if you prefer:
npm install htmx.org

How to use htmx?

htmx uses HTML attributes that start with hx- to define the behavior of elements. For example, this button will issue a POST request to /clicked when clicked, and replace itself with the response:

<button hx-post="/clicked">Click Me</button>

The hx-post attribute specifies the URL and the HTTP verb for the request. The hx-swap attribute specifies how to update the DOM with the response. In this case, it uses outerHTML, which means replacing the entire element.

You can also use other attributes to customize the behavior of htmx elements. For example:

  • hx-trigger: defines when to trigger the request. It can be an event name (such as click or change), or a custom expression (such as click.delay(500) or every 1s)
  • hx-target: defines which element to update with the response. It can be an id (such as #parent-div), a CSS selector (such as .card), or a special value (such as this or closest .container)
  • hx-select: defines which part of the response to use for updating. It can be a CSS selector (such as .content) or a special value (such as :header or :body)
  • hx-encoding: defines how to encode the request data. It can be form (the default), multipart/form-data (for file uploads), json (for JSON data), or text/plain (for plain text)

Here is an example of using these attributes to create a simple todo list app:

<div id="todo-list">
  <ul>
    <li>Buy groceries</li>
    <li>Clean the house</li>
    <li>Write an article about htmx</li>
  </ul>
  <form hx-post="/add" hx-target="#todo-list" hx-swap="outerHTML">
    <input type="text" name="task" placeholder="Enter a new task">
    <button>Add</button>
  </form>
</div>

This code will display a list of tasks and a form to add new tasks. When the form is submitted, it will send a POST request to /add with the task name as data. The server will respond with an updated HTML snippet of the todo list, which will replace the entire div with id todo-list.

You can also use htmx events to add more interactivity to your elements. For example, you can use htmx:afterSettle to execute some JavaScript code after the DOM has been updated:

<button hx-get="/random" hx-swap="innerHTML" onhtmx:afterSettle="alert('Done!')">Get a random number</button>

This button will send a GET request to /random and update its innerHTML with the response, which is a random number. After that, it will alert the user with a message.

You can also use htmx extensions to add more features to your elements. For example, you can use the validation extension to validate form inputs using server-side logic:

<form hx-post="/validate" hx-encoding="multipart/form-data" hx-ext="validation">
  <input type="text" name="name" placeholder="Enter your name" required>
  <input type="email" name="email" placeholder="Enter your email" required>
  <input type="file" name="avatar" placeholder="Upload your avatar">
  <button>Submit</button>
</form>

This form will send a POST request to /validate with the form data as multipart/form-data. The server will respond with a JSON object that contains the validation errors, if any. The validation extension will display the errors next to the inputs and prevent the form from submitting if there are any errors.

Conclusion

htmx is a library that allows you to create dynamic web pages with HTML, without writing much JavaScript. It uses HTML attributes to define the behavior of elements, such as issuing HTTP requests, updating the DOM, and adding interactivity. It also supports extensions that add more functionality, such as validation, morphdom, WebSockets, and SSE.

If you want to learn more about htmx, you can check out the Official htmx Website