Marfeel Layouts templating syntax reference

Marfeel Layouts use Mustache, a logic-less templating language that dynamically renders content by replacing placeholders with data from a JSON document. A template defines the structure and appearance of the output. The rendering engine processes it and injects values, replacing tags like {{title}} with actual content such as Breaking News.

Example Template:

<h1>{{title}}</h1>
<p>Hi {{user.name}} {{user.lastname}}</p>
<p>{{summary}}</p>

JSON:

{
"title": "Breaking News",
"summary": "Latest updates from the newsroom.",
"user": {
   "name": "John",
   "lastname": "Smith"
   }
}

Rendered Output:

<h1>Breaking News</h1>
<p>Hi John Smith</p>
<p>Latest updates from the newsroom.</p>

Note:

Marfeel Layouts use Mustache templating syntax with the Trimou rendering engine. Trimou extends Mustache through its Helpers API, enabling conditional functions, format adapters, and string manipulation. Read more about Trimou rendering engine.

Tip: Trimou syntax works in both HTML and CSS files. Use the same helpers to inject variables, conditionals, and logic into your stylesheets.

Basic Syntax

Tag Type	Syntax	Purpose
Variable	{{name}}	Print escaped data
Unescaped HTML	{{{html}}}	Print raw HTML
Section	{{#items}}	Loop and conditional block
Inverted	{{^items}}	Render if false or empty

Display Content Conditionally

# and ^: boolean conditionals

Use # to render content when a value exists. Use ^ to render content when a value is false or missing.

{{#articleIsClosed}}
   Subscribe to continue reading
{{/articleIsClosed}}

{{^articleIsClosed}}
   Did you like this article?
{{/articleIsClosed}}

if tag: render content when a condition is met

{{#if "2 eq 2"}} This is shown {{/if}}
{{#if "2 eq 1"}} This is not shown {{/if}}

isNull and isNotNull: check whether a variable exists

{{#isNotNull var}} This is shown if var is not null {{/isNotNull}}
{{#isNull var}} This is shown if var is null {{/isNull}}

ifs: inline conditional that outputs content only if the value exists

{{#ifs variable}}{{variable}}, {{/ifs}}fallback

This is useful for comma-separated values with fallbacks. For example, a font family with fallback:

{{#ifs customFont}}{{customFont}}, {{/ifs}}system-ui

Outputs CustomFont, system-ui if customFont is set, or just system-ui if not.

isEq and isNotEq: compare a variable against a string value

{{#isEq feedName "Trending"}}
  <span class="badge">Trending</span>
{{/isEq}}

{{#isNotEq visibility "hard-paywall"}}
  <a href="{{url}}">{{title}}</a>
{{/isNotEq}}

isEq performs string comparison. For numeric fields, use if instead.

choose, when, and otherwise: handle multiple conditions

{{#choose}}
   {{#when "2 eq 3"}} Not shown {{/when}}
   {{#when "2 eq 1"}} Not shown either {{/when}}
   {{#otherwise}} This is shown {{/otherwise}}
{{/choose}}

Combine conditions with variables

Use article data inside conditional expressions:

{{#choose}}
   {{#when "section eq 'OPINION'"}}
      {{section}} by {{author}}
      {{og:description}}
   {{/when}}

   {{#otherwise}}
      {{og:description}}
   {{/otherwise}}
{{/choose}}

Access array elements

Use dot notation with the index number. Arrays are zero-indexed.

JSON:

{
   "colors": ["black", "blue", "red"]
}

Template:

{{colors.0}} → black
{{colors.1}} → blue
{{colors.2}} → red

Iterate over arrays

Loop through arrays using the # operator or {{#each}} helper. Inside the loop, object properties are available at root level. Reference the entire object with {{this}}.

JSON:

{
"users": [
   {"name": "John", "surname": "Doe"},
   {"name": "Anna", "surname": "Smith"}
]
}

Template:

<ol>
   {{#users}}
   <li>{{surname}}, {{name}}</li>
   {{/users}}
</ol>

Rendered Output:

<ol>
   <li>Doe, John</li>
   <li>Smith, Anna</li>
</ol>

Iteration properties

Access metadata about the current iteration using the iter object:

Property	Description
iter.index	Current position (starts at 1)
iter.position	Current position (starts at 0)
iter.hasNext	True if more items follow
iter.isFirst	True if first item
iter.isLast	True if last item

Format dates and times

Datetime fields must be in ISO format: yyyy-MM-dd hh:mm:ss.

timeFormat: format dates with a specific pattern.

{{timeFormat publishTime pattern="dd-MM-yyyy"}}

Available patterns: yyyy, yy, MM, MMM, MMMM, dd, H, HH, m, mm, s, ss, a (AM/PM).

prettyTime: display relative dates.

{{prettyTime updateDate locale='es'}}

Outputs: 2 months ago or Hace 43 minutos depending on locale.

Transform text case

Two helpers control text case. Both work with any variable, including array elements accessed by index.

Helper	Effect	Example input	Output
uppercase	All caps	breaking news	BREAKING NEWS
capitalize	First letter of each word	breaking news	Breaking News

Syntax:

{{uppercase variable}}
{{capitalize variable}}

Examples:

{{uppercase sections.0}}

If sections.0 is politics, the output is POLITICS.

{{capitalize sections.0}}

If sections.0 is politics, the output is Politics.

Manipulate strings with Expression Language

Use Java Expression Language for string manipulation and custom transformations.

Basic syntax:

{{#setEl i="<expression>"}} {{i}} {{/setEl}}

Example, resize an image URL:

If your image URL is https://domain.com/images/image_id?width=1200, reduce the width:

{{#setEl i="img.split('?')[0]"}}{{i}}?width=240{{/setEl}}

Reference current item in loops

Inside loops, use #set to reference the current item in expressions:

{{#each items}}
   {{#set item=this}}
      {{#setEl i="item.doSomething()"}} {{i}} {{/setEl}}
   {{/set}}
{{/each}}

Important: You cannot reference this directly inside Expression Language. Always assign it to a variable with #set first.

Declare inline variables

Define reusable variables with {{+varName}} and reference them with {{>varName}}.

Template:

{{+name}}John{{/name}}
{{+surName}}Doe{{/surName}}
{{+fullName}}
   {{>surName}}, {{>name}}
{{/fullName}}

Signed: {{>fullName}}.

Rendered Output:

Signed: Doe, John.

Inline variables add whitespace before and after when rendered. Plan your layout accordingly.

Render raw HTML

Variables escape HTML characters by default. Use triple braces to render HTML as-is.

Syntax	Input	Output
{{foo}}	<b>bar</b>	&lt;b&gt;bar&lt;/b&gt;
{{{foo}}}	<b>bar</b>	bar

Calculate averages

Use avgEl to calculate averages from arrays:

{{#avgEl "<data expression>" ["<mapper expression>"] [<decimals>]}}{{avg}}{{/avgEl}}

Parameter	Required	Description
Data expression	Yes	The array to traverse
Mapper expression	No	Expression to apply per item (e.g., i.price)
Decimals	No	Rounding precision (HALF_UP)

Examples:

{{#avgEl "data.products" "i.price" 2}}{{avg}}{{/avgEl}}
{{#avgEl "data.products" "i.name.length()" 0}}{{avg}}{{/avgEl}}
{{#avgEl "data.scores" 1}}{{avg}}{{/avgEl}}

Data model

Each experience type (Recommender, Amplify, MarfeelPass) provides its own JSON model to the rendering engine.

The Layout Editor includes a JSON tab with example data for testing. The full data structure is available at data.experienceResponse.experience.data, with convenience aliases like recommendations for common paths.

Custom Fields are layout parameters you can configure per experience. Reference them with:

{{layoutProps.myVar}}

Read more about Custom Fields in the Layout Editor.

Going deeper

• Layout Editor: The visual interface for building and testing layouts
• Amplify Layouts: Creating social media visuals
• Recommender Layouts: Customizing article recommendations

What templating language do Marfeel Layouts use?

Marfeel Layouts use Mustache templating syntax with the Trimou rendering engine. Trimou extends Mustache through its Helpers API, enabling conditional functions, format adapters, and string manipulation.

How do you display content conditionally in Marfeel Layouts?

Use the # section tag to render content when a value exists, and the ^ inverted tag when a value is false or missing. Trimou also provides if, isNull, isNotNull, isEq, isNotEq, and choose/when/otherwise helpers for more complex conditions.

Can you use Trimou syntax in CSS files?

Yes. Trimou syntax works in both HTML and CSS files. You can use the same helpers to inject variables, conditionals, and logic into your stylesheets.