Interpolation

Interpolation

Interpolation refers to embedding the output of JavaScript expressions alongside the raw text markup. EdgeJS uses double curly braces {{ }} as delimiters.

Hello {{ username }}!

Given the username is Virk. The output will be

Hello Virk!

You can use any valid JavaScript expression inside the curly braces, and Edge will evaluate it for you.

{{ user.username }}
{{ user.username.toUpperCase() }}
{{ (2 + 2) * 3 }}
{{ (await getUser()).username }}

Multiline expressions

Expressions can also span across multiple lines. For example:

Hello {{
users.map((user) => {
return user.username
})
}}

When writing multiline expressions, ensure the double curly braces are in the same line.

Invalid ❌ Valid ✅
{
{
users.map((user) => {
return user.username
})
}}
{{
users.map((user) => {
return user.username
})
}
}
{{
users.map((user) => {
return user.username
})
}}

Stringified output

Since the output of a template is always a string, the output of a JavaScript expression is also converted to a string by wrapping the output inside the String function.

Given the following expression

Expression
{{
users.map((user) => {
return user.username
})
}}

The JavaScript output will be

JavaScript output code
String(users.map((user) => {
return user.username
}))

The stringified output will be

Output
virk,romain,julien,michael

If you do not want to rely on the default behavior, you can self-convert the array to a string using the JavaScript Array.join method.

Hello {{
users.map((user) => {
return user.username
}).join(', ')
}}

Escaped HTML output

The output of a JavaScript expression is HTML escaped to prevent your applications from XSS attacks.

Given the following HTML string

{{
'<span style="color: red">This should be red.</span>'
}}

The output will be

&lt;span style="color: red"&gt;This should be red.&lt;/span&gt;

If you want to render HTML as it is, you can either wrap it inside triple curly braces or use the html.safe global method.

{{{
'<span style="color: red">This should be red.</span>'
}}}
{{
html.safe(
'<span style="color: red">This should be red.</span>'
)
}}

Skipping curly braces from evaluation

If you are using Edge in combination with a frontend framework that also uses double curly braces, you can instruct Edge to skip certain statements by prefixing the braces with the @ symbol.

{{-- Input -- }}
Edge should not parse @{{ username }}
{{-- Output -- }}
Edge should not parse {{ username }}