# liquidjs [](https://www.npmjs.org/package/liquidjs) [](https://www.npmjs.org/package/liquidjs) [](https://coveralls.io/github/harttle/liquidjs?branch=master) [](https://github.com/harttle/liquidjs/actions/workflows/check.yml?query=branch%3Amaster) [](https://github.com/harttle/liquidjs/blob/master/LICENSE) [](https://github.com/harttle/liquidjs) A simple, expressive and safe [Shopify][shopify/liquid] / Github Pages compatible template engine in pure JavaScript. **The purpose of this repo** is to provide a standard Liquid implementation for the JavaScript community so that [Jekyll sites](https://jekyllrb.com), [Github Pages](https://pages.github.com/) and [Shopify templates](https://themes.shopify.com/) can be ported to Node.js without pain. * [Documentation][doc] * Please star [LiquidJS on GitHub][github]! * Support [LiquidJS on Open Collective][oc] or [Patreon][patreon]
## What's it like? Basically there're two types of Liquid syntax: tags enclosed by `{% %}` and outputs enclosed by `{{ }}`. A Liquid template looks like: ```liquid {% if username %} {{ username | append: ", welcome to LiquidJS!" | capitalize }} {% endif %} ``` [A live demo](https://liquidjs.com/playground.html) is also available and here's a [quick tutorial](https://liquidjs.com/tutorials/intro-to-liquid.html) for Liquid syntax. ## Installation Install from npm in Node.js: ```bash npm install liquidjs ``` Or use the UMD bundle from jsDelivr: ```html ``` Or render directly from CLI using npx: ```bash npx liquidjs --template 'Hello, {{ name }}!' --context '{"name": "Snake"}' ``` For more details, refer to the [Setup Guide][setup]. ## Related Projects * [@11ty/eleventy](https://www.npmjs.com/package/@11ty/eleventy): A simpler static site generator. An alternative to Jekyll. Written in JavaScript. Transforms a directory of templates (of varying types) into HTML. * [gulp-liquidjs](https://www.npmjs.com/package/@tuanpham-dev/gulp-liquidjs): A shopify compatible Liquid template engine for Gulp using liquidjs. * [grunt-liquify](https://www.npmjs.com/package/grunt-liquify): A Grunt task to process Liquid using liquidjs. Use it to add Liquid magic to your scripts and css assets. * [react-liquid](https://github.com/aquibm/react-liquid#readme): Liquid templating language component for React ## Financial Support If you love LiquidJS or your company is using LiquidJS? Please consider [support us on Open Collective or Patreon][financial-support]. ### Backers If you personally like LiquidJS and find it useful to you, you can buy me a coffee!