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!

Video Demo

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