A lite but powerfull javascript template engine



A lite but powerful javascript template engine

How To


Simply load tlite on your page

T-Lite work with two methods:

  • Find : replace vars in string (more fast for small template without loops/conditions)
  • Parse : find/replace var and do loops/conditions

Each method take two arguments :

  • A template string
  • A var object

In a template, a var is represented in that syntax : {varName}. If your var is an object, you can use the normal javascript notation to go down your object : {varName.otherElement.deepInTheObject}. The var object can contain any kind of elements: vars, object, array, function... Functions are automatically called when needed.

Tlite.find('Your small template with a {something.in.big.object}', { something : {in: {big: {object: 'tlite'}}}});


Condition can check if a var exists on the object, check the equality... Like vars, anything can be used in a condition statement :

#####Simple if

Tlite.parse('<tpl id:1 if:name>Hello {name}</tpl id:1>', { name: 'Mousse' });
// boolean var with 'pseudo' else
Tlite.parse('<tpl id:1 if:name>Hello {name} !</tpl id:1><tpl id:2 if:!name>Hello unknown !</tpl id:2>', { name: false });
// function var </tpl id:2>
Tlite.parse('<tpl id:1 if:name>Hello {name} !</tpl id:1><tpl id:2 if:!name>Hello unknown !</tpl id:2>', { name: function(){ return 'James' });
Complex if

Complex if can use comparison char in this list : ===, ==, !=, <=, >=. spaces are obligatory in your if tempalte ! Condition without space will not work !

// simple var
Tlite.parse('<tpl id:1 if:age <= 60>Hello {name} !</tpl id:1><tpl id:2 if:age >= 60>Hello old men !</tpl id:2>', { name: 'James', age : 21});
Tlite.parse('<tpl id:1 if:age <= medium>Hello {name} !</tpl id:1><tpl id:2 if:age >= medium>Hello old men !</tpl id:2>', { name: 'James', age : 21, medium : 60});
//function var
Tlite.parse('<tpl id:1 if:age <= 60>Hello {name} !</tpl id:1><tpl id:2 if:age >= 60>Hello old men !</tpl id:2>', { name: 'James', age : function(){ return this.person.age; }});


For automatically made a loop thought a given array/object. For give a key and value var to simply use result :

Tlite.parse('<tpl id:1 for:loop>{key}:{value}<br></tpl id:1>', {loop:['First', 'Second', 'Third']});
Tlite.parse('<tpl id:1 for:loop>{key}:{value}<br></tpl>', {loop:{name: 'Paul', age: 24, city: 'Paris'}});

You can access to the top context with the top var :

Tlite.parse('{for loop}{key}:{value}, {top.example}<br>{/for}', {loop:['First', 'Second', 'Third'], example: 'Try it!'});

Filters can remove one or multiple var from the current object. Each element you want to filter will be separated by a pipe:

Tlite.parse('{for loop|not|that}{key}:{value}<br>{/for}', {loop:{name: 'Paul', age: 24, not: 'Paris', that: 'Test'}});


Vars containin a function will receive a context argument, representing the current level of parsed element. In a for, you can access to the key and value vars.

You can pass arguments to your function. It can be a string (for i18n services) or a other compiled var.

���```javascript Tlite.parse('{aFunction.aVar}', {aFunction: function(context, argument){ console.log(argument); return "Hey!" }, aVar: "A CAPITALIZED VAR" })); ``



  • Drop mustache syntax to a more redable sintax
  • Lightup the code
  • Drop else (because parsing LEVEL3 element with LEVEL2 match is not efficient and can make errors)


  • Change parsing method for if to prevent infinite loops. See doc
  • Can pass arguments to function


  • Fix condition/loop attached to other condition/loop not working


  • Expose API
  • Add top var to loops to access initial context
  • Improve compression


  • Improve if/else performances
  • Improve compression


  • Fix imbriqued if, better parsing


  • New interactive method, better parsing


  • Fix loops containing a condition containing a loop not working


  • Fix broken function call on minified version
  • Clean the code


  • Add filter to loops
  • Update compression method
  • Update unit test


  • Fix nested loops not working properly when accessing to the value var
  • Adding documentation


  • First release


Created by Jérémy Barbe (c) 2011 tlite is distributed under the MIT license.