> For the complete documentation index, see [llms.txt](https://guide-node-js.wishtack.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://guide-node-js.wishtack.io/express/templating.md).

# Templating

Express est compatible avec de nombreux moteurs de *templating* JavaScript.

Express est fourni avec les moteurs suivants : Jade, EJS et Mustache.

## Jade *(moteur par défaut)*

Une affaire de goût.

```
extends layout

block content

    if data
        div.container
            h1= title
            ul
                each person in data
                li= person.name
```

## EJS *(Embedded JavaScript)*

Syntaxe complexe.

```markup
<%- include head.ejs %>

    <% if(data) { %>
        <div class="container">
            <h1> <%= title %> </h1>
            <ul>
                <% data.forEach(function(person){ %>
                <li title="job: <%= person.job %> status: <%= person.status %>">
                <%= person.name %>
                </li>
                <% }); %>
            </ul>
        </div>
    <% } %>

<%- include foot.ejs %>
```

## JSHTML

```markup
<html>
<head>
    <title>@locals.title</title>
</head>

<body>

<ul class="Task">
@for(var taskIndex = 0, taskCount = locals.taskList.length; taskIndex < taskCount; taskIndex ++){
    var task = locals.taskList[taskIndex];
    <li class="@(taskIndex % 2 ? "Odd" : "Even")">
    <a href="/task/@task.id">@task.name</a>
    </li>
}
</ul>

</body>
</html>
```

## Mustache / Hogan.js.

Pas de précompilation des templates avec *Mustache*.

*Hoga&#x6E;**.**&#x6A;s* implémente les mêmes fonctionnalités que *Mustache* avec la précompilation en plus.

```markup
{{>head}}

{{#hasData}}
<div>
    <h1> {{title}} </h1>
    <ul>
        {{#data}}
        <li title="job: {{job}} status: {{status}}">
            {{name}}
        </li>
        {{/data}}
    </ul>
</div>
{{/hasData}}

{{>foot}}
```

## Handlebars.js

Précompilation et fonctionnalités supplémentaires par rapport à *Mustache.*

```markup
{{#if data}}
<div>
    <h1> {{title}} </h1>
    <ul>
        {{#data}}
        <li title="job: {{job}} status: {{status}}">
            {{name}}
        </li>
        {{/data}}
    </ul>
</div>
{{/if}}
```

<https://www.bearfruit.org/2014/01/20/node-js-template-showdown-5-options-compared/>

{% embed url="<https://www.bearfruit.org/2014/01/20/node-js-template-showdown-5-options-compared/>" %}
