JW Filters & Functions Reference

Overview of the JW Filter Pipeline #

In the **JW Template Language**, filters transform, reformat, sanitize, and manipulate data within output expressions using the pipe symbol (`|`). Multiple filters can be chained sequentially from left to right: ```jw {{ product.title | trim | upper }} {{ product.description | striptags | slice(0, 150) }}... ``` Parameters are passed inside parentheses: `| date("M d, Y")`, `| default('Fallback')`, `| slice(0, 5)`.

1. Array & Collection Filters #

Powerful array operations for collections, products, tags, and block sets: | Filter | Purpose | Example | Output | |---|---|---|---| | `length` | Returns element count of array or string character count | `{{ ['a', 'b', 'c'] \| length }}` | `3` | | `first` | Returns first element of collection | `{{ product.tags \| first }}` | `'organic'` | | `last` | Returns final element of collection | `{{ cart.items \| last }}` | `Item Object` | | `sort` | Sorts array elements alphabetically or numerically | `{{ tags \| sort \| join(', ') }}` | `'a, b, c'` | | `join(delimiter)` | Joins elements into a delimited string | `{{ product.tags \| join(', ') }}` | `'pure, kesar, organic'` | | `shuffle` | Randomizes array order (e.g. for related product grids) | `{% for item in products \| shuffle %}` | Random order | | `merge(arr)` | Concatenates two arrays into one | `{{ listA \| merge(listB) }}` | Merged array | | `column(key)` | Extracts a specific property from an array of objects | `{{ cart.items \| column('title') }}` | Array of titles | | `find(fn)` | Returns the first item satisfying an arrow expression | `{{ products \| find(p => p.price > 1000) }}` | Matching Product | | `map(fn)` | Projects each array item using an arrow expression | `{{ users \| map(u => "#{u.first} #{u.last}") }}` | Transformed array | | `json_encode` | Encodes array or object into a JSON string | `{{ product.variants \| json_encode }}` | JSON string |

2. String Transformation Filters #

Format, trim, sanitize, and truncate text elements: | Filter | Purpose | Example | Output | |---|---|---|---| | `split(sep)` | Splits string into array by delimiter | `{{ "a,b,c" \| split(',') }}` | `['a', 'b', 'c']` | | `striptags` | Strips all HTML tags from rich text | `{{ blog.article \| striptags }}` | Clean plain text | | `upper` | Converts text to uppercase | `{{ product.title \| upper }}` | `'SAFFRON'` | | `lower` | Converts text to lowercase | `{{ category.name \| lower }}` | `'perfumes'` | | `capitalize` | Capitalizes the first character | `{{ status \| capitalize }}` | `'Pending'` | | `title` | Capitalizes every word (Title Case) | `{{ "pure organic honey" \| title }}` | `'Pure Organic Honey'` | | `trim` | Strips surrounding whitespace | `{{ user_input \| trim }}` | Trimmed text | | `escape` / `e` | Escapes HTML entities (`&`, `<`, `>`, `"`) | `{{ review.comment \| escape }}` | Safe HTML | | `url_encode` | Percent-encodes text for query strings | `{{ "Kashmiri Saffron" \| url_encode }}` | `'Kashmiri+Saffron'` | | `slice(start, len)` | Extracts substring or array slice | `{{ "JoonWeb Dev" \| slice(0, 7) }}` | `'JoonWeb'` | | `nl2br` | Inserts `<br>` before all newlines | `{{ address \| nl2br }}` | Multi-line HTML | | `charLimit(max)` | Truncates text to max length with ellipsis | `{{ product.description \| charLimit(60) }}` | Truncated copy |

3. Number & Mathematical Filters #

Perform rounding, integer conversion, and numerical formatting: | Filter | Purpose | Example | Output | |---|---|---|---| | `round(precision)` | Rounds to nearest integer or specified decimal places | `{{ 4.67 \| round(1) }}` | `4.7` | | `ceil` | Rounds number up to the next integer | `{{ 4.2 \| ceil }}` | `5` | | `int` | Casts string or float to integer | `{{ "128" \| int }}` | `128` | | `abs` | Computes the absolute numeric value | `{{ -450 \| abs }}` | `450` | | `number_format(dec)` | Formats number with thousands separator | `{{ 1250000 \| number_format(2) }}` | `'1,250,000.00'` |

4. Date & Time Formatting Filters #

Transform timestamps and dates using standard date pattern tokens: ```jw {# Full readable date #} {{ blog.created | date("M d, Y") }} {# Output: Oct 12, 2026 #} {# Standard numeric date #} {{ order.created_at | date("m/d/Y") }} {# Output: 10/12/2026 #} {# Time of day #} {{ message.time | date("H:i:s") }} {# Output: 14:30:00 #} {# Current year for dynamic footer copyright #} {{ "now" | date("Y") }} {# Output: 2026 #} ```

5. Color Engine Filters #

JoonWeb includes a built-in color manipulation engine for generating theme color variations on the fly: | Filter | Description | Example | |---|---|---| | `color_to_hex` | Converts color string to standard hex code (`#0f172a`) | `{{ section.settings.accent \| color_to_hex }}` | | `color_to_hsl` | Converts color to `hsl(h, s%, l%)` format | `{{ bg_color \| color_to_hsl }}` | | `color_to_rgb` | Converts color to `rgb(r, g, b)` format | `{{ text_color \| color_to_rgb }}` | | `color_to_oklch` | Converts color to modern perceptual `oklch(...)` space | `{{ brand_color \| color_to_oklch }}` | | `color_darken(pct)` | Darkens color by specified percentage | `{{ button_color \| color_darken(10) }}` | | `color_lighten(pct)` | Lightens color by specified percentage | `{{ button_color \| color_lighten(15) }}` | | `color_saturate(pct)` | Increases color saturation | `{{ brand_color \| color_saturate(20) }}` | | `color_brightness` | Returns luminance percentage (useful for contrast calculation) | `{{ bg \| color_brightness }}` | | `color_mix(col, pct)` | Mixes two colors together by percentage | `{{ color1 \| color_mix(color2, 50) }}` | | `color_modify(prop, val)` | Dynamically modifies color alpha or lightness | `{{ color1 \| color_modify('alpha', 0.8) }}` |

6. HTML & CDN Asset URL Filters #

Convert theme filenames into high-speed CDN URLs and generate HTML inclusion tags: ```jw {# CDN Asset URL Filter #} <img src="{{ 'hero-banner.jpg' | asset_url }}" alt="Hero"> <img src="{{ block.settings.icon | asset_url }}" alt="Icon"> {# Automatic HTML Link Tags #} {{ 'style.css' | stylesheet_tag }} {# Generates: <link rel="stylesheet" href="https://static.joonsite.com/assets/style.css"> #} {{ 'slider.js' | script_tag }} {# Generates: <script src="https://static.joonsite.com/assets/slider.js"></script> #} ```

7. Fallback & Storefront Price Handling #

### Fallback Filter (`default`) Provides a fallback value when a variable is empty, undefined, or null: ```jw <h1>{{ section.settings.title | default('Welcome to Our Store') }}</h1> <div style="border-radius: {{ section.desktop.borderRadius | default(12) }}px;"></div> ``` ### Storefront Currency & Price Formatting In JoonWeb `.jw` templates, currency symbols and prices are rendered directly using the global `site.currency` variable alongside product price values (formatted with `number_format` as needed): ```jw {# Standard currency output #} <span class="price">{{ site.currency }}{{ product.sale_price }}</span> {# With two decimal places using number_format #} <span class="price">{{ site.currency }}{{ product.sale_price | number_format(2) }}</span> {# Strikethrough compare-at price badge #} {% if product.price > product.sale_price %} <span class="original-price text-muted text-decoration-line-through"> {{ site.currency }}{{ product.price | number_format(2) }} </span> <span class="sale-price text-danger fw-bold ms-2"> {{ site.currency }}{{ product.sale_price | number_format(2) }} </span> {% endif %} ```