HTMX makes a server-rendered page interactive without requiring custom JavaScript for many common updates. HTML attributes declare an asynchronous HTTP request and identify the page element whose contents should be replaced by the response. HTMX runs in the browser; it is a third-party library, not a Quarkus extension. section 6.2.3 section 6.0
Listing 6.9 A simple example of HTMX usage
<script src="https://unpkg.com/htmx.org@1.8.4"></script>
<button hx-get="/click" hx-swap="innerHTML" hx-target="#greeting">
Greet me
</button>
<div id="greeting">
</div>
The button’s hx-get sends a GET request to /click. hx-target selects #greeting, and hx-swap replaces that element’s inner HTML with the response body. section 6.2.3
A practical pairing is Qute for rendering HTML on the server and HTMX for requesting and inserting that HTML in the browser. Give each independently updated part of a page its own Qute template, then expose REST endpoints that return those fragments as HTML. section 6.2.3 section 6.6
In a reservation page, the pieces fit together as follows:
- The main template contains the user-facing page and loads HTMX; separate templates render the reservations and available-cars tables. section 6.2.3
- A reservations container requests /get on load and displays the returned table. An availability form requests /available for selected dates and targets the availability container. section 6.2.3
- Each available car has a form that posts its car ID and selected dates to /reserve, targeting the reservations region. section 6.2.3
Listing 6.13 Including the list of available cars in the index page
<h2>Available cars to rent</h2>
<form hx-get="/available" hx-target="#availability">
<p>Start date:<input id="startDateInput" type="date"
name="startDate" value="{startDate}"/></p>
<p>End date:<input id="endDateInput" type="date"
name="endDate" value="{endDate}"/></p>
<input type="submit" value="Update list"/>
</form>
<div id="availability" hx-get="/available" #1
hx-trigger="load, update-available-cars-list from:body"
hx-include="[id='startDateInput'],[id='endDateInput']">
<!-- To be replaced by the result of calling /available -->
</div>
The availability markup shows both a form-driven request and a container that requests data on load. hx-include supplies the date inputs when the container makes its request. section 6.2.3
Keep the responsibilities distinct: the server prepares HTML and handles requests; HTMX updates the specified browser region. Avoid treating “no JavaScript” as an absolute promise—it applies to simpler or most cases described here. section 6.5 section 6.6
