liquidjs/docs/source/tutorials/syntax.md

title

title
Basic Syntax

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

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

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, inter-op with other templates, etc. For example assign can be used to define a variable which 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` not equals "FOO"
{% endif %}

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