TemplifyJS

A simple template language engine for Typescript

Introduction

Templify is a versatile JavaScript library that simplifies template rendering by allowing you to create templates with placeholders and easily render them with data. This library is designed to be flexible and user-friendly, making it suitable for a wide range of applications.

Key Features

Variable Rendering: Templify supports the rendering of simple variables within templates, making it easy to inject dynamic data into your content.

• Custom Pipes: You can create custom pipes to modify and format data within templates. Templify provides the ability to define and apply custom pipes, enhancing the flexibility of your template rendering.
• Foreach Loops: Templify simplifies the rendering of collections by supporting foreach loops. You can easily iterate through arrays or lists and render the content accordingly.
• Conditional Statements: The library allows you to include if-else statements in your templates, making it possible to conditionally render content based on the provided data.
• Nested Structures: Templify supports nested structures, enabling the rendering of complex data structures and nested loops with ease.

npm i templify-js

Using

Simple import Templify class and create new instance with template string. Then call render method with data object. That's all.

import { Templify } from 'templify-js';

const template = `
	<h1>{{ title }}</h1>
	<ul>
		{% foreach:skills %}
			<li>{{ item }}</li>
		{% endforeach %}
	</ul>
`;

const data = {
	title: 'My skills',
	skills: ['HTML', 'CSS', 'JS']
};

const templify = new Templify(template);

const output = templify.render(data);

Language

Simple variable print

{{ variable }} Prints variable

Example:

<h1>My name is {{ name }}</h1>

Data:

{ "name": "Standa" }

Output:

My name is Standa

Variable with pipe

{{ variable|pipe }} Prints modified variable

Example:

<div>How big is {{ animal|upper }}</div>

Data:

{ "animal": "Elephant" }

Output:

How big is ELEPHANT

Simple foreach

{% foreach:variable %} Foreach your variable {% endforeach %} End foreach

Example:

<ul>
	{% foreach:skills %}
		<li>{{ item }}</li>
	{% endforeach %}
</ul>

Data:

{ "skills": ["HTML", "CSS", "JS"] }

Output:

<ul>
	<li>HTML</li>
	<li>CSS</li>
	<li>JS</li>
</ul>

Foreach with object array

{% foreach:variable %} Foreach your variable {% endforeach %} End foreach

Example:

<ul>
	{% foreach:skills %}
		<li>{{ item.name }} - {{ item.level }}</li>
	{% endforeach %}
</ul>

Data:

{ "skills": [
	{ "name": "HTML", "level": "advanced" },
	{ "name": "CSS", "level": "advanced" },
	{ "name": "JS", "level": "beginner" }
] }

Output:

<ul>
	<li>HTML - advanced</li>
	<li>CSS - advanced</li>
	<li>JS - beginner</li>
</ul>

Conditional statement

{% if:variable %} If your variable is true {% else %} Else statement {% endif %} End if statement

Example:

{% if:isAdult %}
	<p>You are adult</p>
{% else %}
	<p>You are not adult</p>
{% endif %}

Data:

{ "isAdult": true }

Output:

<p>You are adult</p>

Register custom pipe

You can add your own pipe to Templify. Just call addPipe method with pipe name and function. Function must return string.

Example:

import { Templify } from 'templify-js';

const template = `
	<h1>{{ title|trim }}</h1>
`;

const data = {
	title: '  My title  '
};

const templify = new Templify(template);

templify.addPipe('trim', (value: string) => {
	return value.trim();
});

const output = templify.render(data);

Output:

<h1>My title</h1>