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!
Install via npm:
npm install --save liquidjsvar { 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 liquidjsFor detailed documents, see:
- The Wiki Page contains tutorials and advanced topics.
- The API Reference provides detailed descriptions for classes, methods and properties.
- 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,falseare truthy, whereas in Ruby Liquid all exceptnilandfalseare truthy. See #26. - Number. In JavaScript we cannot distinguish or convert between
floatandinteger, see #59. And when appliedsizefilter, numbers always return 0, which is 8 for integer in ruby, cause they do not have alengthproperty. - .to_liquid() is replaced by
.toLiquid() - .to_s() is replaced by JavaScript
.toString() - Iteration order for objects. The iteration order of JavaScript objects, and thus LiquidJS objects, is a combination of the insertion order for string keys, and ascending order for number-like keys, while the iteration order of Ruby Hash is simply the insertion order.
- Sort stability. The sort stability is also not defined in both shopify/liquid and LiquidJS, but it's considered stable for LiquidJS in Node.js 12+ and Google Chrome 70+.
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
- 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.
Love LiquidJS and want to contribute? Become a backer.
This project follows the all-contributors specification. Contributions of any kind are welcome! Thanks goes to these wonderful people:
- Code Style: https://github.com/standard/eslint-config-standard,
npm run lintto check locally. - Testing: make sure test cases still pass, use
npm testto check locally. - Commit Message: align to The Angular Commit Message Guidelines, especially the Type identifier, to allow the semantic-release bot do the work.