HTMX is a javascript library that allows to make web applications more interactive and dynamic. It’s based on hypermedia driven app philosophy. It enhances the capabilities of HTML attributes to make the web applications more interactive.

Vanilla HTML attributes does something special only for the following

  • a tag href attribute: navigates to the link
  • form tag action attribute: submits the form to the action url

htmx allows other elements to send http requests and update the DOM based on the response, without writing any javascript.

yet, htmx is written in javascript.

for example

  • you can click a button and make it send http request to a server
  • specify target location to update in the button itself on getting response from server
<button hx-get="/api/counter" hx-target="#counter">Increment</button>
<div id="counter"></div>

This will send a GET request to /api/counter and update the div with id counter with the response.

The main attraction of HTMX is that it allows us to asynchronously swap the content of an element with server response using hx-swap and hx-target attribute with minimal effort and with less / no javascript.

Why I like this approach

  • You can achieve spa like experience by replacing the content of the page with the response from the server.
  • This system is more loosely coupled than REST API system. The server can send any html content and the client will only have to replace the content of the target element.
  • Having more state management logic on server and also getting good interactivity on client side makes it ideal for many web applications.
    • It’s better security, since the client only has to deal with the html content and not the data.
    • It’s better for performance, since the server can send the html content with the data and the client can replace the content with the data.

Although the tooling around server side rendered html is not as rich as the client side, it’s getting better. I think it’s a good idea to use server side rendered html for most of the web applications and use client side rendered html only when it’s absolutely necessary.

Client side rendering system is good for web applications that needs to be highly interactive and does most computations on client side like a game or a video editor.

In other cases, server side rendered html is a better choice in my opinion.

Here are some common attributes used by htmx

To send http requests

  • hx-get: send GET request
  • hx-post: send POST request
  • hx-patch: send PATCH request
  • hx-put: send PUT request
  • hx-delete: send DELETE request

Modifiers

  • hx-target: specifies the target element to update with the response
  • hx-swap: specifies how to update the target element with the response
  • hx-trigger: specifies the event that triggers the request
  • hx-indicator: specifies the element to show while the request is in progress
  • hx-swap-oob: exists in the response, specifies htmx should update another element ( that matches id of response element ) with that section of the response

Reference

Htmx events grouped and sorted on their order of occurance.

Initialization and Setup

htmx:beforeProcessNode
htmx:afterProcessNode

History Handling

htmx:beforeHistorySave
htmx:historyRestore
htmx:pushedIntoHistory
htmx:historyCacheMiss
htmx:historyCacheError
htmx:historyCacheMissError
htmx:historyCacheMissLoad

AJAX Request Lifecycle

htmx:xhr:loadstart
htmx:beforeRequest
htmx:configRequest
htmx:beforeSend
htmx:xhr:progress
htmx:beforeOnLoad
htmx:afterOnLoad
htmx:afterRequest
htmx:xhr:loadend

Content Swap and DOM Update

htmx:beforeSwap
htmx:afterSwap
htmx:oobBeforeSwap
htmx:oobAfterSwap
htmx:afterSettle
htmx:load

Error Handling

htmx:sendError
htmx:responseError
htmx:swapError
htmx:oobErrorNoTarget
htmx:targetError
htmx:timeout
htmx:onLoadError
htmx:sseError
htmx:noSSESourceError

Server-Sent Events (SSE)

htmx:sseOpen

Confirmation, Prompt, and Validation

htmx:confirm
htmx:prompt
htmx:validation:validate
htmx:validation:failed
htmx:validation:halted

Cleanup and Abort

htmx:beforeCleanupElement
htmx:abort
htmx:xhr:abort