Thymeleaf

https://www.thymeleaf.org/doc/
Admin
Thymeleaf is a modern server-side Java template engine for web and standalone environments, capable...
Tokens:74,551
Snippets:531
Trust Score:9.5
Update:3 weeks ago
Show doc for...
Tokens:
Raw
### Context-relative URL output

Source: https://www.thymeleaf.org/doc/articles/standardurlsyntax.html

The resulting HTML output for the context-relative URL example, showing the context path '/myapp' prepended.

```html
<a href="/myapp/order/list">
```

--------------------------------

### Equivalent Java code for selection expression

Source: https://www.thymeleaf.org/doc/articles/standarddialect5minutes.html

Equivalent Java code for the selection expression example.

```java
{
  // th:object="${book}"
  final Book selection = (Book) context.getVariable("book");
  // th:text="*{title}"
  output(selection.getTitle());
}
```

--------------------------------

### Selection expression example

Source: https://www.thymeleaf.org/doc/articles/standarddialect5minutes.html

Selection expression that executes on a previously selected object.

```text
*{customer.name}
```

--------------------------------

### Absolute URL output

Source: https://www.thymeleaf.org/doc/articles/standardurlsyntax.html

The resulting HTML output for the absolute URL example, showing the URL unchanged.

```html
<a href="http://www.thymeleaf/documentation.html">
```

--------------------------------

### Context-relative URL with th:href

Source: https://www.thymeleaf.org/doc/articles/standardurlsyntax.html

Creates a context-relative URL starting with '/'. The output will include the application's context path.

```html
<a th:href="@{/order/list}">
```

--------------------------------

### Double-brace Syntax Example and Output

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Shows the double-brace syntax (${{...}}) applying the Conversion Service to format an Integer with thousands separators. The first block is the input template, the second is the resulting output.

```html
<p th:text="${val}">...</p>
<p th:text="${{val}}">...</p>
```

```html
<p>1234567890</p>
<p>1,234,567,890</p>
```

--------------------------------

### Server-relative URL output

Source: https://www.thymeleaf.org/doc/articles/standardurlsyntax.html

The resulting HTML output for the server-relative URL example, showing the URL without the current application's context.

```html
<a href="/billing-app/showDetails.htm">
```

--------------------------------

### Generated HTML output for multi-valued checkboxes

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Shows the HTML output generated by the multi-valued checkbox example. Each input gets a sequence suffix in its id, and hidden inputs with name="_features" are automatically added to handle unchecked checkboxes. The #ids.prev function retrieves the last generated sequence value.

```html
<ul>
  <li>
    <input id="features1" name="features" type="checkbox" value="SEEDSTARTER_SPECIFIC_SUBSTRATE" />
    <input name="_features" type="hidden" value="on" />
    <label for="features1">Seed starter-specific substrate</label>
  </li>
  <li>
    <input id="features2" name="features" type="checkbox" value="FERTILIZER" />
    <input name="_features" type="hidden" value="on" />
    <label for="features2">Fertilizer used</label>
  </li>
  <li>
    <input id="features3" name="features" type="checkbox" value="PH_CORRECTOR" />
    <input name="_features" type="hidden" value="on" />
    <label for="features3">PH Corrector used</label>
  </li>
</ul>
```

--------------------------------

### Server-relative link expression

Source: https://www.thymeleaf.org/doc/articles/standarddialect5minutes.html

Starts with ~ to indicate a server-relative URL. No application context is prefixed.

```HTML
<a th:href="@{~/contents/main}">...</a>
```

--------------------------------

### Example view file (1)

Source: https://www.thymeleaf.org/doc/articles/layouts.html

A Thymeleaf view file that defines a content fragment using th:fragment="content". It displays a greeting with the authenticated user's name.

```HTML
<!DOCTYPE html>
<html>
  <head>
    ...
  </head>
  <body>
    <div class="container" th:fragment="content">
      <p>
        Hello <span th:text="${#authentication.name}">User</span>!
        Welcome to the Spring MVC Quickstart application!
      </p>
    </div>
  </body>
</html>
```

--------------------------------

### th:action, th:value, th:href attribute examples

Source: https://www.thymeleaf.org/doc/articles/standarddialect5minutes.html

Examples of th attributes that set standard HTML attribute values: th:action, th:value, and th:href. Each evaluates its expression and assigns the result to the corresponding attribute.

```html
<form th:action="@{/createOrder}">
```

```html
<input type="button" th:value="#{form.submit}" />
```

```html
<a th:href="@{/admin/users}">
```

--------------------------------

### Expression preprocessing example

Source: https://www.thymeleaf.org/doc/articles/standarddialect5minutes.html

Uses __...__ syntax to preprocess an expression. The inner ${sel.code} is evaluated first, and its result is used as part of the surrounding expression (here, an internationalization key).

```HTML
#{selection.__${sel.code}__}
```

--------------------------------

### Markup selector example

Source: https://www.thymeleaf.org/doc/articles/layouts.html

Includes a section with class="description" from an external URL using a markup selector in th:insert.

```html
<div th:insert="https://www.thymeleaf.org :: section.description" >...</div>
```

--------------------------------

### HTML template using the new dialect

Source: https://www.thymeleaf.org/doc/articles/sayhelloextendingthymeleaf5minutes.html

Example HTML template that uses the new dialect attribute seamlessly. The surrounding text indicates this is the template where the custom attribute works.

```html
<p>Hello World!</p>
```

--------------------------------

### Rendered HTML for dynamic rows after adding two rows

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Example of the resulting HTML after pressing "Add Row" twice. It shows how the preprocessing expressions are resolved to concrete indices (rows[0], rows[1]) in the rendered form fields.

```html
<tbody>
  <tr>
    <td>1</td>
    <td>
      <select id="rows0.variety" name="rows[0].variety">
        <option selected="selected" value="1">Thymus vulgaris</option>
        <option value="2">Thymus x citriodorus</option>
        <option value="3">Thymus herba-barona</option>
        <option value="4">Thymus pseudolaginosus</option>
        <option value="5">Thymus serpyllum</option>
      </select>
    </td>
    <td>
      <input id="rows0.seedsPerCell" name="rows[0].seedsPerCell" type="text" value="" />
    </td>
    <td>
      <button name="removeRow" type="submit" value="0">Remove row</button>
    </td>
  </tr>
  <tr>
    <td>2</td>
    <td>
      <select id="rows1.variety" name="rows[1].variety">
        <option selected="selected" value="1">Thymus vulgaris</option>
        <option value="2">Thymus x citriodorus</option>
        <option value="3">Thymus herba-barona</option>
        <option value="4">Thymus pseudolaginosus</option>
        <option value="5">Thymus serpyllum</option>
      </select>
    </td>
    <td>
      <input id="rows1.seedsPerCell" name="rows[1].seedsPerCell" type="text" value="" />
    </td>
    <td>
      <button name="removeRow" type="submit" value="1">Remove row</button>
    </td>
  </tr>
</tbody>
```

--------------------------------

### HTML usage of hello:sayto attribute

Source: https://www.thymeleaf.org/doc/articles/sayhelloextendingthymeleaf5minutes.html

Example of using the custom hello:sayto attribute in an HTML template. The attribute value is the name to greet.

```html
<p hello:sayto="World">Hi ya!</p>
```

--------------------------------

### IPostProcessorDialect interface definition

Source: https://www.thymeleaf.org/doc/tutorials/3.1/extendingthymeleaf.html

Defines the IPostProcessorDialect interface, which extends IDialect and provides methods to get the post-processor precedence and the set of post-processors. Use this to create a custom dialect that adds post-processing capabilities.

```java
public interface IPostProcessorDialect extends IDialect {

    public int getDialectPostProcessorPrecedence();
    public Set<IPostProcessor> getPostProcessors();

}
```

--------------------------------

### Signup controller method

Source: https://www.thymeleaf.org/doc/articles/layouts.html

Handles POST /signup, validates the form, saves the account, signs in the user, adds a success flash attribute, and redirects to the home page.

```java
@PostMapping("signup")
String signup(@Valid @ModelAttribute SignupForm signupForm,
        Errors errors, RedirectAttributes ra) {
    
    if (errors.hasErrors()) {
        return SIGNUP_VIEW_NAME;
    }
    Account account = accountRepository.save(signupForm.createAccount());
    userService.signin(account);
    // see /WEB-INF/i18n/messages.properties and /WEB-INF/views/homeSignedIn.html
    MessageHelper.addSuccessAttribute(ra, "signup.success");
    
    return "redirect:/";
    
}
```

--------------------------------

### Message expression example

Source: https://www.thymeleaf.org/doc/articles/standarddialect5minutes.html

Message expression that retrieves a locale-specific message by key.

```text
#{main.title}
```

--------------------------------

### Create a model with open/close tags and text

Source: https://www.thymeleaf.org/doc/tutorials/3.1/extendingthymeleaf.html

Creates a model by adding open tag, text, and close tag events one at a time. Events must be created in order because models are sequences of events, not DOM nodes.

```java
final IModelFactory modelFactory = context.getModelFactory();

final IModel model = modelFactory.createModel();

model.add(modelFactory.createOpenElementTag("div", "class", "headlines"));
model.add(modelFactory.createText(HtmlEscape.escapeHtml5(headlineText)));
model.add(modelFactory.createCloseElementTag("div"));
```

--------------------------------

### Register SayToPlanetAttributeTagProcessor in HelloDialect.getProcessors()

Source: https://www.thymeleaf.org/doc/articles/sayhelloagainextendingthymeleafevenmore5minutes.html

Modify the getProcessors() method of HelloDialect to register the new SayToPlanetAttributeTagProcessor. The dialect prefix is passed to the processor constructor because the user may have chosen a different prefix at engine configuration time.

```java
public class HelloDialect extends AbstractProcessorDialect {

  ...

  /*
   * Initialize the dialect's processors.
   *
   * Note the dialect prefix is passed here because, although we set
   * "hello" to be the dialect's prefix at the constructor, that only
   * works as a default, and at engine configuration time the user
   * might have chosen a different prefix to be used.
   */
  public Set<IProcessor> getProcessors(final String dialectPrefix) {
      final Set<IProcessor> processors = new HashSet<IProcessor>();
      processors.add(new SayToAttributeTagProcessor(dialectPrefix));
      processors.add(new SayToPlanetAttributeTagProcessor(dialectPrefix));
      return processors;
  }

  ...

}
```

--------------------------------

### HelloDialect class

Source: https://www.thymeleaf.org/doc/articles/sayhelloextendingthymeleaf5minutes.html

Extends AbstractProcessorDialect to register the SayToAttributeTagProcessor. The dialect prefix defaults to "hello" but can be overridden at engine configuration time, so the actual prefix is passed to getProcessors.

```java
public class HelloDialect extends AbstractProcessorDialect {

    public HelloDialect() {
        super(
                "Hello Dialect",    // Dialect name
                "hello",            // Dialect prefix (hello:*)
                1000);              // Dialect precedence
    }

    
    /*
     * Initialize the dialect's processors.
     *
     * Note the dialect prefix is passed here because, although we set
     * "hello" to be the dialect's prefix at the constructor, that only
     * works as a default, and at engine configuration time the user
     * might have chosen a different prefix to be used.
     */
    public Set<IProcessor> getProcessors(final String dialectPrefix) {
        final Set<IProcessor> processors = new HashSet<IProcessor>();
        processors.add(new SayToAttributeTagProcessor(dialectPrefix));
        return processors;
    }


}
```

--------------------------------

### Request mappings for showing and saving seed starters

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Mapped methods for the controller: showSeedstarters displays the form page and sets the current date, while saveSeedstarter processes the addition of new SeedStarter objects, returning to the form on validation errors or redirecting after a successful save.

```java
@RequestMapping({"/","/seedstartermng"})
public String showSeedstarters(final SeedStarter seedStarter) {
    seedStarter.setDatePlanted(Calendar.getInstance().getTime());
    return "seedstartermng";
}

@RequestMapping(value="/seedstartermng", params={"save"})
public String saveSeedstarter(
        final SeedStarter seedStarter, final BindingResult bindingResult, final ModelMap model) {
    if (bindingResult.hasErrors()) {
        return "seedstartermng";
    }
    this.seedStarterService.add(seedStarter);
    model.clear();
    return "redirect:/seedstartermng";
}
```

--------------------------------

### Use #fields.hasAnyErrors() and #fields.allErrors()

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Uses the convenience methods #fields.hasAnyErrors() and #fields.allErrors() as equivalents to #fields.hasErrors('*') and #fields.errors('*').

```html
<div th:if="${#fields.hasAnyErrors()}">
  <p th:each="err : ${#fields.allErrors()}" th:text="${err}">...</p>
</div>
```

--------------------------------

### Variable expression example

Source: https://www.thymeleaf.org/doc/articles/standarddialect5minutes.html

Variable expression that evaluates an OGNL or Spring EL expression on context variables (model attributes).

```text
${session.user.name}
```

--------------------------------

### Footer template with multiple fragments

Source: https://www.thymeleaf.org/doc/articles/layouts.html

Defines two footer fragments (footer and footer-admin) in one file, used by the conditional selection example.

```html
<!DOCTYPE html>
<html>
  <head>
    ...
  </head>
  <body>
    <!-- /*  Multiple fragments may be defined in one file */-->
    <div th:fragment="footer">
      &copy; 2016 Footer
    </div>
    <div th:fragment="footer-admin">
      &copy; 2016 Admin Footer
    </div>
  </body>
</html>
```

--------------------------------

### th:text attribute example

Source: https://www.thymeleaf.org/doc/articles/standarddialect5minutes.html

Replaces the body of a tag with the value of the message expression #{msg.welcome}. Demonstrates the prototyping ability of th:text.

```html
<p th:text="#{msg.welcome}">Welcome everyone!</p>
```

--------------------------------

### Link expression output with application context

Source: https://www.thymeleaf.org/doc/articles/standarddialect5minutes.html

Example of the rendered HTML after Thymeleaf processes the context-relative link expression, prefixed with the application context.

```HTML
<a href="/myapp/order/list">...</a>
```

--------------------------------

### Send email with MimeMessageHelper

Source: https://www.thymeleaf.org/doc/articles/springmail.html

Shows how to create and send a simple email using Spring's MimeMessageHelper and the previously configured mailSender. The helper is initialized with UTF-8 encoding, and the message is sent after setting from, to, subject, and text.

```java
final MimeMessage mimeMessage = this.mailSender.createMimeMessage();
final MimeMessageHelper message = new MimeMessageHelper(mimeMessage, "UTF-8");
message.setFrom("sender@example.com");
message.setTo("recipient@example.com");
message.setSubject("This is the message subject");
message.setText("This is the message body");
this.mailSender.send(mimeMessage);
```

--------------------------------

### Link expression output with session ID (URL rewriting)

Source: https://www.thymeleaf.org/doc/articles/standarddialect5minutes.html

Example of a rewritten URL when sessions need to be kept and cookies are not enabled, adding a jsessionid parameter.

```HTML
<a href="/myapp/order/list;jsessionid=23fa31abd41ea093">...</a>
```

--------------------------------

### Spanish properties file SayToPlanetAttributeTagProcessor_es.properties

Source: https://www.thymeleaf.org/doc/articles/sayhelloagainextendingthymeleafevenmore5minutes.html

Spanish properties file for the processor, defining the message key msg.helloplanet with a placeholder for the planet name.

```properties
    msg.helloplanet=&iexcl;Hola, planeta {0}!
```

--------------------------------

### Standard Expression parsing and execution

Source: https://www.thymeleaf.org/doc/tutorials/3.1/extendingthymeleaf.html

Illustrates the steps to evaluate a Thymeleaf Standard Expression: obtain the parser, parse the attribute value, and execute the expression to get the result.

```java
final IStandardExpressionParser parser =
        StandardExpressions.getExpressionParser(configuration);

final IStandardExpression expression = parser.parseExpression(context, attributeValue);

final Integer position = (Integer) expression.execute(context);
```

--------------------------------

### th:replace inclusion statement

Source: https://www.thymeleaf.org/doc/articles/layouts.html

Example of the th:replace attribute used to include a fragment. The fragment is specified as 'fragments/header :: header', which refers to the 'header' fragment in the 'fragments/header' template.

```html
<div th:replace="fragments/header :: header">...</div>
```

--------------------------------

### Server-relative URL with th:href

Source: https://www.thymeleaf.org/doc/articles/standardurlsyntax.html

Creates a server-relative URL using '~' to link to a different context on the same server.

```html
<a th:href="@{~/billing-app/showDetails.htm}">
```

--------------------------------

### Thymeleaf seed starter listing template

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Complete Thymeleaf template fragment for the seed starter listing page. Uses th:unless with #lists.isEmpty to conditionally render, externalized messages for headers, th:each for iteration, double-brace syntax for date formatting, literal substitution for boolean and enum messages, and nested tables for row details.

```html
<div class="seedstarterlist" th:unless="${#lists.isEmpty(allSeedStarters)}">
    
  <h2 th:text="#{title.list}">List of Seed Starters</h2>
  
  <table>
    <thead>
      <tr>
        <th th:text="#{seedstarter.datePlanted}">Date Planted</th>
        <th th:text="#{seedstarter.covered}">Covered</th>
        <th th:text="#{seedstarter.type}">Type</th>
        <th th:text="#{seedstarter.features}">Features</th>
        <th th:text="#{seedstarter.rows}">Rows</th>
      </tr>
    </thead>
    <tbody>
      <tr th:each="sb : ${allSeedStarters}">
        <td th:text="${{sb.datePlanted}}">13/01/2011</td>
        <td th:text="#{|bool.${sb.covered}|}">yes</td>
        <td th:text="#{|seedstarter.type.${sb.type}|}">Wireframe</td>
        <td th:text="${#strings.arrayJoin(
                           #messages.arrayMsg(
                               #strings.arrayPrepend(sb.features,'seedstarter.feature.')),
                           ', ')}">Electric Heating, Turf</td>
        <td>
          <table>
            <tbody>
              <tr th:each="row,rowStat : ${sb.rows}">
                <td th:text="${rowStat.count}">1</td>
                <td th:text="${row.variety.name}">Thymus Thymi</td>
                <td th:text="${row.seedsPerCell}">12</td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</div>
```

--------------------------------

### th:each attribute example

Source: https://www.thymeleaf.org/doc/articles/standarddialect5minutes.html

Repeats the <li> element for each item in the ${books} collection, creating an iteration variable 'book' with syntax similar to Java foreach. Sets the text content to ${book.title}.

```html
<li th:each="book : ${books}" th:text="${book.title}">En las Orillas del Sar</li>
```

--------------------------------

### Path variable in @{...} with rendered output

Source: https://www.thymeleaf.org/doc/articles/standardurlsyntax.html

Uses a path variable placeholder in the URL path and shows the rendered output. The path variable is replaced by the parameter value, and remaining parameters become query parameters.

```html
<a th:href="@{/order/{id}/details(id=3,action='show_all')}">
```

```html
<a href="/order/3/details?action=show_all">
```

--------------------------------

### Use #fields.hasGlobalErrors() and #fields.globalErrors()

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Uses the convenience methods #fields.hasGlobalErrors() and #fields.globalErrors() as equivalents to #fields.hasErrors('global') and #fields.errors('global').

```html
<div th:if="${#fields.hasGlobalErrors()}">
  <p th:each="err : ${#fields.globalErrors()}" th:text="${err}">...</p>
</div>
```

--------------------------------

### URL expression in th:action

Source: https://www.thymeleaf.org/doc/articles/standardurlsyntax.html

Use URL expressions in th:action attributes to generate form submission URLs. This example shows a simple URL expression without parameters.

```html
<form th:action="@{/order/processOrder}">
```

--------------------------------

### Manual Conversion with #conversions.convert

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Uses the #conversions utility object to manually execute the Conversion Service. The convert method accepts an Object and a target Class or String (java.lang package can be omitted).

```html
<p th:text="${'Val: ' + #conversions.convert(val,'String')}">...</p>
```

--------------------------------

### Enum type internationalization with literal substitution

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Displays the seed starter type by prepending 'seedstarter.type.' to the enum value and using the result as a message key for internationalization.

```html
<td th:text="#{|seedstarter.type.${sb.type}|}">Wireframe</td>
```

--------------------------------

### Access ServletContext attributes with application prefix

Source: https://www.thymeleaf.org/doc/articles/springmvcaccessdata.html

Use the `application.` prefix to access ServletContext attributes in Thymeleaf templates. The example retrieves a specific attribute and iterates over all attributes, displaying each key and value.

```html
        <table>
            <tr>
                <td>My context attribute</td>
                <!-- Retrieves the ServletContext attribute 'myContextAttribute' -->
                <td th:text="${application.myContextAttribute}">42</td>
            </tr>
            <tr th:each="attr : ${application}">
                <td th:text="${attr.key}">jakarta.servlet.context.tempdir</td>
                <td th:text="${attr.value}">/tmp</td>
            </tr>
        </table>
```

--------------------------------

### Fragment definition with parameters

Source: https://www.thymeleaf.org/doc/articles/standarddialect5minutes.html

Defines a fragment that accepts parameters, which are used within the fragment.

```HTML
<div th:fragment="main(title,content)">
  <h1 th:text="${title}">A title</h1>
  <p th:text="${content}">Some content</p>
</div>
```

--------------------------------

### IPreProcessorDialect interface

Source: https://www.thymeleaf.org/doc/tutorials/3.1/extendingthymeleaf.html

Defines a pre-processor dialect, which applies before the engine starts executing processors for a template. It has its own dialect-level precedence and lacks a prefix because pre-processors handle all events rather than matching specific ones.

```java
public interface IPreProcessorDialect extends IDialect {

    public int getDialectPreProcessorPrecedence();
    public Set<IPreProcessor> getPreProcessors();

}
```

--------------------------------

### SeedStarterMngController class with autowired services

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Defines the single controller class for the application, handling all server interactions for the seed starter management page. It autowires the VarietyService and SeedStarterService dependencies.

```java
@Controller
public class SeedStarterMngController {

    @Autowired
    private VarietyService varietyService;
    
    @Autowired
    private SeedStarterService seedStarterService;

    ...

}
```

--------------------------------

### Calling alert fragment with simple content (task/list.html)

Source: https://www.thymeleaf.org/doc/articles/layouts.html

Shows how to call the alert fragment with simple content using layout:insert and th:with to set type and header. The th:remove="tag" removes the wrapper div.

```HTML
    <div layout:insert="~{task/alert :: alert}" th:with="type='info', header='Info'" th:remove="tag">
        <!--/* Implements alert content fragment with simple content */-->
        <th:block layout:fragment="alert-content">
            <p><em>This is a simple list of tasks!</em></p>
        </th:block>
    </div>
```

--------------------------------

### th:errorclass example and rendered output

Source: https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html

Shows the th:errorclass attribute usage and the rendered output when the field has errors. The attribute appends the specified CSS class to the tag if the field has any associated errors.

```html
<input type="text" th:field="*{datePlanted}" class="small" th:errorclass="fieldError" />
```

```html
<input type="text" id="datePlanted" name="datePlanted" value="2013-01-01" class="small fieldError" />
```

--------------------------------

### URL expression with dynamic parameter (shortcut)

Source: https://www.thymeleaf.org/doc/articles/standardurlsyntax.html

URL expression with a literal base path and a dynamic parameter. This is a shortcut for the form where the base is an expression.

```html
<a th:href="@{/order/details(id=${order.id})}">
```
Tokens:
Raw