LiteNode's logo

LiteNode

Docs GitHub logo
▶ Usage

Documentation

STE Template Engine Filters

STE provides a rich set of built-in filters to transform and format data in your templates. Filters are applied using the pipe syntax: {{ value | filterName }} or with arguments: {{ value | filterName(arg1, arg2) }}.

Available Filters

abs

Converts a number to its absolute value.

{{ -42 | abs }} → 42

capitalize

Capitalizes the first character of a string.

{{ "hello world" | capitalize }} → "Hello world"

currency

Formats a number as currency with an optional symbol (defaults to $).

{{ 42.5 | currency }} → "42.50 $"
{{ 42.5 | currency("€") }} → "42.50 €"

cycle

Creates a cycle through a set of values, useful for alternating classes or values.

Alternates between "odd" and "even" with each call
{{#set altClass = "alternate" | cycle("odd", "even")}}
{{#each articles}}
    <div class="{{ altClass | next }}">{{ title }}</div>
{{/each}}

dateFormat

Formats a date using the specified format string with enhanced options.

{{ date | dateFormat }}
↪ "2024-02-14" (default format: YYYY-MM-DD)
{{ date | dateFormat("DD/MM/YYYY HH:mm") }}
↪ "14/02/2024 15:30" (custom date and time format)
{{ date | dateFormat("MMMM D, YYYY") }}
↪ "February 14, 2024" (month name format)
{{ date | dateFormat("MMM DD, YY") }}
↪ "Feb 14, 24" (abbreviated format)
{{ date | dateFormat("DDDD, HH:mm") }}
↪ "Wednesday, 15:30" (day of week format)
{{ date | dateFormat("h:mm a") }}
↪ "3:30 pm" (12-hour time format)
{{ date | dateFormat("YYYY-MM-DD", false) }}
↪ "2024-02-14" (using local timezone)

Format tokens:

The boolean optional parameter controls whether to use UTC (true) or local time (false), with UTC being the default.

defaults

Returns the first non-null value from a list of values.

{{ null | defaults(undefined, "", "fallback") }} → "fallback"

dump

Converts a value to a formatted JSON string for debugging.

{{ object | dump }} → Pretty-printed JSON representation

escape

Escapes HTML special characters in a string.

{{ "<div>" | escape }} → "&lt;div&gt;"

fileSize

Formats a number of bytes into a human-readable size.

{{ 1024 | fileSize }} → "1 KB"
{{ 1048576 | fileSize }} → "1 MB"

first

Returns the first element of an array or first character of a string.

{{ [1, 2, 3] | first }} → 1
{{ "hello" | first }} → "h"

groupBy

Groups an array of objects by a specified key. Supports nested properties using dot and bracket notation.

{{ users | groupBy("country") }}
↪ Objects grouped by country property
{{ posts | groupBy("frontmatter.category") }}
↪ Objects grouped by nested category
{{ data | groupBy("metadata['group-id']") }}
↪ Objects grouped by property with special characters

has

Checks if a value exists in an array, object, or string.

{{ object | has("property") }} → true/false
{{ "hello world" | has("world") }} → true

int

Converts a value to an integer.

{{ "42.9" | int }} → 42

join

Joins array elements with specified separators.

{{ ["cherry", "kiwi", "peach"] | join(", ") }} → "cherry, kiwi, peach"
{{ ["cherry", "kiwi", "peach"] | join(", ", " and ") }}
↪ "cherry, kiwi and peach"

last

Returns the last element of an array or last character of a string.

{{ [1, 2, 3] | last }} → 3
{{ "hello" | last }} → "o"

length

Returns the length of a string, array, or number of keys in an object.

{{ "hello" | length }} → 5
{{ [1, 2, 3] | length }} → 3

log

Logs a value to the console for debugging (returns the original value).

{{ value | log("Debug label") }} → Logs to console and returns value

lowercase

Converts a string to lowercase.

{{ "HELLO" | lowercase }} → "hello"

next

Used with cycle to get the next value in the cycle.

{{ cycleId | next }} → Gets next value in the previously defined cycle

numberFormat

Formats numbers with suffixes for large values.

{{ 1500000 | numberFormat }} → "1.5M"

preserveSpaces

Preserves all spaces in strings when rendered in HTML by converting them to &nbsp; entities.

{{" Multiple   Spaces   Here " | preserveSpaces}}

range

Checks if a number is within a specified range.

{{ 5 | range(1, 10) }} → true
{{ 15 | range(1, 10) }} → false
{{ 20 | range(20, 30)}} → false
{{ 20 | range(20, 30, true)}} → true (inclusive)

removeSpaces

Removes all whitespace from a string.

{{ "hello world" | removeSpaces }} → "helloworld"

replace

Replaces all occurrences of a substring in a string.

{{ "hello world" | replace("world", "there") }} → "hello there"

reverse

Reverses a string or array.

{{ "hello" | reverse }} → "olleh"
{{ [1, 2, 3] | reverse }} → [3, 2, 1]

round

Rounds a number to specified decimal places.

{{ 3.14159 | round(2) }} → 3.14

safeStringify

Safely converts an object to JSON string, handling circular references.

{{ complexObject | safeStringify }} → JSON string with "[Circular]" for circular references

slugify

Converts a string to URL-friendly slug format.

{{ "Hello World!" | slugify }} → "hello-world"

sortBy

Sorts an array of objects by a specified key. Supports nested properties and custom sort order ('asc' by default, 'desc' for descending).

{{ users | sortBy("name") }}
↪ Array sorted by name ascending
{{ users | sortBy("name", "desc") }}
↪ Array sorted by name descending
{{ posts | sortBy("frontmatter.author.name") }}
↪ Array sorted by nested author name
{{ data | sortBy("metadata['priority-order']", "desc") }}
↪ Array sorted by property with special characters

sortByDate

Sorts an array of objects by a date field. Supports nested properties and sort order ('asc' by default, 'desc' for descending). Ensures proper date comparison.

{{ posts | sortByDate("date") }}
↪ Array sorted by date ascending
{{ posts | sortByDate("frontmatter.publish_date", "desc") }}
↪ Array sorted by nested date descending
{{ events | sortByDate("metadata['scheduled-at']") }}
↪ Array sorted by date with special characters

timeAgo

Converts a date to a relative time string.

{{ date | timeAgo }} → "2 hours ago"

Creates an HTML link with optional attributes for external links.

{{ "https://example.com" | toLink("Visit Site") }}
↪ '<a href="https://example.com">Visit Site</a>'
{{ "https://example.com" | toLink("Visit Site", true) }}
↪ '<a href="https://example.com" target="_blank">Visit Site</a>'
{{ "https://example.com" | toLink("Visit Site", true, true) }}
↪ '<a href="https://example.com" target="_blank" rel="external noopener noreferrer">Visit Site</a>'

trim

Removes whitespace from both ends of a string.

{{ "  hello  " | trim }} → "hello"

truncate

Truncates a string to specified length.

{{ "Long text here" | truncate(5) }} → "Long..."

truncateWords

Truncates a string to specified number of words.

{{ "The quick brown fox" | truncateWords(2) }} → "The quick..."

type

Returns the JavaScript type of a value.

{{ value | type }} → "string", "number", "object", etc.

uppercase

Converts a string to uppercase.

{{ "hello" | uppercase }} → "HELLO"

where

Filters an array of objects by matching a property value. Supports nested properties using dot and bracket notation.

{{ users | where("active", true) }}
↪ Array of users where active is true
{{ posts | where("frontmatter.published", true) }}
↪ Array of posts where nested published is true
{{ data | where("metadata['user-status']", "approved") }}
↪Array filtered by property with special characters

wordCount

Counts the number of words in a string.

{{ "hello world" | wordCount }} → 2

Filter Chaining

Filters can be chained together using multiple pipe operators. The output of each filter becomes the input for the next filter in the chain.

{{ "HELLO WORLD" | lowercase | capitalize }} → "Hello world"
{{ [1, 2, 3] | reverse | join(", ") }} → "3, 2, 1"
{{ user.name | defaults("Anonymous") | uppercase }}
↪ "ANONYMOUS" (if user.name is null)
{{ price | currency | escape }} → "&#36;42.50"

Best Practices

These filters (groupBy, sortBy, where) are designed for moderate-sized arrays (typically < 1000 items). For larger datasets, consider:

Good uses:

Avoid:

Content