Article updated on July 27, 2016.

In this article I want to give you an introduction to the HTML Template Language (HTL), formerly known as Sightly.

Interested in the other parts? Here they are: part 2, part 3, part 4, part 5.

I won’t go much into text, but I want to show you 10 code samples, and compare these to the existing way of component development via JSP.

The main objectives of HTL are:

  • giving back the markup, and not mixing it with code
  • everything is secure, by default (automatic context-aware escaping)
  • improve the workflow between the designer and the developer

Ready for the first code sample? Here we go!


<div>currentPageName: ${}</div>

Well that looks like a JSP, but not quite. Two main differences:

  • Extension of the file is changed to .html, so in case a designer wants to look at the file he can just open it in his tools.
  • We have only markup in the file, no inclusion of a global.jsp, just markup.


<div data-sly-test="${wcmmode.edit}">Show this only in edit mode to the author</div>

Now it is getting more interesting, we have now a data-sly-test attribute and a wcmmode object.

When the expression inside data-sly-test evaluates to false the whole tag while be hidden in the markup.


<div"${wcmmode.edit ||}">
    Show this to the author
<div data-sly-test="${!author}">
    Not in author mode anymore..

data-sly-test also supports the naming and reuse of tests, we have an expression ‘author’ that we want to reuse in other data-sly-test attributes.

These are very common use-cases and can now be done without writing any code are extension.


<div data-sly-text="${currentPage.title}">Mock page title</div>

The data-sly-text attribute will replace the value of the HTML-element with the expression provided.

In the example above the page-title will be printed. But the mock value can still be in there to make it easier to view the file in HTML-editors.


<ul data-sly-list.child="${currentPage.listChildren}">

Here you see an example of a loop, the list object is passed to the data-sly-list attribute. Based on the name (‘child’) you can reference each item in the loop.

The output is here that see you a list of the sub-pages with all the page-titles.

This is quite a basic list example, let go to a more advanced one!


<ul data-sly-list.child="${currentPage.listChildren}">
    <li class="${ childList.odd ? 'odd' : 'even'}">${child.title}</li>

In this sample you see a few new elements:

  1. inside a data-sly-list you have access to a list-variable that contain things like : index, count, odd, even, first, last, middle
  2. in the expression you see the use of the ternary operator


<div data-sly-resource="${'par' @ resourceType='foundation/components/parsys'}"></div>

With data-sly-resource you can include components and resources. In the above sample you include of standard paragraph system in your template.


<footer data-sly-resource="${'footer' @ resourceType='myproject/footer', wcmmode='disabled'}"></footer>

So you are in need to disable the wcmmode for a specific component? That can now be done via the wcmmode-option when including a component.


${pageProperties.jcr:title || properties.title || "No title"}

Within an expression you can use the ‘or’ operator to define fallbacks in case properties are empty. You read the expression from left to right, in the example here “No title” is shown when jcr:title and properties.title are both empty.


<div data-sly-include="/libs/wcm/core/components/init/init.jsp"></div>

<div data-sly-include="myfile.html"></div>

Via data-sly-include you can include other files like the cq:include tag. From HTL you can still use and re-use JSP files if you want. Like shown here for the author-environment.

In my next article I will explain more advanced topics on how to use your custom Java-classes with HTL.



Here are the other articles of my introduction series:

Other posts on the topic:

And here other resources to learn more about it: