# LiquidJS
> A simple, expressive and safe [Shopify Liquid][shopify/liquid] template engine for JavaScript — compatible with Jekyll, GitHub Pages, and Shopify themes.
[](https://www.npmjs.org/package/liquidjs)
[](https://www.npmjs.org/package/liquidjs)
[](https://github.com/harttle/liquidjs/actions/workflows/ci-build.yml?query=branch%3Amaster)
[](https://coveralls.io/github/harttle/liquidjs?branch=master)
[](https://github.com/harttle/liquidjs/blob/master/LICENSE)
[Documentation][doc] · [Playground](https://liquidjs.com/playground.html) · [Setup guide][setup] · [Contributing][contribution]
## Quick start
```js
import { Liquid } from 'liquidjs'
const engine = new Liquid()
const html = await engine.parseAndRender(
'Hello, {{ name | capitalize }}!',
{ name: 'liquid' }
)
//=> 'Hello, Liquid!'
```
## Features
- **Compatible** — Shopify Liquid, Jekyll, and GitHub Pages dialects
- **Safe by default** — `ownPropertyOnly`, `memoryLimit`, and `renderLimit` help sandbox untrusted templates
- **Runs everywhere** — Node.js, browser (UMD/ESM), and CLI via `npx liquidjs`
- **Extensible** — custom tags, filters, and [plugins][plugins]
- **Typed** — TypeScript definitions included
## Installation
**Node.js**
```bash
npm install liquidjs
```
**Browser** (jsDelivr UMD bundle)
```html
```
**CLI**
```bash
npx liquidjs --template 'Hello, {{ name }}!' --context '{"name": "Liquid"}'
```
See the [setup guide][setup] for partials, layouts, caching, and other options.
## Example
Liquid templates use tags (`{% %}`) and outputs (`{{ }}`):
```liquid
{% if username %}
{{ username | append: ", welcome to LiquidJS!" | capitalize }}
{% endif %}
```
Try it in the [playground](https://liquidjs.com/playground.html) or read the [Liquid syntax tutorial](https://liquidjs.com/tutorials/intro-to-liquid.html).
## Used by
- [Eleventy](https://www.11ty.dev/)
- [GitHub Docs](https://github.com/github/docs)
- [Kibana](https://github.com/elastic/kibana)
- [Microsoft Power Pages](https://learn.microsoft.com/en-us/power-pages/introduction)
- [Azure API Management developer portal](https://learn.microsoft.com/en-us/azure/api-management/api-management-howto-developer-portal)
- [Directus](https://docs.directus.io/)
- [Builder.io](https://www.builder.io/m/developers)
- [Mitosis](https://github.com/BuilderIO/mitosis)
- [Pattern Lab](https://patternlab.io/)
- [Opensense](https://www.opensense.com/)
- [Rock RMS](https://www.rockrms.com/)
- [WISMOlabs](https://wismolabs.com/)
- [Freshet](https://chromewebstore.google.com/detail/freshet/mpclplhdencffbilobpcapccnihpelcg)
Using LiquidJS in production? [Open a PR](https://github.com/harttle/liquidjs/edit/master/README.md) to add your project.
## 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!
## Contributors ✨
Want to contribute? see [Contribution Guidelines][contribution]. Thanks goes to these wonderful people:
## License
[MIT](LICENSE) © [Jun Yang](https://github.com/harttle)
[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
