Introduction to HTMX

What is HTMX and What Does it Do?

In standard, plain HTML only <a> and <form> elements can trigger HTTP GET and POST requests, and HTML retrieved via these requests triggers a full page load.

HTMX extends standard HTML so that any HTML element of a web page can trigger GET and POST requests (and other types too). HTMX directs where the returned HTML should be placed on the page. And all this happens without a page reload.

In response to these requests, the server only needs to return standard HTML/HTMX code, and this can be handled by any server-side scripting system: PHP, Node.js Django, etc.

One of the key principals behind HTMX is that the server should return the data required and also any actions that can be performed on it.

Some Simple HTMX Demos

Try interacting with these demos to see HTMX in action...

Note that the page content is updated without a page reload.

Demo 1 - GET Data from the Server

Here, each click of a button issues a request to the server for a new data record.

Demo 2 - Edit Data and POST to the Server

Here, some data is shown. When the Edit button is clicked, the data is replaced by a form, and when this is submitted the updated data is shown.

How Does the First Demo Work?

The HTMX Code in the Page

The <div> in this demo initially has no content.

The HTMX attributes specify that when the page loads, HTML content should be retrieved from the /contact URL via a GET request, and be placed inside the div...

The hx-target settings means that this div will be the target of all future content swaps too.

Server Responds with HTML for a Contact

When the server receives the above GET request it uses the supplied ID value to respond with the appropriate HTML. The HTML includes the buttons (with HTMX attributes) required to load the next/previous records. For examnple, here is record #2...

When the user clicks one of the buttons, another GET request is sent to the server and a new record replaces the last.

Server Scripts

If we are using PHP scripts on the server and a MySQL database, the above HTML might be generated by code like this...

How Does the Second Demo Work?

The HTMX Code in the Page

The <div> in this demo initially has no content.

The HTMX attributes specify that when the page loads, HTML content should be retrieved from the /user URL via a GET request, and be placed inside the div...

The hx-target settings means that this div will be the target of all future content swaps too.

Server Responds with User Data HTML

When the server receives the above GET request it responds with the appropriate HTML content, including an Edit button and various HTMX attributes required to swap in the edit form...

When the user clicks the Edit button, another GET request is sent to the server, this time for the edit form...

Server Responds with User Edit Form

The server responds with the HTML for the edit form which is pre-populated with the currect user data...

When this form is submitted, an HTTP POST request is sent to the /update URL, which includes the edited user data...

Server Updates and Responds with User Data

When the server recieves the POST request, it processes the update and then responds with the HTML for the updated user data, and we're back to the start.