Thymeleaf Interactive Tutorial

Description

This tutorial will guide you through the most important aspects of the Thymeleaf Standard Dialects.
Reading the 5-minute introduction to Thymeleaf before starting this interactive tutorial is recommended.
At the beginning of each exercise a link to the relevant chapter of the Using Thymeleaf manual will be provided. Usually that section of the manual will contain all the information you will need to complete the exercise.
In each exercise you will be asked to complete some task editing the provided source code.
As you type into the online editor, three views will be shown:
1. Generated sources: this is the HTML code that your server will produce when the template is processed.
2. Static view: this is how you would see the template if you open it as a static file directly with a browser. This is what we called Natural templating, which allows static prototyping of web pages.
3. Dynamic view: this is the result served by your application server, it is what your users see.
The application uses modern JavaScript and CSS so a modern browser is required. A big screen is also recommended.

This interactive tutorial has been created by the Thymeleaf Team using The Thymeleaf Template Engine and other great open source tools like:

The tutorial is gracefully hosted at the Heroku Cloud Platform

Icons used in this app, except Thymeleaf logo, are created by Mark James

You can get the source code of this tutorial at GitHub.

You can find much more documentation on Thymeleaf at the Thymeleaf website.

For any questions or help, you can use the user forum.