A template is a way of specifying a function that produces a string in the output language (either in string or AST form) from a bundle of data using a syntax that is reminiscent of the output produced. Today we’ve come up with 10 JavaScript and jQuery Template Engines that you might find interesting to learn. Enjoy.

Related Posts:

1. NANO – jQuery Template Engine

Simplest jQuery Templating Engine, perfect for JSON parsing.


NANO

Source + Demo

2. The “template” binding

The template binding populates the associated DOM element with the results of rendering a template. Templates are a simple and convenient way to build sophisticated UI structures – possibly with repeating or nested blocks – as a function of your view model data.


template

Source
Demo

3. JsViews: Next-generation jQuery Templates

Interactive data-driven views, built on top of JsRender templates.


JsViews

Source
Demo

4. JsRender: Next-generation jQuery Templates

Optimized for high-performance pure string-based rendering, without DOM or jQuery dependency.


JsRender

Source
Demo

5. google-jstemplate

Simple and robust browser side template processing for Ajax based web applications.


google-jstemplate

Source
Demo

6. The jQuery Templates Plugin

A templating plugin for jQuery. BETA. NO LONGER IN ACTIVE DEVELOPMENT OR MAINTENANCE. Issues remain open but are not being worked.


The jQuery Templates Plugin

Source
Demo

7. jQote2 – JavaScript Templating Revamped

jQote2 now returns a flat string representation of the converted template whereas its predecessor would give you a jQuery object.


jQote2

Source + Demo

8. kite

KiTE is a Template Engine for JavaScript


kite

Source + Demo

9. mustache.js

Logic-less {{mustache}} templates with JavaScript.


mustache.js

Source + Demo

10. Tempo 1.7

Tempo is a tiny JSON rendering engine that enables you to craft data templates in pure HTML.


Tempo 1.7

Source
Demo

Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.


Learn JavaScript for free!
Free course: Introduction to JavaScript

Yours when you take up a free 14-day SitePoint Premium trial.