Menu
Server-side web UI with Spring Boot: Thymeleaf templates, HTMX for dynamic interactions, Alpine.js for client-side behavior. No React, no webpack. Trigger: Thymeleaf, HTMX, Alpine.js, Spring MVC template, server-side rendering, web UI.
| name | web-mvc |
| description | Server-side web UI with Spring Boot: Thymeleaf templates, HTMX for dynamic interactions, Alpine.js for client-side behavior. No React, no webpack. Trigger: Thymeleaf, HTMX, Alpine.js, Spring MVC template, server-side rendering, web UI. |
| license | Apache-2.0 |
| metadata | {"author":"vekzz-dev","version":"1.0"} |
| Tool | Role | Why |
|---|---|---|
| Thymeleaf | Server-side template engine | Standard in Spring Boot, fragments, i18n, Spring Security integration |
| HTMX | Dynamic HTML via attributes | Click/ submit/ change → backend returns HTML fragment, no JS |
| Alpine.js | Lightweight client state | Toggles, dropdowns, counters, validation hints — the 5% HTMX doesn't cover |
<!-- Layout via fragments -->
<div th:replace="~{fragments/header :: header}"></div>
<!-- Iteration -->
<tr th:each="user : ${users}" th:class="${user.active} ? 'active' : ''">
<td th:text="${user.name}">Name</td>
<td th:text="${#dates.format(user.createdAt, 'dd/MM/yyyy')}">Date</td>
</tr>
<!-- Conditionals -->
<div th:if="${#lists.isEmpty(users)}">
<p>No users found.</p>
</div>
<!-- URL building -->
<a th:href="@{/users/{id}(id=${user.id})}">View</a>
<!-- Security (Spring Security) -->
<div sec:authorize="hasRole('ADMIN')">
<a th:href="@{/admin}">Admin Panel</a>
</div>
<div sec:isAuthenticated()>
<p th:text="${#authentication.name}">User</p>
</div>
Don't use th:inline="javascript" — it's a script injection risk.
<!-- Click to load content -->
<button hx-get="/users/42/details" hx-target="#details">
Load Details
</button>
<div id="details"></div>
<!-- Form submit returns HTML fragment -->
<form hx-post="/users" hx-target="#user-list" hx-swap="afterbegin">
<input type="text" name="name" required>
<button type="submit">Create</button>
</form>
<!-- Inline delete with confirmation -->
<button hx-delete="/users/42" hx-confirm="Delete this user?"
hx-target="closest tr" hx-swap="outerHTML">
Delete
</button>
<!-- Search with debounce -->
<input type="text" name="q" hx-get="/users/search"
hx-trigger="keyup changed delay:300ms" hx-target="#results">
<!-- Polling every 30s -->
<div hx-get="/notifications" hx-trigger="every 30s" hx-swap="innerHTML">
</div>
HTMX + Spring Boot: controller returns fragments — no @ResponseBody, just Model + template name returning HTML.
@PostMapping("/users")
public String createUser(@Valid User user, Model model) {
userService.save(user);
model.addAttribute("user", user);
return "fragments/user-row :: user-row";
}
<!-- Toggle (use Alpine, not a full HTMX roundtrip) -->
<div x-data="{ open: false }">
<button @click="open = !open">Toggle</button>
<div x-show="open" x-transition>Hidden content</div>
</div>
<!-- Dropdown -->
<div x-data="{ selected: '' }">
<select x-model="selected">
<option value="">All</option>
<option value="active">Active</option>
</select>
<p x-text="selected ? 'Filtering: ' + selected : 'No filter'"></p>
</div>
<!-- HTMX + Alpine: trigger after HTMX swap -->
<button hx-get="/users/42" hx-target="#detail"
@htmx:after-request="$refs.detail.classList.remove('hidden')">
Load
</button>
<div id="detail" x-ref="detail" class="hidden"></div>
<!-- Thymeleaf (comes with spring-boot-starter-web) -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!-- Spring Security integration -->
<dependency>
<groupId>org.thymeleaf.extras</groupId>
<artifactId>thymeleaf-extras-springsecurity6</artifactId>
</dependency>
<!-- layout.html — base template -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
<meta charset="UTF-8">
<title th:text="${title}">App</title>
<script src="https://unpkg.com/htmx.org@2"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js"></script>
<link rel="stylesheet" href="/css/app.css">
</head>
<body>
<div th:replace="~{fragments/header :: header}"></div>
<main th:replace="~{:: main}">
<div th:replace="~{fragments/footer :: footer}"></div>
</body>
</html>
| Need | Tool |
|---|---|
| Render a list of items from the server | Thymeleaf th:each |
| Submit form without page reload | HTMX hx-post |
| Confirm before delete | HTMX hx-confirm |
| Real-time search with debounce | HTMX hx-trigger="keyup delay:300ms" |
| Open/close a dropdown | Alpine x-show |
| Infinite scroll | HTMX hx-trigger="revealed" |
| Lazy-load a tab content | HTMX hx-get on click |
| Sortable table columns | HTMX hx-get with sort param + Alpine for arrow icon toggle |
| Client-side validation hints | Alpine x-model + x-text for error messages |
x-show is instant, HTMX needs a roundtripth:inline="javascript" — XSS vector, use data-* attributes insteadPre-built UI component libraries for server-rendered HTML: Preline UI, HyperUI, Flowbite. Modals, tables, forms, navbars, dropdowns — no React, no build step. Trigger: UI components, component library, Preline, HyperUI, Flowbite, Tailwind CSS components, pre-built UI.
REST API design best practices: resource naming, versioning, error handling, pagination, HATEOAS, rate limiting, OpenAPI documentation. Trigger: API design, REST API, endpoint, OpenAPI, RESTful, API versioning, or API documentation.
Docker and containerization best practices: multi-stage builds, docker-compose, networking, volumes, security, and image optimization. Trigger: Docker, Dockerfile, docker-compose, container, image build, or containerization.
General database design principles: modeling, normalization, indexing, naming conventions, migrations, and query optimization. Trigger: Database design, data modeling, schema design, table design, or migration planning.
Comprehensive best practices for developing high-quality Spring Boot applications with production-ready patterns. Trigger: When developing Spring Boot applications, need best practices, or working with Spring framework.
Expert Spring Boot testing specialist that selects the best testing techniques for your situation with JUnit and AssertJ. Trigger: When writing Spring Boot tests, need testing patterns, or working with test slices.