Integrating Thymeleaf with Spring Boot is simple because Spring Boot provides automatic configuration for Thymeleaf when the dependency is included. Below is a clean, complete guide showing how to set up Thymeleaf, create templates, pass data from controllers, and use advanced features.
๐ 1. Add Thymeleaf Dependency
If you’re using Maven, add this to your pom.xml:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
For Gradle:
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
implementation 'org.springframework.boot:spring-boot-starter-web'
Once this dependency is added, Spring Boot auto-configures Thymeleaf.
๐ 2. Thymeleaf Template Directory Structure
Spring Boot looks for HTML templates under:
src/main/resources/templates/
Example:
src/main/resources/
└── templates/
├── index.html
└── users.html
Static resources like CSS, JS, and images go under:
src/main/resources/static/
๐งญ 3. Create a Simple Thymeleaf Template
Create src/main/resources/templates/index.html:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Hello Page</title>
</head>
<body>
<h1 th:text="${message}">Placeholder</h1>
</body>
</html>
๐ฎ 4. Create a Spring Boot Controller
@Controller
public class HomeController {
@GetMapping("/")
public String home(Model model) {
model.addAttribute("message", "Welcome to Thymeleaf with Spring Boot!");
return "index"; // Thymeleaf will render index.html
}
}
When user visits /, Thymeleaf renders index.html with the message.
๐งฑ 5. Passing Objects and Lists
Controller:
@GetMapping("/users")
public String users(Model model) {
List<String> names = List.of("Alice", "Bob", "Charlie");
model.addAttribute("users", names);
return "users";
}
Thymeleaf template:
<ul>
<li th:each="user : ${users}"
th:text="${user}">
</li>
</ul>
๐ 6. Form Handling with Thymeleaf
Form Template (form.html):
<form action="/submit" th:object="${user}" method="post">
Name: <input type="text" th:field="*{name}"/>
Email: <input type="email" th:field="*{email}"/>
<button type="submit">Submit</button>
</form>
DTO:
public class User {
private String name;
private String email;
// getters/setters
}
Controller:
@GetMapping("/form")
public String showForm(Model model) {
model.addAttribute("user", new User());
return "form";
}
@PostMapping("/submit")
public String submitForm(@ModelAttribute User user, Model model) {
model.addAttribute("submittedUser", user);
return "result";
}
๐ท 7. Spring Boot Thymeleaf Configuration (Optional)
Optional settings in application.properties:
spring.thymeleaf.cache=false # Disable caching during development
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML
๐จ 8. Using Fragments (Reusable Components)
Useful for headers, navbars, footers.
fragments/header.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title th:text="${title}"></title>
</head>
</html>
Include in another template:
<div th:replace="fragments/header :: header"></div>
๐ 9. Integrating Thymeleaf with Spring Security (Optional)
Add dependency:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-security</artifactId>
</dependency>
Enable security dialect:
<dependency>
<groupId>org.thymeleaf.extras</groupId>
<artifactId>thymeleaf-extras-springsecurity6</artifactId>
</dependency>
Use security tags in templates:
<div sec:authorize="isAuthenticated()">
Welcome, user!
</div>
๐งช 10. Troubleshooting Common Issues
Problem Solution
Template not found Ensure file is in src/main/resources/templates/
Model attribute not showing Check variable name and ${} syntax
No Thymeleaf processing Ensure xmlns:th="http://www.thymeleaf.org" is added
CSS/JS not loading Place assets in src/main/resources/static/
⭐ Summary
Integrating Thymeleaf with Spring Boot involves:
Add Thymeleaf dependency
Place HTML templates in /templates
Create controllers returning view names
Use ${} to pass data to templates
Create forms and use th:field
Optionally use fragments, layouts, and security
Thymeleaf is clean, server-friendly, and integrates seamlessly with Spring Boot’s MVC approach.
Learn Full Stack JAVA Course in Hyderabad
Read More
Exception Handling in Spring Boot
Spring Boot Annotations You Must Know
Dependency Injection in Spring Framework
Creating REST APIs using Spring Boot
Visit Our Quality Thought Institute in Hyderabad
Subscribe by Email
Follow Updates Articles from This Blog via Email
No Comments