Hamlet
Hamlet is a simple and powerful reactive templating system.
It's framework agnostic and focuses on clean declarative templating, leaving you to build your application with your favorite tools. Hamlet leverages the power of native browser APIs to keep your data model and html elements in sync.
All of this in only 3.7kb, minified and gzipped!
Getting Started
Using Node.js
Install the command line Hamlet compiler
npm install hamlet-cli
Compile your templates and export them
node_modules/.bin/hamlet -d templates
Add hamlet-runtime to your package.json
npm install --save-dev hamlet-runtime
To use the templates in a Node.js style project built with browserify you can require them normally.
// main.js
mainTemplate = require("./templates/main");
document.body.appendChild(mainTemplate(data));
Now use browserify to build the file you'll serve on your page.
browserify main.js > build.js
In the browser
Install the command line Hamlet compiler
npm install -g hamlet-cli
Compile your templates and expose them to the global browser scope.
hamlet --runtime "Hamlet" -d templates -e 'JST["$file"]'
cat templates/*.js > templates.js
Download the Hamlet runtime script with bower.
bower install hamlet-runtime
Render them to the DOM:
document.body.appendChild(JST.main(data))
Resources
Check out the wiki for developer resources.
Gotchas
If you are experiencing unexpected behavior in your templates make sure your templates have exactly one root element.
Problematic Example:
.one
.two
.three
.four
Correct solution:
.root
.one
.two
.three
.four