Developing Cool Web Applications in Spring Boot by using ThymeLeaf

3 min readNov 11, 2020

Have you ever come across the word “ThymeLeaf” used to create websites? It does sound like coriander leaf or Curry Leaf but it is actually an open-source, free Java-based library to create web applications in SpringBoot !!!

Checkout this covid-19 global tracker website which I have developed by integrating Thymeleaf with SpringBoot http://www.aneyeoncovid19.live/

We might have come across a lot of web services, Restful APIs which are developed using SpringBoot. Let us explore how web applications can be created in SpringBoot with the help of Thymeleaf.

1. What is ThymeLeaf?

Thymeleaf is a Java-based library for serving HTML, XML, text, JavaScript, or CSS files at the view layer of web-based applications. Thymeleaf is a template engine that can be used to create a web application in Spring Boot. It is a substitute for JSP and faster than it too. It uses the least possible amount of I/O operations during execution.

2. Configuring ThymeLeaf in SpringBoot

ThymeLeaf can be configured in SpringBoot using Maven dependencies. You need to add the following dependency into the pom.xml file

<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

3. Creating Web Controller

You can use Thymeleaf templates to create a website in Spring Boot. Create a @Controller class file to redirect the request URI to HTML file –

@GetMapping(“/hello”)
public String hello(@RequestParam(name=”name”, required=false, defaultValue=”World”) String name,
@RequestParam(name=”city”, required=false, defaultValue=”Mumbai”) String city, Model model)
{
model.addAttribute(“name”, name);
model.addAttribute(“city”, city );
return “allInfo”;
}

This controller looks simple but consists of a bouquet of knowledge and concepts. Let’s understand it :

The @GetMapping annotation ensures that HTTP GET requests to /hello are mapped to the hello() method.

@RequestParma binds the value of the query string parameter “name” and “city” into the name & city parameter of the hello method. The default value of World & Mumbai is used if values are not passed in the URL. The implementation of the method body relies on a view technology of ThymeLeaf.

4. Model attributes to display in View

The th:text=”${attributename}” tag attributes are used to display the value of model attributes.

model.addAttribute(“name”, name); — The “name” set in the model is rendered on the HTML page

Thymeleaf performs parsing of the allInfo.html template and evaluates the th:text expression to render the value of the ${name} parameter that was set in the /hello controller.

The following is a template from src/main/resources/templates/allInfo.html which is returned in view by /hello URI.

It is very important to include the following line to get Thymeleaf properties working on the view page.

<html xmlns:th=”http://www.thymeleaf.org">

<!DOCTYPE html>
<html xmlns:th=”http://www.thymeleaf.org">
<head>
<meta charset=”UTF-8">
<title>Welcome to page developed by Spring Thymeleaf</title>
</head>
<body>
<div class=”alert alert-danger” role=”alert” align=”center”>
<p class=”lead”>My name is</p>
<h1 class=”display-4" th:text=”${name}”></h1>
</div>
<div class=”alert alert-warning” role=”alert” align=”center”>
<p class=”lead”>My City is</p>
<h1 class=”display-4" th:text=”${city}”></h1>
</div>
</body>
</html>