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.

{{ date | dateFormat("YYYY-MM-DD") }} → "2024-02-14"
{{ date | dateFormat("DD/MM/YYYY HH:mm") }} → "14/02/2024 15:30"

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.

{{ users | groupBy("country") }} → Objects grouped by country property

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   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.

{{ users | sortBy("name") }} → Array sorted by name property

timeAgo

Converts a date to a relative time string.

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

toLink

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.

{{ users | where("active", true) }} → Array of users where active is true

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 }} → "$42.50"