Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Javascript DSL for html generation in the browser
branch: master
Failed to load latest commit information.
bin catch template error during command line watch
examples add samples, add mocha test, add travisci
lib catch template error during command line watch
.gitignore add output and watch options to htmlr command line
.travis.yml update travis build
LICENSE added readme add travisci build status to readme
package.json update version to 0.1.5

htmlr TravisCI

  • Htmlr is a template language for Express.
  • Htmlr is an easy way to create DOM elements in the browser.
  • Htmlr is a Domain Specific Language (DSL) in javascript for generating HTML.

Htmlr can be used on the server or in the browser. In the browser it can generate HTML text for use with .innerHTML or it can generate document fragments for use with .appendChild. Template files use a .htmlr extension and can be a javascript expression or a function that returns an Htmlr object.


npm install htmlr

Browser Usage

For use in the browser, include the following script tag:

<script src="lib/htmlr.js"></script>

Then create your dynamic elements in the browser:

with (Htmlr) {
  var template = div({class: 'person'},
    'Name: ', span('{name}'), br,
    'Email: ', span('{email}')

var data = {name: 'Scott', email: ''};

// html text generation
document.getElementById('my_div').innerHTML = template.render(data);

// DOM object generation
document.getElementById('my_div').appendChild( template.renderDOM(data) );
<div class="person">
Name: <span>Scott</span><br />
Email: <span></span>

Express Usage

Create the following 2 template files to mimic the default express jade templates and put them in the views directory:

  • layout.htmlr

  • index.htmlr

    .p('Welcome to {title}')

Then modify the app.js file to change the default rendering engine to htmlr:

// Configuration

  app.set('views', __dirname + '/views');
  app.set('view engine', 'htmlr');         // <=== put 'htmlr' right here
  app.use(express.static(__dirname + '/public'));

Command Line Usage

Htmlr can also be used on the command line to test templates without an express application running. Create a filed called template.htmlr and a file with json data called data.json:

  • template.htmlr

      head({lang: 'en'},
        meta({charset: 'utf-8'}),
        h1("Hello World!"),
        div({id: 'content'}, '{content}')
  • data.json

    {"title": "My Title", "content": "My Content"}

Then run the following command:

htmlr template -d data.json -l
<!DOCTYPE html>
  <head lang="en">
    <meta charset="utf-8" />
    <title>My Title</title>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <h1>Hello World!</h1>
    <div id="content">
      My Content
  • Use the with statement to prevent pollution of the global namespace in the browser. ( with is forbidden in strict mode :( )

    with (Htmlr) {
      var template = div();
    var html = template.render();
    <div />


  1. Use an object literal as the first parameter to set attributes

    with (Htmlr) {
      var template = div({id: 'mydiv', class: 'awesome'});
    var html = template.render();
    <div id="mydiv" class="awesome" />
  2. Use any other data type for the first parameter and all data types afterward for child nodes

    with (Htmlr) {
      var template = div('Literal String', br, 1337);
    var html = template.render();
    <div>Literal String<br>1337</div>
  3. Chain objects together to create siblings

    with (Htmlr) {
      var template = div().div();
    var html = template.render();
    <div /><div />
  4. Create templates that can be reused. Pass data structures to templates to ease variable generation

    with (Htmlr) {
      var template = div({id: '{id}', class: '{class}'},
    var data1 = {id: 'one', class: 'first second', content: 'Hello'};
    var data2 = {id: 'two', class: 'third', content: 'World!'};
    var html = template.render(data1) + template.render(data2);
    <div id="one" class="first second">Hello</div>
    <div id="two" class="third">World!</div>
  5. Use substitution syntax for creating templates that can be fed data, either objects or arrays

    with (Htmlr) {
      var template1 = div('{name}');
    var data1 = {name: 'Scott'};
    var html1 = template1.render(data1);
    with (Htmlr) {
      var template2 = div('{0}');
    var data2 = ['Scott'];
    var html2 = template2.render(data2);
  6. Loop through data structures, objects or arrays, using the each construct

    with (Htmlr) {
      var template1 = (
    var data1 = ['one', 'two', 'three'];
    var html1 = template1.render(data1);
    with (Htmlr) {
      var template2 = (
          li('{key}: {value}')
    var data2 = {1: 'one', 2: 'two', 3: 'three'};
    var html2 = template2.render(data2);
      <li>1: one</li>
      <li>2: two</li>
      <li>3: three</li>

    each can also take a static list:

    with (Htmlr) {
      var template = (
        select(each(['North', 'South', 'East', 'West'])(
    var html = template.render();
  7. Includes the ability to extracts parts of the data object

    with (Htmlr) {
      var template1 = div(extract('error')(
        ': ',
    var data1 = {error: {number: 42, message: 'unknown question'}};
    var html1 = template1.render(data1);
    <div>Error <span>42</span>: <span>unknown question</span></div>

    extract can reach into multiple levels of data structure

    with (Htmlr) {
      var template2 = extract(1, 0)(div('{0}'));
    var data2 = [[[0, 1], [2, 3]], [[4, 5], [6, 7]]];
    var html = template2.render(data2);

Known Issues

None yet. We need more testers!

Something went wrong with that request. Please try again.