> ## Documentation Index
> Fetch the complete documentation index at: https://puzzlet-9ba7bb98.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Expressions

> Use JavaScript-like expressions in TemplateDX templates for dynamic content and conditional logic.

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

All five forms render in `{}` and work anywhere an expression is valid:

```jsx theme={null}
{props.tags.length}         {/* renders the number of tags */}
{[1, 2, 3].length}          {/* renders 3 */}
```

## Property access

Read nested properties with dot notation or bracket syntax:

```jsx theme={null}
{props.user.name}
{props['user-email']}
{props.items[0].title}
```

Missing nested keys via `MemberExpression` render as empty string; see [Variables](/templatedx/variables) for details.

## Operators

### Arithmetic

```jsx theme={null}
{ 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    |

<Warning>
  **Strict equality (`===` / `!==`) isn't supported.** Only the loose operators above are in the evaluator's operator table. Use `==` / `!=`.
</Warning>

```jsx theme={null}
<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

```jsx theme={null}
<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](/templatedx/filters):

```jsx theme={null}
{ upper(props.name) }          {/* ALICE */}
{ truncate(props.bio, 100) }   {/* first 100 chars + "..." */}
```

<Warning>
  **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.
</Warning>

## Example usage

```jsx theme={null}
<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>
```

This branches on three conditions: adult members or guest-pass holders get a welcome; adult non-members get a prompt to join; the prompt tells everyone else they can't attend.

## Next steps

Filters are the only callables in expressions. See [Filters](/templatedx/filters) for the built-in set and how to register your own.