# liquidjs [![npm version](https://img.shields.io/npm/v/liquidjs.svg?logo=npm&style=flat-square)](https://www.npmjs.org/package/liquidjs) [![npm downloads](https://img.shields.io/npm/dm/liquidjs.svg?style=flat-square)](https://www.npmjs.org/package/liquidjs) [![Coverage](https://img.shields.io/coveralls/harttle/liquidjs.svg?style=flat-square)](https://coveralls.io/github/harttle/liquidjs?branch=master) [![Build Status](https://img.shields.io/github/actions/workflow/status/harttle/liquidjs/ci-build.yml?branch=master&style=flat-square)](https://github.com/harttle/liquidjs/actions/workflows/ci-build.yml?query=branch%3Amaster) [![DUB license](https://img.shields.io/dub/l/vibe-d.svg?style=flat-square)](https://github.com/harttle/liquidjs/blob/master/LICENSE) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)](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), or [LiquidJS on Open Collective][oc]

## 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. 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), or - via [LiquidJS on Open Collective][oc] Special thanks to the following sponsors!

_Opensense	_Eleventy	_{Peter deHaan}	_Touchless	_Dropkiq	_{Dailycontributors}	_{Serkan Holat}
_amit777	_{Khaled Salem}	_Sentry	_{Checkout Blocks}	_{Customer IO}

## Contributors ✨ Want to contribute? see [Contribution Guidelines][contribution]. 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} 💻	_Ray ⚠️ 💻	_{Cristofer Gonzales} 💻	_{Raymond Camden} 📖
_{Steve Stedman} 📖	_{Anthony Ciccarello} 📖	_{Bogdan Chadkin} 💻	_{Tejas Manohar} 💻	_{Peter deHaan} 📖	_amit777 💻	_{Steffen Schuldenzucker} 💻
_Pixcell 💻	_{Jason Etcovitch} 💻	_ZC 📖	_{Memmie Lenglet} 💻	_ilhamdev0 📖	_{一饮一啄皆是人生} 📖	_{Amit Agarwal} 📖
_{Laurin Quast} 💻	_{Matt Vague} 💻	_{Liam Bigelow} 💻	_{Jason Kurian} 📖	_{d pham (they/them)} 📖	_{Aleksandr Hovhannisyan} 💻	_jg-rp 💻
_{Ameya Apte} 💻	_tbdrz 📖	_{Santi Albo} 📖	_{Yahang Wu} 📖	_hongl 📖	_zxx-457 📖	_prassie 📖
_{Slav Ivanov} 💻	_{Daniel Rosenberg} 💻	_bobgubko 💻	_BaNgan 📖	_{Mahyar Pasarzangene} 📖	_{Tomáš Hübelbauer} 💻 📖	_{Jason Garber} 💻
_{Nick Reilingh} 📖	_{Francisco Soto} 💻	_{David LJ} 📖	_{Rasmus Wriedt Larsen} 📖	_{Bruno Carvalho} 💻	_傅鹏 💻	_{Joel Hamilton} 💻
_{Max Medve} 💻	_{Cosmin Popovici} 📖	_{Adam Tanner} 💻	_{Guillermo Casal Caro} 💻	_{Josh Soref} 📖

[shopify/liquid]: https://shopify.github.io/liquid/ [plugins]: https://liquidjs.com/tutorials/plugins.html#Plugin-List [setup]: https://liquidjs.com/tutorials/setup.html [doc]: https://liquidjs.com [github]: https://github.com/harttle/liquidjs [oc]: https://opencollective.com/liquidjs/ [contribution]: https://liquidjs.com/tutorials/contribution-guidelines.html