Leveraging Mustache in PMG’s App Designer
You’ll want to shave this for later

Have you heard of Mustache? Mustache is a template syntax…a way of creating a template for something with dynamic content. A simple example would be an email template with “Dear ((firstname))”.

Mustache is described as a logicless syntax because there are no “if” statements, “else” clauses, or “for” loops. Instead, it uses “tags” (the curly braces) to insert a value, no value, or a series of values. It’s called “Mustache” because of its heavy use of the parentheses format called curly braces: “{ }”. Turn one sideways, and it looks like a mustache!

The beauty of Mustache is its flexibility. It can be used with a multitude of programming languages and tools, including HTML, config files, and source code. And when you use it in PMG’s App Designer, Mustache can make your widgets sing!

Mustache works by replacing the tags with values from the input data. In Mustache, this is referred to as “expanding” the tags.

Although there are no logic statements or loops, Mustache can still be used to conditionally show or hide a block of text. It’s just written a little differently. In fact, it supports data arrays, nested templates, and comments. Mustache is versatile.

PMG’s Customer Success and Product teams continue to find new ways to use Mustache to streamline app pages in App Designer. We’ve written a Mustache Template Guide that outlines the basics and gives examples for reference. You can find it on our Support site here.

Happy Mustache-ing!