CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-liquidjs

A simple, expressive and safe Shopify / Github Pages compatible template engine in pure JavaScript.

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

filters.mddocs/

Built-in Filters

LiquidJS provides over 80 built-in filters for data transformation, organized into categories for array manipulation, string processing, mathematical operations, date formatting, HTML processing, and URL handling.

Capabilities

Array Filters

Filters for manipulating arrays and collections.

/**
 * Join array elements with separator
 * @param array - Array to join
 * @param separator - Separator string (default: ' ')
 * @returns Joined string
 */
join(array: any[], separator?: string): string;

/**
 * Get first element of array
 * @param array - Input array
 * @returns First element or empty string
 */
first(array: any[]): any;

/**
 * Get last element of array
 * @param array - Input array
 * @returns Last element or empty string
 */
last(array: any[]): any;

/**
 * Reverse array elements
 * @param array - Input array
 * @returns New reversed array
 */
reverse(array: any[]): any[];

/**
 * Get array size/length
 * @param array - Input array or string
 * @returns Length as number
 */
size(array: any[] | string): number;

/**
 * Sort array by property
 * @param array - Input array
 * @param property - Property name to sort by (optional)
 * @returns Sorted array
 */
sort(array: any[], property?: string): any[];

/**
 * Case-insensitive natural sort
 * @param array - Input array
 * @param property - Property name to sort by (optional)
 * @returns Naturally sorted array
 */
sort_natural(array: any[], property?: string): any[];

/**
 * Filter array by property value
 * @param array - Input array
 * @param property - Property name to filter by
 * @param value - Value to match (optional)
 * @returns Filtered array
 */
where(array: any[], property: string, value?: any): any[];

/**
 * Extract property values from array
 * @param array - Input array
 * @param property - Property name to extract
 * @returns Array of property values
 */
map(array: any[], property: string): any[];

/**
 * Remove duplicate elements
 * @param array - Input array
 * @returns Array with unique elements
 */
uniq(array: any[]): any[];

/**
 * Flatten nested arrays
 * @param array - Input array
 * @returns Flattened array
 */
flatten(array: any[]): any[];

/**
 * Get array slice
 * @param array - Input array
 * @param start - Start index
 * @param length - Number of elements (optional)
 * @returns Array slice
 */
slice(array: any[], start: number, length?: number): any[];

/**
 * Concatenate arrays
 * @param array1 - First array
 * @param array2 - Second array
 * @returns Concatenated array
 */
concat(array1: any[], array2: any[]): any[];

/**
 * Get array element at index
 * @param array - Input array
 * @param index - Index to access
 * @returns Element at index
 */
at(array: any[], index: number): any;

String Filters

Filters for string manipulation and formatting.

/**
 * Append string to end
 * @param str - Input string
 * @param suffix - String to append
 * @returns Concatenated string
 */
append(str: string, suffix: string): string;

/**
 * Prepend string to beginning
 * @param str - Input string
 * @param prefix - String to prepend
 * @returns Concatenated string
 */
prepend(str: string, prefix: string): string;

/**
 * Capitalize first letter
 * @param str - Input string
 * @returns Capitalized string
 */
capitalize(str: string): string;

/**
 * Convert to lowercase
 * @param str - Input string
 * @returns Lowercase string
 */
downcase(str: string): string;

/**
 * Convert to uppercase
 * @param str - Input string
 * @returns Uppercase string
 */
upcase(str: string): string;

/**
 * Replace occurrences
 * @param str - Input string
 * @param search - String to find
 * @param replacement - Replacement string
 * @returns String with replacements
 */
replace(str: string, search: string, replacement: string): string;

/**
 * Replace first occurrence
 * @param str - Input string
 * @param search - String to find
 * @param replacement - Replacement string
 * @returns String with first replacement
 */
replace_first(str: string, search: string, replacement: string): string;

/**
 * Remove occurrences
 * @param str - Input string
 * @param search - String to remove
 * @returns String with removals
 */
remove(str: string, search: string): string;

/**
 * Remove first occurrence
 * @param str - Input string
 * @param search - String to remove
 * @returns String with first removal
 */
remove_first(str: string, search: string): string;

/**
 * Truncate string with ellipsis
 * @param str - Input string
 * @param length - Maximum length
 * @param ellipsis - Ellipsis string (default: '...')
 * @returns Truncated string
 */
truncate(str: string, length: number, ellipsis?: string): string;

/**
 * Truncate by word boundary
 * @param str - Input string
 * @param length - Maximum length
 * @param ellipsis - Ellipsis string (default: '...')
 * @returns Truncated string
 */
truncatewords(str: string, length: number, ellipsis?: string): string;

/**
 * Split string into array
 * @param str - Input string
 * @param delimiter - Split delimiter
 * @returns Array of substrings
 */
split(str: string, delimiter: string): string[];

/**
 * Strip whitespace from both ends
 * @param str - Input string
 * @param chars - Characters to strip (optional)
 * @returns Trimmed string
 */
strip(str: string, chars?: string): string;

/**
 * Strip whitespace from left
 * @param str - Input string
 * @param chars - Characters to strip (optional)
 * @returns Left-trimmed string
 */
lstrip(str: string, chars?: string): string;

/**
 * Strip whitespace from right
 * @param str - Input string
 * @param chars - Characters to strip (optional)
 * @returns Right-trimmed string
 */
rstrip(str: string, chars?: string): string;

Math Filters

Filters for mathematical operations and number formatting.

/**
 * Absolute value
 * @param num - Input number
 * @returns Absolute value
 */
abs(num: number): number;

/**
 * Addition
 * @param num - Input number
 * @param operand - Number to add
 * @returns Sum
 */
plus(num: number, operand: number): number;

/**
 * Subtraction
 * @param num - Input number
 * @param operand - Number to subtract
 * @returns Difference
 */
minus(num: number, operand: number): number;

/**
 * Multiplication
 * @param num - Input number
 * @param operand - Number to multiply by
 * @returns Product
 */
times(num: number, operand: number): number;

/**
 * Division
 * @param num - Input number
 * @param operand - Number to divide by
 * @returns Quotient
 */
divided_by(num: number, operand: number): number;

/**
 * Modulo operation
 * @param num - Input number
 * @param operand - Modulo operand
 * @returns Remainder
 */
modulo(num: number, operand: number): number;

/**
 * Round to nearest integer
 * @param num - Input number
 * @param precision - Decimal places (optional)
 * @returns Rounded number
 */
round(num: number, precision?: number): number;

/**
 * Round down (floor)
 * @param num - Input number
 * @returns Floor value
 */
floor(num: number): number;

/**
 * Round up (ceiling)
 * @param num - Input number
 * @returns Ceiling value
 */
ceil(num: number): number;

Date Filters

Filters for date formatting and manipulation.

/**
 * Format date according to format string
 * @param date - Input date
 * @param format - Date format string
 * @returns Formatted date string
 */
date(date: Date | string | number, format?: string): string;

/**
 * Convert date to XML Schema format
 * @param date - Input date
 * @returns ISO 8601 date string
 */
date_to_xmlschema(date: Date | string | number): string;

/**
 * Convert date to RFC 822 format
 * @param date - Input date
 * @returns RFC 822 date string
 */
date_to_rfc822(date: Date | string | number): string;

/**
 * Convert date to string representation
 * @param date - Input date
 * @returns Date string
 */
date_to_string(date: Date | string | number): string;

/**
 * Convert date to long string
 * @param date - Input date
 * @returns Long date string
 */
date_to_long_string(date: Date | string | number): string;

HTML Filters

Filters for HTML processing and escaping.

/**
 * Escape HTML entities
 * @param str - Input string
 * @returns HTML-escaped string
 */
escape(str: string): string;

/**
 * Escape for single quotes
 * @param str - Input string
 * @returns Escaped string
 */
escape_once(str: string): string;

/**
 * Remove HTML tags
 * @param str - Input HTML string
 * @returns Plain text string
 */
strip_html(str: string): string;

/**
 * Strip newlines
 * @param str - Input string
 * @returns String without newlines
 */
strip_newlines(str: string): string;

/**
 * Convert newlines to <br> tags
 * @param str - Input string
 * @returns String with <br> tags
 */
newline_to_br(str: string): string;

URL Filters

Filters for URL encoding and manipulation.

/**
 * URL encode string
 * @param str - Input string
 * @returns URL-encoded string
 */
url_encode(str: string): string;

/**
 * URL decode string
 * @param str - Input URL-encoded string
 * @returns Decoded string
 */
url_decode(str: string): string;

/**
 * Create URL slug
 * @param str - Input string
 * @returns URL-friendly slug
 */
slugify(str: string): string;

/**
 * Base64 encode
 * @param str - Input string
 * @returns Base64-encoded string
 */
base64_encode(str: string): string;

/**
 * Base64 decode
 * @param str - Base64-encoded string
 * @returns Decoded string
 */
base64_decode(str: string): string;

Miscellaneous Filters

General utility filters for common operations.

/**
 * Provide default value for falsy inputs
 * @param value - Input value
 * @param defaultValue - Default to use if input is falsy
 * @returns Input value or default
 */
default(value: any, defaultValue: any): any;

/**
 * Convert to JSON string
 * @param value - Input value
 * @returns JSON string representation
 */
json(value: any): string;

/**
 * Output raw unescaped value
 * @param value - Input value
 * @returns Raw unescaped value
 */
raw(value: any): any;

/**
 * Inspect value for debugging
 * @param value - Input value
 * @returns String representation for debugging
 */
inspect(value: any): string;

Usage Examples

Array Operations

const engine = new Liquid();

// Join array elements
const result1 = await engine.parseAndRender(
  "{{ tags | join: ', ' }}",
  { tags: ["red", "blue", "green"] }
);
// Result: "red, blue, green"

// Filter and sort
const result2 = await engine.parseAndRender(`
  {% assign active_users = users | where: 'active', true | sort: 'name' %}
  {% for user in active_users %}{{ user.name }}{% endfor %}
`, {
  users: [
    { name: "Bob", active: true },
    { name: "Alice", active: true },
    { name: "Charlie", active: false }
  ]
});

String Transformations

// String manipulation
const result = await engine.parseAndRender(
  "{{ title | capitalize | append: ' - ' | append: site_name }}",
  { title: "hello world", site_name: "My Site" }
);
// Result: "Hello world - My Site"

// Text processing
const processed = await engine.parseAndRender(
  "{{ content | strip_html | truncatewords: 20 }}",
  { content: "<p>This is a <strong>long</strong> HTML content...</p>" }
);

Mathematical Operations

// Math calculations
const calculation = await engine.parseAndRender(
  "{{ price | times: quantity | plus: tax | round: 2 }}",
  { price: 19.99, quantity: 3, tax: 5.50 }
);
// Result: "65.47"

docs

analysis.md

built-in-tags.md

configuration.md

context-and-scoping.md

core-engine.md

extensions.md

filesystem.md

filters.md

index.md

tile.json