Unleash awesomeness. Private packages, team management tools, and powerful integrations. Get started with npm Orgs »

tiny-interpolator

1.1.0 • Public • Published

tiny-interpolator

npm version

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!

preview

code

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.

install

npm i tiny-interpolator

Downloadsweekly downloads

2

version

1.1.0

license

ISC

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability