nunjucks
A powerful templating engine with inheritance, asynchronous control, and more (jinja2 inspired)
Top Related Projects
Minimal templating on steroids.
Pug – robust, elegant, feature rich template engine for Node.js
Logic-less Ruby templates.
Quick Overview
Nunjucks is a powerful templating engine for JavaScript, inspired by Jinja2. It provides a rich set of features for creating dynamic HTML templates, including inheritance, macros, and asynchronous control. Nunjucks is commonly used in Node.js applications but can also be used in the browser.
Pros
- Rich feature set, including template inheritance, macros, and custom filters
- Excellent performance, with precompilation support for faster rendering
- Compatible with both Node.js and browser environments
- Active community and well-maintained project
Cons
- Steeper learning curve compared to simpler templating engines
- Syntax can be verbose for complex operations
- Limited built-in async support (though it can be extended)
Code Examples
- Basic template rendering:
const nunjucks = require('nunjucks');
const template = 'Hello {{ name }}!';
const output = nunjucks.renderString(template, { name: 'World' });
console.log(output); // Output: Hello World!
- Using template inheritance:
<!-- base.html -->
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}Default Title{% endblock %}</title>
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>
<!-- child.html -->
{% extends "base.html" %}
{% block title %}My Page{% endblock %}
{% block content %}
<h1>Welcome to my page!</h1>
{% endblock %}
- Creating and using a custom filter:
const nunjucks = require('nunjucks');
nunjucks.configure({ autoescape: true });
nunjucks.addFilter('shorten', function(str, count) {
return str.slice(0, count || 5) + '...';
});
const template = '{{ "Hello World" | shorten(7) }}';
console.log(nunjucks.renderString(template)); // Output: Hello W...
Getting Started
To use Nunjucks in your project:
-
Install Nunjucks:
npm install nunjucks -
Set up Nunjucks in your Node.js application:
const nunjucks = require('nunjucks'); nunjucks.configure('views', { autoescape: true, express: app // if using Express }); -
Create a template file (e.g.,
template.html):<h1>Hello {{ name }}!</h1> -
Render the template:
const result = nunjucks.render('template.html', { name: 'World' }); console.log(result); // Output: <h1>Hello World!</h1>
Competitor Comparisons
Minimal templating on steroids.
Pros of Handlebars.js
- Simpler syntax with fewer features, making it easier to learn and use
- Better performance due to precompilation of templates
- Wider adoption and larger community support
Cons of Handlebars.js
- Less powerful and flexible compared to Nunjucks
- Limited built-in helpers and filters
- Lack of template inheritance and macros
Code Comparison
Handlebars.js:
<div class="entry">
<h1>{{title}}</h1>
{{#if author}}
<h2>By {{author.name}}</h2>
{{/if}}
</div>
Nunjucks:
<div class="entry">
<h1>{{ title }}</h1>
{% if author %}
<h2>By {{ author.name }}</h2>
{% endif %}
</div>
Both templating engines share similar syntax for basic variable interpolation and conditionals. However, Nunjucks offers more advanced features like template inheritance, macros, and asynchronous rendering, which are not available in Handlebars.js.
Handlebars.js is known for its simplicity and performance, making it a popular choice for projects that require straightforward templating. On the other hand, Nunjucks provides more powerful features and flexibility, making it suitable for complex templating needs.
The choice between the two depends on the specific requirements of your project, the level of complexity needed in your templates, and your familiarity with each engine's syntax and ecosystem.
Pug – robust, elegant, feature rich template engine for Node.js
Pros of Pug
- More concise syntax, reducing boilerplate code
- Built-in features like mixins and includes for better code organization
- Faster rendering performance in some scenarios
Cons of Pug
- Steeper learning curve due to its unique syntax
- Less flexibility in mixing with plain HTML
- Potential readability issues for developers unfamiliar with the syntax
Code Comparison
Pug:
doctype html
html(lang="en")
head
title= pageTitle
body
h1 Welcome
p= message
Nunjucks:
<!DOCTYPE html>
<html lang="en">
<head>
<title>{{ pageTitle }}</title>
</head>
<body>
<h1>Welcome</h1>
<p>{{ message }}</p>
</body>
</html>
Summary
Pug offers a more concise syntax and built-in features for code organization, potentially leading to faster development and rendering. However, it comes with a steeper learning curve and less flexibility in mixing with plain HTML. Nunjucks, on the other hand, provides a syntax closer to traditional HTML, making it easier for developers to adopt but potentially requiring more verbose code. The choice between the two often depends on project requirements, team familiarity, and personal preference.
Logic-less Ruby templates.
Pros of Mustache
- Simpler syntax and easier to learn for beginners
- Language-agnostic with implementations in many programming languages
- Lightweight and faster rendering for simple templates
Cons of Mustache
- Limited functionality compared to Nunjucks (no complex logic or control structures)
- Lack of built-in filters and helper functions
- Less active development and community support
Code Comparison
Mustache:
{{#items}}
<li>{{name}}: {{price}}</li>
{{/items}}
Nunjucks:
{% for item in items %}
<li>{{ item.name }}: {{ item.price | currency }}</li>
{% endfor %}
Mustache uses a minimalist approach with simple tags, while Nunjucks offers more advanced features like built-in filters (e.g., currency) and explicit control structures. Nunjucks provides greater flexibility for complex templates, whereas Mustache focuses on simplicity and logic-less templates.
Mustache is ideal for projects requiring basic templating across multiple languages, while Nunjucks is better suited for more complex JavaScript-based applications that need advanced templating features and control flow.
Convert 
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
Nunjucks
Nunjucks is a full featured templating engine for javascript. It is heavily inspired by jinja2. View the docs here.
Installation
npm install nunjucks
To use the file watcher built-in to Nunjucks, Chokidar must be installed separately.
npm install nunjucks chokidar
(View the CHANGELOG)
Documentation
See here.
Browser Support
Supported in all modern browsers. For IE8 support, use es5-shim.
Tests
Run the tests with npm test.
Watch master branch's tests running in the browser.
Mailing List
Join our mailing list and get help with and issues you have: https://groups.google.com/forum/?fromgroups#!forum/nunjucks
Want to help?
Contributions are always welcome! Before you submit an issue or pull request, please read our contribution guidelines.
Top Related Projects
Minimal templating on steroids.
Pug – robust, elegant, feature rich template engine for Node.js
Logic-less Ruby templates.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot