liquid-lite

Liquid template engine for browser and node.js

Liquid template engine

This is a not complete port of Liquid template engine. Download compressed (930 bytes, 584 bytes gzipped) or uncompressed source. A complete port is available by darthapo.

  • When you trust your templates
<script src=liquid-lite.js></script>
 
<script id=products type="text/liquid">
<ul class="products">
  {% for product in products %}
    <li>
      <h2>{{ product.title | upcase }}</h2>
      Only {{ product.price }}
      <p>{{ product.description }}</p>
    </li>
  {% endfor %}
</ul>
</script> 
 
<div id=page></div>
 
<script>
var template = liquid( document.getElementById("products").innerHTML )
 
var data = { products:
  [ { title: "Product A", price: 1.01, description: "Hello a" }
  , { title: "Product B", price: 1.02, description: "Hello b" }
  , { title: "Product C", price: 1.03, description: "Hello c" }
  ]
}
 
document.getElementById("page").innerHTML = template(data)
</script> 

See test.html for more examples

npm install liquid-lite

var liquid = require("liquid-lite").liquid
 
var template = liquid( my_template_string )
 
var data = { products:
  [ { title: "Product A", price: 1.01, description: "Hello a" }
  , { title: "Product B", price: 1.02, description: "Hello b" }
  , { title: "Product C", price: 1.03, description: "Hello c" }
  ]
}
 
var output = template(data)
{% if user %}
  Hello {{ user.name }}
{% endif %}
{% if user.name == "bob" %}
  Hello Bob
{% endif %}
{% for product in products %}
  {{ product.title }}
{% endfor %}
 
{% for i = 3; i > 0; i-- %}
  {{ i }}
{% endfor %}
 
{% for item in ["a", "b", "c"] %}
  {{ item }}
{% endfor %}

The following helper variables are available:

  • loop.key - named key when iterated over Object
  • loop.i - index

Standard Filters are not implemented by default but you have access to prototypes. Make as many as you need or use liquid-filters-lite.

  • date - reformat a date syntax reference
    Implemented in date-format-lite

    var item = { "timestamp": 1363770186, "datetime": "2013-03-20T09:03:06Z" }
    {{ timestamp | date:"isoUtcDateTime" }}
    {{ datetime | date:"hh:mm" }}
  • capitalize - capitalize words in the input sentence

    String.prototype.capitalize = function() {
      return this.charAt(0).toUpperCase() + this.slice(1)
    }
  • downcase - convert an input string to lowercase

    String.prototype.downcase = String.prototype.toLowerCase

See liquid-filters-lite for more examples

  • You can access to properties named by reserved words thru _0 object, {% for val in _0["enum"] %}.

Copyright (c) 2012 Lauri Rooden <lauri@rooden.ee>
The MIT License