HTML video tutorial: HTMX.org

When we create a dynamic application we often need to interact with the server for more or less complex interactions. In the case of an application generated on the server side, this can quickly require a substantial amount of JavaScript for relatively classic operations.

I click on this element, I ask the server for a part of the HTML and I then inject it in different places in my page.

HTMX is a library that will allow you to easily describe this type of interaction using special HTML attributes.

<tr id="replaceMe">
  <td colspan="3">
    <button class="btn" hx-get="/contacts/?page=2" 
                        hx-target="#replaceMe" 
                        hx-swap="outerHTML">
         Charger plus d'élément... <img class="htmx-indicator" src="https://grafikart.fr/img/spinner.svg">
    </button>
  </td>
</tr>

With this example the page /contacts/?page=2 will be called and the HTML content returned by the server will replace the <tr id="replaceMe">. This, on the other hand, involves ensuring that the server response only returns the content to be replaced. For this it is possible to look at the headers of the request to look for the presence of the HX-Request header.

“Out of band” replacement

In these more complex cases, you may want to replace several elements in the source page. In this case it will be possible to use the attribute hx-swap-oob in the elements of the response to define the elements that will be replaced.

On our start page we will ask to load the next page

<div id="posts">
    <!-- Liste des articles -->
</div>

<div id="more">
    <button 
      class="btn btn-primary" 
      hx-get="/?page=2">
        <span class="spinner-border spinner-border-sm htmx-indicator" role="status" aria-hidden="true"></span>
        Voir plus
    </button>
</div>

In the response returned by the server, we will use the attribute hx-swap-oob to define the elements to target (the system is based on the id of the element) and how the replacement should be done.

<div id="posts" hx-swap-oob="beforeend">
    <!-- Liste des articles -->
</div>

<div id="more" hx-swap-oob="true">
    <button 
      class="btn btn-primary" 
      hx-get="/?page=3">
        <span class="spinner-border spinner-border-sm htmx-indicator" role="status" aria-hidden="true"></span>
        Voir plus
    </button>
</div>

Extension and loading

When htmx will make a request it will automatically add the class htmx-request to the source element and it also provides a class htmx-indicator which will be masked (opacity: 0) by default. 

<button class="btn" hx-get="/contacts/?page=2">
        Charger plus d'élément... <img class="htmx-indicator" src="https://grafikart.fr/img/spinner.svg">
</button>

You can add your own style to make items look the way you want while they load. You can also target the element that will receive the loading indicator using the attribute hx-indicator.

<div>
    <button hx-post="/example" hx-indicator="#spinner">
        Post It!
    </button>
    <img  id="spinner" class="htmx-indicator" src="https://grafikart.fr/img/bars.svg"/>
</div>

hx-boost

In addition to attributes hx-get, hx-post And hx-delete it is also possible to use the attribute hx-boost to progressively improve and “boost” links and forms.

<div hx-boost="true">
  <a href="https://grafikart.fr/page1">Page 1</a>
  <a href="http://grafikart.fr/page2">Page 2</a>
</div>

The links will then be automatically loaded in Ajax and the content of the new page will be injected into the current page. If attributes hx- are present on (or around) the element they will be respected.

RELATED ARTICLESMORE FROM AUTHOR