The Liquid Template Language

LiquidJS is a simple, expressive and safe Shopify / GitHub Pages compatible template engine in pure JavaScript. The purpose of this repo is to provide a standard Liquid implementation for the JavaScript community. Liquid is originally implemented in Ruby and used by GitHub Pages, Jekyll and Shopify, see Differences with Shopify/liquid.

LiquidJS syntax is relatively simple. There are 2 types of markups in LiquidJS:

  • Tags. A tag consists of a tag name and optional arguments wrapped between {% and %}.
  • Outputs. An output consists of a value and a list of filters, which is optional, wrapped between {{ and }}.
Live Demo

Before going into the details, here’s a live demo to play around: https://liquidjs.com/playground.html.

Outputs

Outputs are used to output variables, which can be transformed by filters, into HTML. The following template will insert the value of username into the input’s value:

<input type="text" name="user" value="{{username}}">

Values in output can be transformed by filters before output. To append a string after the variable:

{{ username | append: ", welcome to LiquidJS!" }}

Filters can be chained:

{{ username | append: ", welcome to LiquidJS!" | capitalize }}

A complete list of filters supported by LiquidJS can be found here.

Tags

Tags are used to control the template rendering process, manipulating template variables, interacting with other templates, etc. For example assign can be used to define a variable that can be later used in the template:

{% assign foo = "FOO" %}

Typically tags appear in pairs with a start tag and a corresponding end tag. For example:

{% if foo == "FOO" %}
    Variable `foo` equals "FOO"
{% else %}
    Variable `foo` does not equal "FOO"
{% endif %}

A complete list of tags supported by LiquidJS can be found here.

Next