tiny-interpolator

About:

A tiny, simple, template engine.

Less than 1Kb! No dependencies! Wow!

Usage:

0. Include script in HTML

<script src="interpolator.js"/></script> <!-- or wherever you put it -->

1. Create a DOM element with a unique id to use as your render-target

<div id="blog"></div>

2. Write HTML template. ES6 Template Strings are recommended for easy line break support.

let template = 
`<div class="post">
  <h1>{{title}}</h1>
  <h3>{{author.firstName}} {{author.lastName}}</h3>
  <p>{{content}}</p>
</div>`

3. Write data. This should be an array of objects, in any order you wish.

let data = [
  {
    title: 'My first blog post',
    author: {
      firstName: 'CoolGuy', //nested values supported!
      lastName: 'Jefferson'
    },
    content: 'Wow, I sure love writing blogs. What a neat new idea.'
  },
  {
    title: 'My second blog post',
    author: {
      firstName: 'Jared',
      lastName: 'Ganglyfingers'
    },
    content: 'This website is just okay, in my opinion. It could use a comments section'
  }
]

4: Create new Interpolation and render at your target.

let BlogPosts = new Interpolation(data, template);
BlogPosts.renderAt('blog')

Observe!

Other notes:

• If you wanted to use this without immediately rendering, it will work fine. You can grab the outputted text for your needs with the exposed .output property on the Interpolation.
• As of 1.0.3 you can require('tiny-interpolator') inside Node if you desire.
• Run tests with npm test.