TemplateDX expressions run inside {...} braces or JSX attributes (<If condition={...}>). The evaluator supports a deliberately limited JavaScript subset — literals, property access, a fixed set of operators, and calls to registered filters.
Literals
| Literal | Example |
|---|
| Strings | "How are you?", 'How are you?' |
| Numbers | 40, 30.123 |
| Arrays | [1, 2, "array"] |
| Objects | { one: 1, two: 2 } |
| Booleans | true, false |
{} and can be used anywhere an expression is valid:
{[1, 2, 3].length} {/* renders 3 */}
{{ name: "Alice" }.name} {/* renders Alice */}
Property access
Read nested properties with dot notation or bracket syntax:
{props.user.name}
{props['user-email']}
{items[0].title}
MemberExpression render as empty string; see Variables for details.
Operators
Arithmetic
{ 2 + 3 } {/* 5 */}
{ 10 - 4 } {/* 6 */}
{ 10 / 2 } {/* 5 */}
{ 10 % 3 } {/* 1 */}
{ 5 * 4 } {/* 20 */}
+ also concatenates strings: {"Hi " + props.name}.
Comparisons
| Operator | Description |
|---|
== | Loose equality |
!= | Loose inequality |
> | Greater than |
>= | Greater than or equal |
< | Less than |
<= | Less than or equal |
Strict equality (=== / !==) is not supported. Only the loose operators above are in the evaluator’s operator table. Use == / !=.
<If condition={props.numUsers > 10}>
Content for more than 10 users
</If>
<If condition={props.score >= 75}>
Content for scores 75 and above
</If>
Logical
<If condition={props.isActive && props.hasAccess}>
Content for active users with access
</If>
<If condition={props.isAdmin || props.isModerator}>
Content for admins or moderators
</If>
<If condition={!props.isBanned}>
Content for users who are not banned
</If>
Filter calls
The only function calls allowed inside expressions are calls to registered filters:
{ upper(props.name) } {/* ALICE */}
{ truncate(props.bio, 100) } {/* first 100 chars + "..." */}
Method calls (props.name.toUpperCase()) throw at render time — the evaluator’s CallExpression handler explicitly rejects anything that isn’t a registered filter. Use the upper filter instead.
Example usage
<If condition={(props.age >= 18 && props.isMember) || props.hasGuestPass}>
Welcome to the event!
</If>
<ElseIf condition={props.age >= 18 && !props.isMember}>
Please consider becoming a member to enjoy full benefits.
</ElseIf>
<Else>
Sorry, you must be at least 18 years old to attend.
</Else>
