@reboot-ui/liquidjs

Liquid template engine by pure JavaScript: compatible to shopify, easy to extend.


Keywords
liquid, template engine, express, jinja, shopify, browser, nodejs, template-engine
License
MIT
Install
npm install @reboot-ui/liquidjs@9.7.0

Documentation

liquidjs

npm version downloads Build Status Coveralls dependencies semantic-release GitHub issues GitHub contributors David David Dev DUB license Commitizen friendly open collective

A shopify compatible Liquid template engine in pure JavaScript. The purpose of this repo is to provide a standard Liquid implementation for the JavaScript community. All features, filters and tags in shopify/liquid are supposed to be built in LiquidJS, though there are still some differences and limitations (see below).

Version 9 has published, see how to migrate to 9.0.0!

Get Started

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'

Or include the UMD build, a live demo is available on jsfiddle: https://jsfiddle.net/x43eb0z6/. You may need a Promise polyfill for Node.js < 4 and ES5 browsers like IE and Android UC.

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

Also available from CLI:

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

For detailed documents, see:

  • The Wiki Page contains tutorials and advanced topics.
  • The API Reference provides detailed descriptions for classes, methods and properties.

Differences and Limitations

  • Dynamic file locating (enabled by default), that means layout/partial names are treated as variables in liquidjs. See #51.
  • Truthy and Falsy. All values except undefined, null, false are truthy, whereas in Ruby Liquid all except nil and false are truthy. See #26.
  • Number. In JavaScript we cannot distinguish or convert between float and integer, see #59. And when applied size filter, numbers always return 0, which is 8 for integer in ruby, cause they do not have a length property.
  • .to_liquid() is replaced by .toLiquid()
  • .to_s() is replaced by JavaScript .toString()

Features that available on shopify website but not on shopify/liquid repo will not be implemented in this repo, but there're some plugins available: https://github.com/harttle/liquidjs/wiki/Plugins

Related Packages

  • gulp-liquidjs: A shopify compatible Liquid template engine for Gulp using liquidjs.
  • grunt-liquify: A Grunt task to process Liquid using liquidjs. Use it to add Liquid magic to your scripts and css assets.
  • react-liquid: Liquid templating language component for React
  • @11ty/eleventy: A simpler static site generator. An alternative to Jekyll. Written in JavaScript. Transforms a directory of templates (of varying types) into HTML.

Contribute Guidelines

Contributors ✨

This project follows the all-contributors specification. Contributions of any kind are welcome! Thanks goes to these wonderful people:


Jun Yang

🚧 πŸ’»

chenos

πŸ’»

Zach Leatherman

πŸ›

Tim Hardy

πŸ’»

Paul Robert Lloyd

πŸ’» πŸ›

Alec Larson

πŸ’»

Patrick Malouin

πŸ’» πŸ“–

jaswrks

πŸ’»

δΈ‰δΈ‰

πŸ’» πŸ€”

ssendev

πŸ’» πŸ“–

wojtask9

πŸ’»

Andrew Barclay

πŸ’»

Cory Mawhorter

πŸ’»

Mehdi Jaffery

πŸ’»

Robin Bijlani

πŸ’» πŸ›

Ryan Kennedy

πŸ’»

Sami Kukkonen

πŸ’»

Scott Santucci

πŸ’»

Steven

πŸ’‘ πŸ’»

azu

πŸ“–

Joonas

πŸ’»

Jamel A.

πŸ’»

Brandon Pittman

πŸ’»

tgrandgent

πŸ’»

Martin Schuster

πŸ’»

donate to liquidjs collective