# 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/ci-build.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]! * Financial support via [GitHub Sponsors](https://github.com/sponsors/harttle).
## 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]. ## Who's Using LiquidJS? - [Eleventy](https://www.11ty.dev/): Eleventy, a simpler static site generator. - [Opensense](https://www.opensense.com/): The smarter way to send email. - [Directus](https://docs.directus.io/): an instant REST+GraphQL API and intuitive no-code data collaboration app for any SQL database. - [Semgrep](https://github.com/returntocorp/semgrep): Lightweight static analysis for many languages. - [Rock](https://www.rockrms.com/): An open source CMS, Relationship Management System (RMS) and Church Management System (ChMS) all rolled into one. - [Mitosis](https://github.com/BuilderIO/mitosis): Write components once, run everywhere. Compiles to React, Vue, Qwik, Solid, Angular, Svelte, and more. - [Pattern Lab](https://patternlab.io/): a frontend workshop environment that helps you build, view, test, and showcase your design system's UI components. - [Builder.io](https://www.builder.io/m/developers): the first and only headless CMS with a visual editor that lets you drag and drop with your components, directly within your current site or app. Completely API-driven, for cleaner code and simpler workflows. - [Microsoft Power Pages](https://learn.microsoft.com/en-us/power-pages/introduction): a secure, enterprise-grade, low-code software as a service (SaaS) platform for creating, hosting, and administering modern external-facing business websites. - [Azure API Management developer portal](https://learn.microsoft.com/en-us/azure/api-management/api-management-howto-developer-portal): an automatically generated, fully customizable website with the documentation of your APIs. - [WISMOlabs](https://wismolabs.com/): Post Purchase Experience platform for eCommerce retailers enhancing customer satisfaction by using LiquidJS to provide customizable post-purchase experiences through programmable email, SMS, order tracking pages, and webhooks. Feel free to create a PR or contact me to add your use case into this list! ## Financial Support If you personally love LiquidJS or it's benefiting your business, please consider financially support us via [GitHub Sponsors](https://github.com/sponsors/harttle). 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 |