When to use double curly brackets {{ }}

Here's a quick guide on when to use double curly brackets ("double curlies") in your Retool apps.

{{}} Case Example
:white_check_mark: Referencing any Retool-specific values {{ query1.data }} or {{ text1.value }}
:white_check_mark: Writing JavaScript {{ checkbox1.value ? 'approved' : 'denied'}} in a Text component's value field
:white_check_mark: Inside Transformers const data1 = {{ query1.data }}
:no_entry_sign: Inside JS queries const data1 = query1.data
:no_entry_sign: Inside Workflow branch blocks startTrigger.data

Some notes:

  • If the snippet containing double curlies doesn't highlight green or red, don't use double curlies!

:white_check_mark: image
:white_check_mark: image
:no_entry_sign: image

  • In general, the space between the curlies and the text is optional.

    • {{query1.data}} is the same as {{ query1.data }}.
  • Triple curlies can occasionally cause problems, so a space might be helpful.

    • {{{'key':123}}} might cause errors. Try {{ {'key': 123} }} instead.
  • If you notice a value is being displayed as table1.data[0].email instead of the actual email value, that's an indicator you need double curlies.

  • In Workflows, branches don't accept dynamic variables but other blocks do:

Leave any thoughts or feedback below :arrow_down: :slight_smile: !


Hi, is this situation related to this post?


Yes, the variable Test isn't defined in Retool environment so the curly brackets don't know what it relates to. The default Transformer suggests you define your variables up front:

// Reference external variables with curly brackets or using JS variables
const name = {{ current_user.firstName || 'world' }}
return 'Hello ' + name

So for your example the recommended option would be:

let Test = 'text';
let inputValue = {{ textInput[0].value }};
return inputValue.includes(Test);

Great example—thank you for adding that to this post @Skizhu and thank you for the solution @dcartlidge :raised_hands:

1 Like