Templating & Interpolation

Don't be scared by these big words. This section helps you use the values a user has selected in your form elements. It is based on Vue.js.


Fig uses Mustache Syntax to access the currently selected value of a form element. You identify a form element by its identifier. The identifier is the first string in the square brackets.

:[name: What is your name?]{}
My name is: {{ name }}
:[age: How old are you?]{ 21 }
I am {{ age }} years old
echo "Your name is {{name}}"
echo "You are {{age}}"

How does Fig Render this?

Using JavaScript Expressions

Mustache braces allow you to access your element's output and use simple javascript expressions. Here is a list of some more expressions you can use.

{{ flag ? "On" : "Off" }}
{{ file.split('/').slice(-1).pop() }}
{{ number_one + 1}}
{{ number_one + number_two}}

Embedding Additional Data

To include additional information add a code block with the language set as data. The contents of this tag will be interpreted as a JSON object and will be accessible in template tags.

plans: {
"free" : {
price: 0
"medium": {
price: 7
"large" : {
price: 50
The Large Plan costs: ${{ plans["large"]["price"] }}