HTMX - Boosting

HTMX boosting is a way to boost HTML anchors and forms by using hx-boost attribute. Boosting converts all the anchor tags and forms into AJAX requests and targets the body of the page.

Example of HTMX Boosting

In this following example the anchor tag will trigger an AJAX GET request to /content and swap that into the body tag.

<div hx-boost="true">
   <a href="/content">Content</a>
</div>

Boosting Progressive Enhancement

In progressive enhancement all the links and forms continue to work when JavaScript is not enabled without using the Ajax request. It also allows more audience to use your website's functionality. Other htmx pattern can be adapted to achieve progressive enhancement as well.

Here in this code it will not degrade gracefully. The search feature will not work if the user keeps the JavaScript disabled. If you could wrap the htmx-enhanced input in a form element. If JavaScript is not enabled user can still search. You can add a search button and update the form with an hx-post that mirrors the action attribute or you can use hx-boost attribute.

<form action="/search" method="POST">
   <input class="form-control" type="search"
 name="search" placeholder="Search your course.."
 hx-post="/search"
 hx-trigger="keyup changed delay:500ms, search"
 hx-target="#search-results"
 hx-indicator=".htmx-indicator">
</form>

Accessibility

Using progressive enhancement through hx-boost attribute will make your application more accessible to a wide range of users. The htmx-based applications are simpler as the htmx is HTML-oriented.

Accessibility Recommendations

• Maximize the readability of the application with better typography.
• Use HTML semantic elements as much as possible.
• Use text labels on all the form input fields.
• Make sure that the focus state is visible.