Using plain HTML, a simple Pure.js template can be constructed like this:

<p class="my-template"> 
    Hello, my name is <span></span>. 
</p> 

The empty <span> element is where you might add data for a particular template, but you can use any HTML tag.

var data = { 
    name: 'Udis Petroyka' 
}; 
 
var directive = { 
    'span': 'name' 
}; 

In this example, we provide the data for the template in the data variable, and then provide what is called a directive that tells the templating engine how to map that data:

$p('.my-template').render(data, directive); 

Pure.js provides a global $p object upon which methods for interacting with templates are available. In this case, we are calling the render() method and passing the data and the directive as the arguments:

<p class="my-template"> 
    Hello, my name is <span>Udis Petroyka</span>. 
</p> 

This would be the rendered result of this simple example. You can learn more about Pure.js at beebole.com/pure/.