wjst

Wjst is an awesome, Django/Jinja-like template engine for node.js.

Features

• Available for node.js and major web browsers!
• Express compatible.
• Object-Oriented template inheritance.
• Apply filters and transformations to output in your templates.
• Automatically escapes all output for safe HTML rendering.
• Lots of iteration and conditionals supported.
• Robust without the bloat.
• Extendable and customizable. See Wjst-Extras for some examples.
• Great code coverage.

Need Help? Have Questions? Comments?

• StackOverflow
• Telegram

Installation

npm install wjst

Documentation

All documentation can be viewed online on the Wjst Website.

Basic Example

Template code index.html

<h1>{{ pagename|title }}</h1>
<ul>
{% for author in authors %}
    <li{% if loop.first %} class="first"{% endif %}>{{ author }}</li>
{% endfor %}
</ul>

node.js code

const wjst = require("wjst");
const template = wjst.compileFile("./index.html");
const output = template({
	pagename: "awesome people",
	authors: ["Den", "Paul", "Jane"],
});

Output

<h1>Awesome People</h1>
<ul>
	<li class="first">Den</li>
	<li>Paul</li>
	<li>Jane</li>
</ul>

For working examples you can checkup at examples/basic

How it works

Wjst reads template files and translates them into cached javascript functions. When we later render a template we call the evaluated function, passing a context object as an argument.

Filters

Wjst includes many useful filters to transform your data:

• addslashes – Escape quotes with backslashes.

  {{ '"quoted"'|addslashes }}
  <!-- "quoted" -->

• capitalize – Capitalize the first letter of a string.

  {{ 'i like Burritos'|capitalize }}
  <!-- I like burritos -->

• date – Format JavaScript Date objects.

  {{ now|date('Y-m-d') }}

• default – Provide a default value when a variable is falsy.

  {{ missing|default('Tacos') }}

• escape (e) – HTML escape text. Pass "js" to escape for JavaScript.

  {{ '<div>'|escape }}
  {{ '<div>'|e('js') }}

• first – Return the first item in an array.

  {{ my_list|first }}

• groupBy – Group an array of objects by a key.

  {% for group in users|groupBy('age') %}
    <h2>{{ loop.key }}</h2>
  {% endfor %}

• join – Join array elements with a delimiter.

  {{ my_list|join(', ') }}

• json (json_encode) – JSON encode a value.

  {{ data|json(2) }}

• last – Return the last item in an array.

  {{ my_list|last }}

• length – Output the length of an array or string.

  {{ my_list|length }}

• lower – Convert a string to lowercase.

  {{ 'FOO'|lower }}

• raw – Mark the value as already safe.

  {{ value|raw }}

• safe – Alias of raw to bypass auto‑escaping.

  {{ value|safe }}

• sort – Sort an array.

  {{ nums|sort }}

• reverse – Reverse an array.

  {{ nums|reverse }}

• striptags – Remove HTML tags from a string.

  {{ '<p>foo</p>'|striptags }}

• title – Convert text to title case.

  {{ 'this is text'|title }}

• uniq – Remove duplicate values from an array.

  {{ [1,2,2,3]|uniq|join(',') }}

• upper – Convert a string to uppercase.

  {{ 'tacos'|upper }}

• url_encode / url_decode – Encode or decode URL components.

  {{ 'param=1'|url_encode }}
  {{ 'param%3D1'|url_decode }}

Tags

Templates can also use tags that provide flow control and inheritance:

• autoescape – Toggle automatic escaping.

  {% autoescape false %}{{ html }}{% endautoescape %}

• block – Define an overridable block in a template.

  {% block content %}...{% endblock %}

• else, elseif/elif – Used with if for conditional logic.

  {% if a %}A{% elseif b %}B{% else %}C{% endif %}

• extends – Inherit from another template.

  {% extends "./layout.html" %}

• filter – Apply a filter to a block of template code.

  {% filter upper %}hi{% endfilter %}

• for – Iterate over objects and arrays.

  {% for item in list %}{{ item }}{% endfor %}

• if – Basic conditional tag.

  {% if logged_in %}Welcome{% endif %}

• import – Import macros from another file.

  {% import './macros.html' as m %}
  {{ m.foo() }}

• include – Include another template with optional context.

  {% include './partial.html' %}

• macro – Declare reusable template functions.

  {% macro input(type, name) %}<input type="{{ type }}" name="{{ name }}">{% endmacro %}

• parent – Render the content from the parent block.

  {% block content %}Before {% parent %}{% endblock %}

• raw – Output text exactly as written.

  {% raw %}{{ not_evaluated }}{% endraw %}

• set – Set or update a template variable.

  {% set count = 1 %}

• spaceless – Remove whitespace between HTML tags.

  {% spaceless %}<p> A </p>{% endspaceless %}