A simple HTMX demo

A demo of how HTMX can work on any project

Rob Johnson

By Rob Johnson

Sun Jan 14 2024

There's a new front-end tech that is making waves as htmx finished 2nd in the 2023 JavaScript Rising Stars "Front-end Frameworks" category, just behind React (htmx is a library, btw) and #10 overall!

After a quick review, I can see why. Below is a simple demo taken from their docs to show you how native this is to standard HTML.

See the following markup with an explanation of what it does.

<button hx-get="/demo/htmx-demo.html"
  hx-trigger="click"
  hx-target="#htmx-demo"
  hx-swap="outerHTML"
>
  Try the demo 
</button>

When a user clicks on this button, issue an HTTP GET request to ‘/demo/htmx-demo.html’ and use the content from the response to replace the element with the id "htmx-demo" in the DOM

What's great is that all you need to use this framework is a 48kb file (current version 1.9.10 as of this post).

<script src="/assets/js/htmx.1.9.10.js"></script>

You can download the latest htmx file at unpkg.

The following HTTP request methods are available:

Attribute Description
hx-get Issues a GET request to the given URL
hx-post Issues a POST request to the given URL
hx-put Issues a PUT request to the given URL
hx-patch Issues a PATCH request to the given URL
hx-delete Issues a DELETE request to the given URL

I'm interested to use this more and see what it's like to live with. I really like the idea of leveraging modern capabilities of browsers instead of loading heavy frameworks on initial pageloads.

# commerce 14 # seo 5 # tools 6 # amazon 1 # sql 4 # shopify 9 # javascript 13 # projects 4 # css 2 # git 2 # php 3 # analytics 4 # monitoring 2 # api 6 # python 2 # aws 2