> ## Documentation Index
> Fetch the complete documentation index at: https://velt.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Template Variables

Template variables allow you to:

* Display dynamic data within Velt components.
* Use the dynamic data to apply conditional templates or CSS classes.

There are two main ways to use them:

1. Using built-in Velt data
2. Injecting your own application data

## 1. Using Built-in Velt Data

Velt provides access to various data objects that you can display in your components using the `VeltData` component.

### Basic Usage

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    // Display user name
    <VeltData field="user.name" />

    // Access nested properties
    <VeltData field="userContact.organizationName" />
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```jsx theme={null}
    // Display user name
    <velt-data field="user.name"></velt-data>

    // Access nested properties
    <velt-data field="userContact.organizationName"></velt-data>
    ```
  </Tab>
</Tabs>

### Available Data Objects

#### Global Variables

These are available across all Velt components:

| Variable                       | Description                  | Data Fields                                                                    |
| ------------------------------ | ---------------------------- | ------------------------------------------------------------------------------ |
| `user`                         | Current logged-in user       | You can find all the fields [here](/api-reference/sdk/models/data-models#user) |
| `unreadCommentAnnotationCount` | Number of unread annotations | -                                                                              |
| `unreadCommentCount`           | Total unread comments        | -                                                                              |

#### Context-Specific Variables

These are only available within relevant components they are used in:

| Variable                          | Available In              | Description                                                                                 |
| --------------------------------- | ------------------------- | ------------------------------------------------------------------------------------------- |
| `userContact`                     | Autocomplete components   | You can find all the fields [here](/api-reference/sdk/models/data-models#user)              |
| `commentAnnotation`               | Comment components        | You can find all the fields [here](/api-reference/sdk/models/data-models#commentannotation) |
| `comment`                         | Comment thread components | You can find all the fields [here](/api-reference/sdk/models/data-models#comment)           |
| `notification`                    | Notification components   | You can find all the fields [here](/api-reference/sdk/models/data-models#notification)      |
| `filteredCommentAnnotationsCount` | Comments Sidebar          | Number of visible comments in sidebar when system filters are applied                       |
| `annotations`                     | Comment components        | Supports nested access, e.g., `field="annotations.0.annotationId"`.                         |
| `allAnnotations`                  | Comment components        | All annotations.                                                                            |

#### `context` Variable Resolution

The `context` variable resolves differently depending on the component it is used in:

| Usage                                     | Resolves From                                                                                                     | Example                                |
| ----------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | -------------------------------------- |
| `field="context.someProperty"`            | `parentLocalUIState.context` — the local UI state context of the parent component (e.g., Inline Comments Section) | `field="context.projectId"`            |
| `field="annotation.context.someProperty"` | The `context` field on the [`CommentAnnotation`](/api-reference/sdk/models/data-models#commentannotation) object  | `field="annotation.context.projectId"` |

<Warning>
  In components such as Inline Comments Section, `field="context.someProperty"` resolves from the component's local UI state (`parentLocalUIState.context`), **not** from the annotation's context. To access context stored on the annotation, use `field="annotation.context.someProperty"` instead.
</Warning>

### Example: Building a Custom User Card

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltAutocompleteOptionWireframe>
      <div className="user-card">
        <h3><VeltData field="userContact.name" /></h3>
        <p><VeltData field="userContact.email" /></p>
        <span className="org"><VeltData field="userContact.organizationName" /></span>
      </div>
    </VeltAutocompleteOptionWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```jsx theme={null}
    <velt-autocomplete-option-wireframe>
      <div class="user-card">
        <h3><velt-data field="userContact.name"></velt-data></h3>
        <p><velt-data field="userContact.email"></velt-data></p>
        <span class="org"><velt-data field="userContact.organizationName"></velt-data></span>
      </div>
    </velt-autocomplete-option-wireframe>
    ```
  </Tab>
</Tabs>

## 2. Injecting Your Own Data

* You can inject custom data from your application to use within Velt components.
* This data is available in all Velt Wireframes, Velt If and Velt Data components.

### Setting Custom Data

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    // Set custom data
    client.setUiState({
      projectName: 'Dashboard 2.0',
      teamSize: 5,
      customFlag: true
    });

    // Read custom data
    client.getUiState().subscribe((data) => {
      console.log('Custom Data:', data);
    });
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```js theme={null}
    // Set custom data
    Velt.setUiState({
      projectName: 'Dashboard 2.0',
      teamSize: 5,
      customFlag: true
    });

    // Read custom data
    Velt.getUiState().subscribe((data) => {
      console.log('Custom Data:', data);
    });
    ```
  </Tab>
</Tabs>

### Using Custom Data in Components

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogWireframe.Header>
      <div className="header">
        <h2><VeltData field="projectName" /></h2>
        <span>Team Size: <VeltData field="teamSize" /></span>
      </div>
    </VeltCommentDialogWireframe.Header>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```jsx theme={null}
    <velt-comment-dialog-wireframe>
      <div class="header">
        <h2><velt-data field="projectName"></velt-data></h2>
        <span>Team Size: <velt-data field="teamSize"></velt-data></span>
      </div>
    </velt-comment-dialog-wireframe>
    ```
  </Tab>
</Tabs>