> ## 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.

# Variables

> Pass dynamic data into TemplateDX templates via the props object.

TemplateDX doesn't have variable declarations. At render time, the caller passes a `props` object to `transform()`; your template reads those values with `{props.*}` expressions. Tag plugins can introduce additional scoped variables (for example, `<ForEach>` gives you the loop iterand).

## Accessing variables

### Dot notation

Read nested properties with dot notation, same as JavaScript:

```jsx theme={null}
{props.username}
{props.user.firstName} {props.user.lastName}
```

### Bracket syntax

Bracket syntax works for dynamic or hyphenated keys:

```jsx theme={null}
{props['user-name']}
{props['user-email']}
```

## Undefined-variable behavior

Nothing in this path throws, so a typo degrades silently. The two cases degrade differently:

* **Missing nested properties** (anything after a `.` or `[...]`) render as an empty string:
  ```jsx theme={null}
  {props.user.address.street}   // renders '' if `address` or `street` is missing
  ```
* **Bare unknown identifiers** (no `props.` prefix) resolve to `undefined` and render the literal string `undefined` into your output:
  ```jsx theme={null}
  {someGlobal}   // renders the text "undefined", no error
  ```

<Warning>
  A typo in a `<ForEach>` iterand is the common way this corrupts prompts: writing `{itme}` instead of `{item}` injects the string `undefined` into every iteration, with no error or warning. Prefer the `props.` prefix wherever possible, since unknown nested keys degrade to an empty string instead of the string `undefined`.
</Warning>

Only variables provided by the caller's `props`, introduced by a tag plugin's scope (such as the `<ForEach>` iterand), or registered filters (see [Filters](/templatedx/filters)) are accessible. JavaScript globals aren't.

## Examples

### Defined variable

```jsx theme={null}
{props.username}
```

```text theme={null}
Alice
```

### Nested properties

```jsx theme={null}
{props.user.firstName} {props.user.lastName}
```

```text theme={null}
Alice Johnson
```

### Bracket syntax for dynamic properties

```jsx theme={null}
{props['user-email']}
```

```text theme={null}
alice.johnson@example.com
```

### Undefined nested property

```jsx theme={null}
{props.user.address.street}
```

(renders empty string)

### Undefined bare identifier

```jsx theme={null}
{username}
```

```text theme={null}
undefined
```

(renders the literal string `undefined`; the caller passed `props.username`, but the expression forgot the prefix)

## Next steps

Variables are the simplest expressions. See [Expressions](/templatedx/expressions) for operators, literals, and filter calls.