Eduardo Uribe

February 2, 2022

htmlTemplateEngine

Did you know that Eleventy allows us to use Nunjucks in our .html files?

<body>
    <main>
        <h1> {{ title }} </h1>
    </main>
</body>

All that is required from us is to set the returned object property htmlTemplateEngine to "njk" or any valid template engine short name in our Eleventy configuration file (.eleventy.js).

module.exports = function(eleventyConfig) {
    return {
        htmlTemplateEngine: "njk"
    };
};

Once set our .html files will run through our selected template engine and output an .html file with our Nunjucks syntax processed.

<body>
    <main>
        <h1>htmlTemplateEngine</h1>
    </main>
</body>

Cool, now we can use Nunjucks in our .html file without having to convert it to a .njk file.