A simple, expressive and safe Shopify / Github Pages compatible template engine in pure JavaScript.
—
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Pending
The risk profile of this skill
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.
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;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;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;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;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;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;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;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 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>" }
);// 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"