https://github.com/macdonaldr93/liquidlite
Liquid (Lite) is a minimal Shopify Liquid compiler for the browser.
https://github.com/macdonaldr93/liquidlite
html liquid liquid-templating-engine shopify shopify-theme template template-engine
Last synced: about 1 month ago
JSON representation
Liquid (Lite) is a minimal Shopify Liquid compiler for the browser.
- Host: GitHub
- URL: https://github.com/macdonaldr93/liquidlite
- Owner: macdonaldr93
- License: mit
- Created: 2023-07-06T20:22:42.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-07-10T16:09:10.000Z (almost 3 years ago)
- Last Synced: 2025-10-04T15:48:56.879Z (9 months ago)
- Topics: html, liquid, liquid-templating-engine, shopify, shopify-theme, template, template-engine
- Language: TypeScript
- Homepage:
- Size: 211 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 💧 Liquid (Lite)
 · 
Liquid (Lite) is a minimal Shopify Liquid compiler for the browser.
## Getting started
```bash
# for npm
npm install @bloombug/liquidlite
# for yarn
yarn add @bloombug/liquidlite
```
```js
import {compile} from '@bloombug/liquidlite';
const template = `
Hi, my name is {{ name }}.
`;
const variables = {name: 'Ryan'};
compile(template, variables);
//
Hi, my name is Ryan.
```
## Why build a compiler for a subset of liquid?
Liquid is a popular templating language and used to build Shopify themes. I've often needed a basic templating language to load in some dynamic content, but I don't want to use a different syntax like handlebars.
This project started because I was always including this snippet of code:
```js
export function compile(template, context) {
let output = template;
for (const variable in context) {
const value = context[variable];
if (typeof value === 'string') {
output = output
.replaceAll(`{{${variable}}}`, value)
.replaceAll(`{{ ${variable} }}`, value);
}
}
return output;
}
```
It's not the best, but it was largely working for what I needed.
It finally got to a point where I need some control flow statements. And there you have it, `liquidlite`.
## Supported features
| Feature | Symbol | Support |
| ------------------------ | ----------- | ------- |
| objects | `{{ }}` | ✅ |
| equals | `==` | ✅ |
| greater than | `>` | ✅ |
| less than | `<` | ✅ |
| greater than or equal to | `>=` | ✅ |
| less than or equal to | `<=` | ✅ |
| logical or | `or` | ❌ |
| logical and | `and` | ❌ |
| contains | `contains` | ❌ |
| control flow if | `if` | ✅ |
| control flow unless | `unless` | ❌ |
| control flow elsif | `elsif` | ❌ |
| control flow else | `else` | ❌ |
| control flow case | `case` | ❌ |
| iteration for | `for` | ❌ |
| template comment | `comment` | ❌ |
| template inline comment | `#` | ❌ |
| template raw | `raw` | ❌ |
| template liquid | `liquid` | ❌ |
| template echo | `echo` | ❌ |
| template render | `render` | ❌ |
| template include | `include` | ❌ |
| variable assign | `assign` | ❌ |
| variable capture | `capture` | ❌ |
| variable increment | `increment` | ❌ |
| variable decrement | `decrement` | ❌ |
| filters | `\|` | ❌ |