Introduction to LiquidJS

LiquidJS is a powerful and flexible templating engine for JavaScript, designed to work seamlessly in Node.js and modern web development frameworks. It enables developers to create dynamic and reusable templates that can be rendered server-side as well as client-side, offering extensive capabilities for data manipulation and presentation.

Key Features and APIs of LiquidJS

LiquidJS boasts dozens of useful API methods that developers can leverage to build complex applications. Here are some essential APIs and examples to get you started:

Basic Usage

const { Liquid } = require('liquidjs');
const engine = new Liquid();

engine.parseAndRender('{{name}}', { name: 'LiquidJS' })
  .then(result => console.log(result));
// Output: LiquidJS

Filters API

Filters transform output values. LiquidJS provides built-in filters as well as the ability to create custom filters:

engine.registerFilter('uppercase', str => str.toUpperCase());

engine.parseAndRender('{{"hello" | uppercase}}')
  .then(result => console.log(result));
// Output: HELLO

Tags API

Tags control logic and flow in templates. Common tags include if, for, and include:

const template = `
{% if user %}
  Welcome, {{ user.name }}
{% else %}
  Please log in
{% endif %}
`;

engine.parseAndRender(template, { user: { name: 'John' } })
  .then(result => console.log(result));
// Output: Welcome, John

Includes API

The include tag allows for modular templates:

const mainTemplate = `
{% include 'greeting' %}
`;

const templates = {
  'greeting': 'Hello, {{ user.name }}!'
};

engine.registerTemplate('greeting', templates['greeting']);

engine.parseAndRender(mainTemplate, { user: { name: 'Alice' } })
  .then(result => console.log(result));
// Output: Hello, Alice!

App Example Using LiquidJS

Below is an example of a simple Node.js application that uses LiquidJS for templating:

const express = require('express');
const { Liquid } = require('liquidjs');
const app = express();
const engine = new Liquid();

app.engine('liquid', engine.express());
app.set('views', './views');
app.set('view engine', 'liquid');

app.get('/', (req, res) => {
  res.render('index', { title: 'Home', user: { name: 'Jane' } });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

Directory Structure

your-app/
├── views/
│   └── index.liquid
├── app.js
└── package.json

index.liquid

  


  
Welcome, {{ user.name }}

With this setup, you can start building dynamic and modular web applications efficiently using LiquidJS.