LiteJS

Simplicity is the ultimate sophistication. —Leonardo da Vinci

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.

Build Status

When to use liquid-lite

How to use in browser

<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

How to use in node.js

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)

Tags

if / elsif / else

{% if user %}
  Hello {{ user.name }}
{% endif %}
{% if user.name == "bob" %}
  Hello Bob
{% endif %}

for

{% 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:

Liquid Filters

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

    var item = { "timestamp": 1363770186, "datetime": "2013-03-20T09:03:06Z" }
    {{ timestamp | date:"isoUtcDateTime" }}
    {{ datetime | date:"hh:mm" }}
    
    String.prototype.capitalize = function() {
      return this.charAt(0).toUpperCase() + this.slice(1)
    }
    
    String.prototype.downcase = String.prototype.toLowerCase
    

See liquid-filters-lite for more examples

Notes

    {% for val in _0["enum"] %}
    

Licence

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

Fork me on GitHub