JavaScript template engine in 2kb

Usage & examples

First of all lets define an example object.

data = {
    title: 'World'

Now we need to display it in one or more places:

<h3>Hello {{ data.title }}! </h3>

Hello {{ data.title }}!

Run example

Now lets make another, more complex example, using new variables:

var node1 = document.querySelector('input#first-name');
var node2 = document.querySelector('input#last-name');

user = {
    firstName: function(){ return node1.value; },
    lastName: function(){ return node2.value; }

<input type="text" id="first-name">
<input type="text" id="last-name">

Your name is {{ user.firstName }} {{ user.lastName }}!

How to use it

Basicaly it provides a simple API for developing a template language.

First you must define a variable:

user = {
    firstName: 'Some Name',
    lastName: function(){
        return document.querySelector('input#last-name').value;
        /* You can also pass a function. */

Than you display it in your html whenever you want.

My name is: {{user.firstName}}

After this you must activate the parser by selecting the root element:'wrapper'));

If you want to change the variable you must update the html via: