So you got tired of JavaScript, writing endless boilerplate and trying to adhere to the SOLID principle as much as you can.

Take a breath. Making a web application has never been easier, but it also became complicated with all the new fancy ways we can make a web application/website.

Introducing HTMX, all we need is a server that responds back with status codes and HTML, and templates files.

It's a great choice if you're learning a new language, and you want to make a simple web app.

Here are the things you might need to know:

• hx-swap
• hx-trigger
• hx-swap-oob
• hx-[method]
• hx-target
• hx-indicator

Hx-Swap

This has many values that are helpful. This is used to tell HTMX how you want the response, which is made of HTML, to be swapped with the element that made the request or the target.

The default value is innerHTML which means, "Take the response and put it inside of me or the target I specified with hx-target".

There are useful values as well, such as, beforeend, which means, "Take the response and append it to me or the target I specified with hx-target."

Hx-Trigger

A space separated list of events that an element can emit. For example,

<button hx-trigger="click">Click me!</button>

Clicking the button will trigger the click event and make HTMX do what you tell it to do with hx-[httpMethod].

You can also add a delay before the trigger takes into effect.

<button hx-trigger="click delay:100ms">Click me!</button>

And you can add more events before the keyword delay and that event will also take that much amount of time specified in the delay before getting triggered. To have a separate duration for a different event, use a comma to separate them.

<input hx-trigger="input changed delay:500ms, search" type="search">

The input will trigger when its value changes and 500ms has passed, but it will trigger instantly instead when we clear the search input.

Hx-Swap-Oob

This is useful when you want to update different parts of the UI without having to rerender a huge chunk of the page or UI.

In the response HTML, simply add an id to an element equal to the id of the element which you want to be replaced, then add hx-swap-oob. Note that it works the same way as hx-swap.

<div>
 I am the target.
</div>
<ul id="favorites">
 <li>Dogs</li>
</ul>

<!-- The response HTML -->
<div>
  Updated last 000
</div>
<li id="favorites" hx-swap-oob="beforeend">
  Cats
</li>

The updated div will get swapped with the target or the element that triggered the request, while the li tag will get appended to the ul tag.

Hx-[httpMethod]

As the name implies, we try to request to a specific URL endpoint and the method will be whatever the attribute name is. For example,

<input type="search" name="search" hx-get="/search" hx-trigger="input changed delay: 500ms" hx-target="#search-results">
<ul id="search-results"></ul>

The example above will issue a GET request to /search when the input's value changes after 500ms since the latest change occured. The name is important here because the only way I know where we can get the input's value is through accessing its form fields.

Hx-Target

The same as

document.querySelector("#search-results");

This will tell HTMX which element is the target to be swapped with the response from the element which contains this attribute's response.

Hx-indicator

Tells HTMX which element to show when a request is in flight. This is used for loading states. By default, HTMX just adds a class (refer to their docs), which is used to identify whether a loading indicator should show up or not.

That's it! If I made some mistakes, I'd be glad to know. Thank you and God bless.