Boost Your Spring Boot 3 Apps with HTMX: Real‑Time AJAX, SSE, and Dynamic UI
This tutorial shows how to integrate HTMX into Spring Boot 3 projects to build SPA‑like pages without writing JavaScript, covering environment setup, AJAX requests, debounced search, multi‑form queries, HTML fragment rendering, and Server‑Sent Events with full code examples.
1. Introduction
Spring Boot 3 practical case collection (172 cases) is continuously updated. This article introduces how to use HTMX with Spring Boot to build SPA‑like pages without writing JavaScript.
What is SPA?
SPA (Single Page Application) is a front‑end architecture that updates page fragments dynamically via Ajax or frameworks such as Vue or React, providing a native‑app‑like experience.
What is HTMX?
HTMX lets you add AJAX, CSS transitions, WebSockets and Server‑Sent Events directly through HTML attributes, offering a lightweight (~14 KB) library with no dependencies.
2. Practical Cases
2.1 Prepare Environment
Add the following Maven dependencies to your Spring Boot project:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>io.github.wimdeblauwe</groupId>
<artifactId>htmx-spring-boot</artifactId>
<version>4.0.1</version>
</dependency>Configure Thymeleaf (application.yml):
spring:
thymeleaf:
mode: HTML
encoding: UTF-8
prefix: classpath:/templates/
suffix: .html
cache: falseDownload the HTMX core library (e.g., https://cdn.jsdelivr.net/npm/[email protected]/dist/htmx.min.js ) and place it in your static resources.
2.2 Define HTML Page
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>HTMX Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link href="/bootstrap.css" rel="stylesheet"/>
<script src="/htmx.min.js"></script>
</head>
<body>
<h1>HTMX 与 Spring Boot 交互</h1>
<!-- page body -->
</body>
</html>2.3 AJAX Request
Use HTMX attributes to fetch the current time:
<button hx-get="/htmx/getTime" hx-target="#result" class="btn btn-primary btn-sm">
获取当前时间
</button>
<div id="result">当前时间</div>Controller:
@GetMapping("/getTime")
public String getTime() {
return DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss")
.format(LocalDateTime.now());
}2.4 Search with Debounce
<input type="text" name="keyword"
hx-get="/htmx/search"
hx-trigger="keyup changed delay:500ms"
hx-target="#search-results"
placeholder="输入关键字"
class="form-control form-control-sm"/>
<div id="search-results"></div>The controller returns a static list for demonstration.
2.5 Multi‑Form Query
Combine keyword, status select, and radio buttons, then send them with hx-include:
<button hx-get="/htmx/q"
hx-trigger="click"
hx-include="#kw, #status, input[name='active']"
hx-target="#multi-results"
class="btn btn-primary btn-sm">搜索</button>Controller receives parameters kw, status, active and returns a simple string.
2.6 Return HTML Fragments
Define Thymeleaf fragments with th:fragment and let the controller return them via FragmentsRendering. The page can load fragments automatically on load or on button click.
2.7 SSE Real‑Time Stream
Include the HTMX SSE extension ( https://cdn.jsdelivr.net/npm/[email protected] ) and add a button that subscribes to a Spring SseEmitter stream.
<button sse-connect="/htmx/sse"
hx-trigger="click"
hx-swap="beforeend"
hx-target="#sse-container"
hx-ext="sse"
sse-swap="times"
class="btn btn-primary btn-sm">SSE</button>
<div id="sse-container"></div>Controller creates an SseEmitter that sends the server time every second for ten seconds.
These examples demonstrate how HTMX enables rich, interactive front‑ends while keeping the Java codebase simple and free of custom JavaScript.
Spring Full-Stack Practical Cases
Full-stack Java development with Vue 2/3 front-end suite; hands-on examples and source code analysis for Spring, Spring Boot 2/3, and Spring Cloud.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.