IntelliJ IDEA 2021.3 Help

Thymeleaf

Thymeleaf is a server-side Java template engine for both web and standalone environments. Its main goal is to bring natural templates to your development workflow — HTML that can be correctly displayed in browsers and also work as static prototypes.

Make sure the Thymeleaf plugin is enabled

  1. In the Settings/Preferences dialog (Ctrl+Alt+S) select Plugins | Installed.

  2. Make sure that the checkbox next to the Thymeleaf plugin is selected.

    Otherwise, select the checkbox to enable the plugin.

    Add Thymeleaf
  3. Apply the changes and close the dialog. Restart the IDE if prompted.

For more information, see Install plugins.

Add Thymeleaf support

You can add Thymeleaf support when creating a project or module, or for an existing project or module. IntelliJ IDEA downloads the selected Thymeleaf library files and adds them to the dependencies of the corresponding module.

You can also create a Thymeleaf project by opening an appropriate pom.xml file. In this case, Maven will manage the dependencies in your project. For more info, see Maven.

New Java Enterprise project or module with Thymeleaf

  1. From the main menu, select File | New | Project or File | New | Module.

  2. In the dialog that opens, select Java Enterprise from the list on the left and click Next.

  3. In the Dependencies list, under Implementations, select Thymeleaf, and click Next.

  4. Enter a name for your project or module and click Finish.

For more information on Java Enterprise projects, refer to Tutorial: Your first Java EE application.

New Spring project or module with Thymeleaf

  1. From the main menu, select File | New | Project or File | New | Module.

  2. In the dialog that opens, select Spring Initializr from the list on the left and click Next.

  3. From the Dependencies list, click Template Engines and select the Thymeleaf option.

    Add Thymeleaf
  4. Click Finish.

For more information on Spring projects, refer to Tutorial: Create your first Spring application.

Enable Thymeleaf support for an existing project

  1. Open the build file in the editor (pom.xml or build.gradle depending on the build tool that you use in your project).

  2. Add the following dependency, but make sure to change the version according to your project's requirements:

    <dependency> <groupId>org.thymeleaf</groupId> <artifactId>thymeleaf</artifactId> <version>3.0.12.RELEASE</version> </dependency>
    implementation('org.thymeleaf:thymeleaf:3.0.12.RELEASE')
  3. Press Ctrl+Shift+O to import the changes.

For more information on how to work with build tools, refer to Maven or Gradle.

Thymeleaf support features

Support for Thymeleaf in IntelliJ IDEA includes the following:

Code completion

Code completion for expressions and th:* attributes.

Navigation from a reference

Navigation from a reference in a template to the corresponding getter method, message in a .properties file, or another appropriate code fragment. From the main menu, select Navigate | Declaration or Usages or press Ctrl+B.

Navigation to type definitions

From the main menu, select Navigate | Type Declaration or press Ctrl+Shift+B.

Refactorings

The Rename refactoring for referenced properties, getter methods, iteration and status variables, and so on. From the main menu, select Refactor | Rename or press Shift+F6.

Inspections

Code inspections that help you find and fix unresolved references and errors in expression syntax.

Intention actions

Intention actions, such as Create property for unresolved message references or Import class for adding the import statements to org.thymeleaf.* classes.

Prototypes preview

Preview of your prototypes (the static part of your templates) in a web browser from the editor.

Preview Thymeleaf prototypes in a browser

Thymeleaf support in IntelliJ IDEA allows you preview your prototypes (the static part of your templates) in a web browser that can be accessed right from the editor.

  1. Create a new Spring Boot project with Thymeleaf as described in Add Thymeleaf support and name it demo.

  2. In the Project tool window (Alt+1), right-click the demo package located in src|main|java and select New | Java Class.

  3. Name the class MyFirstApp.

    Creating a new class for Thymeleaf preview feature
  4. Add a controller to the new class, for example:

    package com.example.thymeleaf; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; @Controller public class MyFirstApp { @RequestMapping("/") public String index() { return "start_page"; } }
  5. Under the resources directory, create a directory named templates.

  6. In templates, create an HTML file named start_page.

  7. Add Hello as a title and Start page. as a body.

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>Hello</title> </head> <body> Start page. </body> </html>
  8. You will see browser icons using which you can open the file preview. Click Google Chrome.

    The created HTML file in the IDE editor
  9. After that, a preview will open in the browser.

    File preview shown in Google Chrome
Last modified: 01 August 2022