liquidjs/docs/source/tutorials/overview.md

title

title
Overview

LiquidJS is a simple, expressive, safe and shopify compatible template engine in pure JavaScript. The purpose of this repo is to provide a standard Liquid implementation for the JavaScript community.

LiquidJS in Node.js

Install via npm:

npm install --save liquidjs

var { Liquid } = require('liquidjs');
var engine = new Liquid();

engine
    .parseAndRender('{{name | capitalize}}', {name: 'alice'})
    .then(console.log);     // outputs 'Alice'

{% note info Working Demo %} Here's a working demo for LiquidJS usage in Node.js: liquidjs/demo/nodejs/.{% endnote %}

Type definitions for LiquidJS are also exported and published, which makes it more enjoyable for TypeScript projects:

import { Liquid } from 'liquidjs';
const engine = new Liquid();

engine
    .parseAndRender('{{name | capitalize}}', {name: 'alice'})
    .then(console.log);     // outputs 'Alice'

{% note info Working Demo %} Here's a working demo for LiquidJS usage in TypeScript: liquidjs/demo/typescript/.{% endnote %}

LiquidJS in Browsers

Pre-built UMD bundles are also available and included in the npm package:

<!--for production-->
<script src="//unpkg.com/liquidjs/dist/liquid.min.js"></script>
<!--for development-->
<script src="//unpkg.com/liquidjs/dist/liquid.js"></script>

Or from jsDelivr CDN:

<!--for production-->
<script src="https://cdn.jsdelivr.net/npm/liquidjs/dist/liquid.min.js"></script>
<!--for development-->
<script src="https://cdn.jsdelivr.net/npm/liquidjs/dist/liquid.js"></script>

{% note info Working Demo %} Here's a living demo on jsFiddle: jsfiddle.net/x43eb0z6, and the source code is also available in liquidjs/demo/browser/.{% endnote %}

{% note warn Compatibility %} You may need a Promise polyfill for legacy browsers like IE and Android UC, see caniuse statistics. {% endnote %}

LiquidJS in CLI

LiquidJS is also available from CLI:

echo '{{"hello" | capitalize}}' | npx liquidjs

If you pass a path to a JSON file or a JSON string as the first argument, it will be used as the context for your template.

echo 'Hello, {{ name }}.' | npx liquidjs '{"name": "Snake"}'

Miscellaneous

A ReactJS demo is also added by @stevenanthonyrevo, see liquidjs/demo/reactjs/.