Last updated: 2024-03-18
Using htmx with Spring Boot and Thymeleaf
Did you know that you can save days or weeks of development time when starting new Spring Boot apps? br With Bootify you have the right helper at your side - get a runnable prototype in minutes and focus on your business logic instead. Best practices included.
Discover more
Htmx allows building complex web applications that feel like an SPA without relying on Angular or React. The client's behavior is mainly controlled by attributes within the HTML code that execute an Ajax request and integrate the result into the DOM - perfectly fitting for server-side rendering with Thymeleaf.
Basic setup
To keep the example simple, let's setup a Spring Boot application based on Thymeleaf and Bootstrap. We use WebJars to provide the libraries for the client.
Required dependencies for using Thymeleaf, Bootstrap and htmx
Our controller will render our index page and already contains a second endpoint for loading additional info via AJAX later on.
Controller to output our templates
Let's prepare a simple template for our index page. We won't use a dedicated layout here.
Our Thymeleaf template in resources/templates/index.html
How we create ourselves a complete project is described further below. If everything is set up correctly, after starting the application we can reach our home page at http://localhost:8080/.
Activate htmx behavior
Without further configuration htmx is not enabling any functionality. Let's quickly add some logic to our button, which will call the second endpoint of our controller and replace our greeting message.
Extend our button with htmx logic
We use Thymeleaf's ability here to populate any HTML attribute - in this case we create the link to our endpoint, which will be contained in the hx-post attribute. On click, htmx will now call the endpoint via Ajax and replace our targeted <p> element with the response. A more detailed explanation of the attributes can be found in the htmx documentation.
Updated greeting in furtherInfo.html
Alternatively, we could add the hx-boost="true" attribute to our body element. This will cause all links and forms to be picked up by htmx, so all actions are performed without reloading the browser - creating an SPA-like user experience. Two possible approaches to error handling of htmx requests in Spring Boot are described in this article.
Generate propotype with htmx setup
With Bootify the described setup can be generated directly in the browser. The frontend with htmx is available in the Free plan without registration.
Options to generate a Spring Boot app with htmx
The current versions of all libraries are always used, and an individual database schema including CRUD functions can be added if required.
Start Project
No registration required
