Liquid Templates

NativeSuite uses Liquid template syntax for dynamic data mapping in widgets. This reference covers the most commonly used features. For the full Liquid specification, see the official Liquid documentation.

Basic Syntax

Outputting a Value

Use double braces to output a data field:

{{ field_name }}

Example:

{{ revenue.total }}
→ 48290

Nested Fields

Access nested JSON fields with dot notation:

{{ data.user.name }}
{{ data.orders[0].total }}

Filters

Filters transform values. Chain them with the pipe | character.

Number Formatting

{{ revenue | divided_by: 1000.0 }}
→ 48.29

{{ revenue | divided_by: 1000.0 | round: 1 }}
→ 48.3

{{ count | plus: 1 }}
→ 143

{{ total | minus: discount }}
→ 40290

{{ price | times: quantity }}
→ 9658

String Manipulation

{{ name | upcase }}
→ JOHN DOE

{{ name | downcase }}
→ john doe

{{ name | capitalize }}
→ John doe

{{ title | truncate: 30 }}
→ Order shipped to Berlin, ...

{{ description | truncatewords: 5 }}
→ Your package is on the...

{{ slug | replace: "-", " " }}
→ my cool app

{{ text | strip }}
→ (removes leading/trailing whitespace)

{{ tags | split: "," | first }}
→ urgent

Date Formatting

{{ created_at | date: "%B %d, %Y" }}
→ April 15, 2026

{{ updated_at | date: "%H:%M" }}
→ 10:30

{{ timestamp | date: "%b %d" }}
→ Apr 15

Common date format codes:

Code	Output	Example
%Y	Full year	2026
%m	Month (01-12)	04
%d	Day (01-31)	15
%B	Full month name	April
%b	Abbreviated month	Apr
%H	Hour (00-23)	10
%M	Minute (00-59)	30

Array Operations

{{ items | size }}
→ 5

{{ items | first }}
→ (first element)

{{ items | last }}
→ (last element)

{{ items | sort: "name" }}
→ (sorted by name field)

{{ items | reverse }}
→ (reversed order)

Default Values

{{ nickname | default: "Anonymous" }}
→ Anonymous (if nickname is empty or null)

Combining Filters

Chain multiple filters for complex transformations:

${{ revenue | divided_by: 1000.0 | round: 1 }}K
→ $48.3K

{{ name | downcase | replace: " ", "-" }}
→ john-doe

{{ updated_at | date: "%b %d" }} at {{ updated_at | date: "%H:%M" }}
→ Apr 15 at 10:30

Using in Widget Fields

When mapping widget template slots, you can use Liquid syntax in any field that accepts dynamic values:

Stat widget example:

label: "Revenue"                                          (static)
value: ${{ data.revenue | divided_by: 1000.0 | round: 1 }}K   (formatted)
change: {{ data.revenue_change }}%                        (with suffix)

Card widget example:

tag: {{ data.priority | upcase }}
title: Order #{{ data.order_id }}
body: {{ data.description | truncate: 80 }}

Tips

• Test your templates — Preview widgets in the dashboard to verify your Liquid expressions
• Handle missing data — Use the default filter to show a fallback when a field is empty
• Keep it simple — Complex transformations are better done in your API response than in Liquid
• Number formatting — To format currencies, combine divided_by, round, and string concatenation