A simple, expressive and safe Shopify / Github Pages compatible template engine in pure JavaScript.
LiquidJS is a JavaScript implementation of the Liquid templating language, which was originally created by Shopify. It allows you to render dynamic content in your web applications by using a simple and readable syntax. LiquidJS is highly extensible and can be used both on the server-side with Node.js and in the browser.
Basic Template Rendering
This feature allows you to render basic templates with dynamic content. In this example, the template 'Hello, {{name}}!' is rendered with the variable 'name' set to 'World', resulting in 'Hello, World!'.
const { Liquid } = require('liquidjs');
const engine = new Liquid();
const template = 'Hello, {{name}}!';
engine.parseAndRender(template, { name: 'World' }).then(console.log);Loops
This feature allows you to iterate over arrays and render each item. In this example, the template iterates over the 'items' array and renders each item, resulting in 'apple banana cherry '.
const { Liquid } = require('liquidjs');
const engine = new Liquid();
const template = '{% for item in items %}{{ item }} {% endfor %}';
engine.parseAndRender(template, { items: ['apple', 'banana', 'cherry'] }).then(console.log);Conditionals
This feature allows you to use conditional statements in your templates. In this example, the template checks if the 'user' variable exists and renders 'Hello, Alice!' if it does, otherwise it renders 'Hello, Guest!'.
const { Liquid } = require('liquidjs');
const engine = new Liquid();
const template = '{% if user %}Hello, {{ user.name }}!{% else %}Hello, Guest!{% endif %}';
engine.parseAndRender(template, { user: { name: 'Alice' } }).then(console.log);Filters
This feature allows you to use filters to transform output. In this example, the 'upcase' filter is used to convert the string 'hello' to uppercase, resulting in 'HELLO'.
const { Liquid } = require('liquidjs');
const engine = new Liquid();
const template = '{{ "hello" | upcase }}';
engine.parseAndRender(template).then(console.log);Nunjucks is a powerful templating engine for JavaScript, inspired by Jinja2. It offers a similar feature set to LiquidJS, including template inheritance, macros, and filters. Nunjucks is known for its flexibility and ease of use, making it a strong alternative to LiquidJS.
Handlebars is a popular templating engine that provides a simple way to build semantic templates. It supports features like nested templates, partials, and helpers. Handlebars is known for its simplicity and performance, making it a good choice for projects that require straightforward templating.
EJS (Embedded JavaScript) is a templating engine that lets you generate HTML with plain JavaScript. It supports features like partials and includes, and is known for its simplicity and ease of integration with Express.js. EJS is a good option for developers who prefer a more JavaScript-centric approach to templating.
A simple, expressive and safe Shopify / 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, GitHub Pages and Shopify templates can be ported to Node.js without pain.
Basically there're two types of Liquid syntax: tags enclosed by {% %} and outputs enclosed by {{ }}. A Liquid template looks like:
{% if username %}
{{ username | append: ", welcome to LiquidJS!" | capitalize }}
{% endif %}
A live demo is also available and here's a quick tutorial for Liquid syntax.
Install from npm in Node.js:
npm install liquidjs
Or use the UMD bundle from jsDelivr:
<script src="https://cdn.jsdelivr.net/npm/liquidjs/dist/liquid.browser.min.js"></script>
Or render directly from CLI using npx:
npx liquidjs --template 'Hello, {{ name }}!' --context '{"name": "Snake"}'
For more details, refer to the Setup Guide.
Feel free to create a PR or contact me to add your use case into this list!
If you personally love LiquidJS or it's benefiting your business, please consider financially support us via GitHub Sponsors. Special thanks to our sponsors!
 Opensense |  Eleventy |  Peter deHaan |  Touchless |  Dropkiq |  Dailycontributors |  Serkan Holat |
 amit777 |  Khaled Salem |  Sentry |  Checkout Blocks |  Customer IO |  Emmanuel Cartelli |  Microsoft |
 PakStyle.pk |  Syntax Podcast |  Cartelli Emmanuel |
Want to contribute? see Contribution Guidelines. Thanks goes to these wonderful people:
FAQs
A simple, expressive and safe Shopify / Github Pages compatible template engine in pure JavaScript.
The npm package liquidjs receives a total of 313,959 weekly downloads. As such, liquidjs popularity was classified as popular.
We found that liquidjs demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago.ย It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
