Stop Over-engineering WebDev With HTMX

Unfortunately, that’s a lot of decisions and setup. For simple projects on the web, a “build” step can seem unnecessary since the platform already allows for layout structure, styling, and custom logic.

Luckily, there’s HTMX - an easy solution that can add a ton of interactivity to a website without needing a lot of the setup. Bonus points: it can be added to a site as easily as importing a JavaScript library.

The “Old” Web

Before React, Vue, etc. were common, developers still needed interactivity on their websites. This was often implemented through features like server side rendering for dynamic content and forms for capturing user input. For our example of adding a comments section to a site, this might have been done by rendering the page initially with a list of comments and including a form for adding a new one. Once the form was submitted, the server would save the new comment and tell the browser to re-render the entire page.

One of the big advantages of using a web framework is that data can be updated without needing to completely refresh the page. This makes the site feel more interactive and doesn’t make the user wait for a new page to load before they confirm that their new comment was really created.

A framework like React might implement this by having the developer write the structure of the page as JSX. The user’s comment could be an input element with an “onChange” property pointing to a function that updates the value contained in JavaScript. Then once the form is submitted, the event can be caught using an “onSubmit” property pointing to a function with an “event.preventDefault()” call to make sure that the default browser functionality is stopped. This is a lot of boilerplate code that doesn’t really achieve very much. What if instead of preventing the browser’s default functionality, we used it?

HTMX To The Rescue

HTMX is a library that uses, and more importantly extends, the features and syntax of HTML. Instead of constantly listening for changes and copying our comment form’s state into a JavaScript object, we can just store the state in the HTML itself. Here is an example of that comment functionality in HTMX:

<form
  hx-post=”/comment”
  hx-target=”#comments”
  hx-swap=”beforeend”
>
    ...
</form>

<ul id=”comments”></ul>

Here, the form can contain a standard input element which holds our comment state. When the form is submitted, the browser makes a POST request to the “/comment” endpoint with the data from the form’s input. Then, it takes the HTML response and adds it before the end of the “#comments” list.

The comment feature’s logic is contained in the html with no extra JavaScript needed and no syncing of the form’s state. I hope this has been a helpful introduction to HTMX. The official website has lots of examples of other use cases so I recommend checking out the documentation and seeing all of the other cool things HTMX can do.