# 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/check.yml?branch=master&style=flat-square)](https://github.com/harttle/liquidjs/actions/workflows/check.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 [LiquidJS on Open Collective][oc], or [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. Feel free to create a PR or contact me to add your use case into this list! ## Financial Support If you love LiquidJS or your company is using LiquidJS, please consider [financial support][financial-support]. ### Backers If you personally like LiquidJS and find it useful to you, buy me a coffee!๐ ### Sponsors If LiquidJS is benefiting your business/company, please sponsor us to contribute to our effort! ## Contributors โจ Want to contribute? see [Contribution Guidelines][contribution]. Thanks goes to these wonderful people: