Below is a growing list of custom (fancy) mutations available to Private Plugins, whose variable interpolation is powered by the open source Liquid library.
Getting started with Liquid
To get started quickly with {{ liquid }} flavor variable notation, create a Private Plugin inside TRMNL, visit the Markup Editor, then follow along our Liquid 101 guide:
To understand how Liquid words under the hood, check out the official docs:
To parse and re-format Liquid-injected data, see the "Filters" section of this cheat sheet:
TRMNL custom filters
Given our web application is built in Ruby/Rails, we're able to extend the default Liquid library with custom filters using the following strategy:
We currently offer the following extensions. Email team@usetrmnl.com or hop inside our Developer-only Discord > #ideas channel to request more.
data
# convert a variable to JSON
{{ my_var | json }} => {"foo":"bar"}
numbers
{{ 1234 | number_with_delimiter }} # => 1,234
# custom delimiter (default is comma)
{{ 1234 | number_with_delimiter: '.' }} # => 1.234
{{ 1000000 | number_with_delimiter: ' ' }} # => 1 000 000
# optional 2nd arg separates whole number from fractional value
{{ 1234.57 | number_with_delimiter: ' ', ',' }} # => 1 234,57
# currency handling
{{ 10420 | number_to_currency }} # => $10,420.00
{{ 152350.69 | number_to_currency: '£' }} # => £152,350.69
# optional 2nd + 3rd args delimit + separate
{{ 1234.57 | number_to_currency: '£', '.', ',' }} # => £1.234,57
# currency handling with locale instead of currency unit
{{ 1234.57 | number_to_currency: 'sv' }} # => 1234.57 kr
{{ 1234.57 | number_to_currency: 'sv', '.', ',' }} # => 1.234,57 kr
{{ 1234.57 | number_to_currency: 'en-GB' }} # => £1234.57
Note that named parameters are not supported by Liquid, so you must supply all preceding arguments in the case that you want to override a 2nd+ parameter default.
string, markup, HTML
# pluralize + inflect/humanize
{{ "book" | pluralize: 1 }} # => 1 book
{{ "book" | pluralize: 2 }} # => 2 books
{{ "octopus" | pluralize: 3 }} # => 3 octopi
{{ "person" | pluralize: 4 }} # => 4 people
# convert markdown into HTML
{% assign markdown = "This is *crazy* and [here's a link](https://somewhere.com)." %}
{{ markdown | markdown_to_html }} # => This is <em>crazy</em> and <a href="here's a link">here's a link</a>.
# optional - pass strip_html to convert to plain text
{{ markdown | markdown_to_html | strip_html }} # => This is crazy and here's a link.
uniqueness
The append_random filter ensures that multiple, linked HTML elements (like a <div> and JS object) don't override another instance of this plugin within a mashup layout.
{% assign chart_id = "chart-" | append_random %} # => "chart-q7x1"Within your layout's context, any usage of {{ chart_id }} will yield the same generated value. This is useful for binding elements such as:
<div id="{{ chart_id }}"></div>
Highcharts.chart("{{ chart_id }}")
localization
First, l_date localizes a date (object or string) to a friendlier format with strftime syntax.
{{ '2025-01-11' | l_date: '%y %b' }} # => 25 Jan
# with a specific locale, ex: Korean
{{ '2025-01-11' | l_date: '%y %b', 'ko' }} # => 25 1월
# with the user's locale; good for published Plugin Recipes
{{ '2025-01-11' | l_date: '%y %b', trmnl.user.locale }} # => 25 1월Next, l_word translates common words to another language. Contribute more here.
<p>{{ "today" | l_word: 'es-ES' }}</p> # => hoy
{% assign day = "tomorrow" %}
<p>{{ day | l_word: trmnl.user.locale }}</p> # => 내일
Troubleshooting
Combining filters with our Framework handlers, for example Value Formatting, may produce unexpected results. For example:
<span class="value value--xlarge value--tnums" data-value-type="number">
{{ 10420.00 | number_to_currency }}
</span>
Will yield $10,420 without .00 trailing decimal places, because value--tnums attempts to simplify whole numbers.
Adding more custom filters
Email team@usetrmnl.com or hop inside our Developer-only Discord > #Plugins channel to request additional filters or arguments.