"Char95 Template" is a minimal template engine for JavaScript. It maps JSON objects to DOM elements with zero configuration. Just call render().

After years of working with diferent template and parser technologies, finally I opted for a minimal and extremely fast javascript template system.

Though there's plenty of Javascript based template solutions out there (pure, EJS, jQSmarty) I wanted something that were:

  • Powerful and extremly simple to use.
  • Compact (1 KB!)
  • Free of external libraries, plain JavaScript, no Jquery, Zepto or any other script library required.

How do I use it?

1. Add a reference to the Char95
<script src="Template.1.0.1.min.js"></script>

2. Mark the html code you want to use as template with the attribute "data-tpl" and "data-replace".
<html>
<head>
<script src="Template.1.0.1.min.js"></script>
<head>
<body>

<ul id='weekDays'>
  <li data-tpl='weekDay'>
    <span data-replace='number'></span>
    <div data-replace='day'></div>
  </li>
</ul>

</body>
</html>

3. Get the templates ready
var
  obj = document.getElementById('weekDays'),
  tpl = new Char95.Template(obj);

4. Render the template with your data.

The system will replace all keys in your data array that match a data-replace attribute in the HTML.

var data = [
  { number:1 , day:'Monday' },
  { number:2 , day:'Tuesday' },
  { number:3 , day:'Wednesday' },
  { number:4 , day:'Thursday' },
  { number:5 , day:'Friday' },
  { number:6 , day:'Saturday' },
  { number:7 , day:'Sunday' }];

var objs = this.tpl.render( 'weekDay' , data );
document.getElementById('weekDays').appendChild(objs);

5. Done !!

Our HTML now will have the next structure:

<ul id='weekDays'>
  <li>
    <span>1</span>
    <div>Monday</div>
  </li>
  <li>
    <span>2</span>
    <div>Tuesday</div>
  </li>
  <li>
    <span>3</span>
    <div>Wednesday</div>
  </li>
  <li>
    <span>4</span>
    <div>Thursday</div>
  </li>
  <li>
    <span>5</span>
    <div>Friday</div>
  </li>
  <li>
    <span>6</span>
    <div>Saturday</div>
  </li>
  <li>
    <span>7</span>
    <div>Sunday</div>
  </li>
</ul>

See it working

You can check the online demo here.



Downloading Char95 Template.js

Demo, Compressed and uncompressed copies of the files are available. The uncompressed file is best used during development or debugging, the compressed file saves bandwidth and improves performance in production

Download the compressed, production Char95 Template 1.0.1


Download the uncompressed, production Char95 Template 1.0.1


Download the demo files for version 1.0.1