yatl

JSON-based template engine

npm install yatl
2 downloads in the last month

okay, so.. what's yatl( thx to @nhunzaker for the name)... long story short.. it takes your JSON and converts it to HTML

oh yeah.. and it works, of course, on both server and browsers

Quick Start

Code:

var yatl = require('yatl');

var tpl = {
  html: {
    $in: [
      { body: {
        onload: "console.log('dom ready')",
        $in : "YO",
        $for: [3, {a: {href:'page.html',$in: 'lol'}}]
      }}
    ]
  }
}
console.log(yatl.compile(tpl));

Output:

<html>
<body onload="console.load('dom ready')">
YO
<a href="page.html">lol</a>
<a href="page.html">lol</a>
<a href="page.html">lol</a>
</body>
</html>

Documentation

the general syntax for a tag is:

{
 <tagname>: {
   <attr>: <val>
   <attr>: <val>
 }
}

Plugins:

yatl supports plugins, which means you can easily add keywords to create your own 'macros'. for instance $in and $for are plugins. you can use the .bind() function to load your own plugins

var yatl = require('yatl');
yatl.bind('attr', '$example', function(arr) {
  return 'hi from a plugin';
});

this code says that 'hi from a plugin' should be inserted into the attributes of the html tag when $example is found in the template. just replace 'attr' with 'inside' to get the output code inserted into the innerHTML

$in
{
 <tagname>: {
   $in: <param>
 }
}

params is a (string|number|array of valid yatl tags) that will be compiled and inserted into the innerHTML of the tag

$for
{
 <tagname>: {
   $for: [<times>,{tag: {}}]
 }
}

times is the numer of times the tag specified has to be repeated tag is the tag that has to be repeated

npm loves you