# 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](https://vuejs.org/v2/guide/syntax.html).

### **Interpolation**

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?**

![](https://1545242415-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MBzsiIfFzkblTOBPFTF%2F-MDDiqgqkd0pRD7yalXX%2F-MDDjbaWNNxgMRTCWkdV%2Ftemplating_example.gif?alt=media\&token=e68bbcd3-ad47-4b03-89b5-1969edb4a362)

### **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](https://vuejs.org/v2/guide/syntax.html#Using-JavaScript-Expressions).

```
{{ 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.

````
```data
{
  plans: {
    "free" : {
      price: 0
    },
    "medium": {
      price: 7
    },
    "large" : {
      price: 50
    }
  }
}
```

The Large Plan costs: ${{ plans["large"]["price"] }}
````

###