> ## Documentation Index
> Fetch the complete documentation index at: https://velt-claude-ui-customization-docs-review-m7hwcn.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Conditional Templates

> Show or hide parts of your Velt wireframe templates conditionally with Velt If.

Conditionally show or hide parts of a Velt component wireframe. Conditions read the same data as [Template Variables](/ui-customization/template-variables).

There are two ways to apply one.

## 1. Using `Velt If` component

Wrap wireframe components and HTML elements in `Velt If`. If the condition is false, nothing inside renders. Good for targeting a group of elements at once.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltIf condition="{annotation.status.id} === 'OPEN' && {annotation.comments.length} === 3">
      {/* Content to render if condition is true */}
    </VeltIf>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-if condition="{annotation.status.id} === 'OPEN' && {annotation.comments.length} === 3">
      <!-- Content to render if condition is true -->
    </velt-if>
    ```
  </Tab>
</Tabs>

## 2. Using `Velt If` attribute

Add the attribute to an existing wireframe component. Good for targeting a single component.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentDialogWireframe.Header veltIf="{user.isAdmin} === true" />
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-comment-dialog-header-wireframe velt-if="{user.isAdmin} === true">
    </velt-comment-dialog-header-wireframe>
    ```
  </Tab>
</Tabs>

## Syntax

A condition is a string evaluated as a JavaScript expression:

```text theme={null}
{<variable>} <operator> <value>
```

Variables go in curly braces and support nested paths (`{annotation.comments.length}`, `{annotation.comments[0].from.userId}`). See [Template Variables](/ui-customization/template-variables) for every available name and which roots allow nested access.

| Category   | Supported                                                    |
| ---------- | ------------------------------------------------------------ |
| Logical    | `&&`, `\|\|`, `!`                                            |
| Equality   | `==`, `!=`, `===`, `!==`                                     |
| Comparison | `<`, `>`, `<=`, `>=`                                         |
| Grouping   | `(`, `)`                                                     |
| Literals   | strings `'…'`, numbers, `true`, `false`, `null`, `undefined` |

Anything outside this list is stripped before evaluation.

## Examples

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    {/* 1. Show content only for open annotations: */}
    <VeltIf condition="{annotation.status.id} === 'OPEN'">
      <p>This annotation is currently open.</p>
    </VeltIf>

    {/* 2. Display a message for annotations with more than 5 comments: */}
    <VeltIf condition="{annotation.comments.length} > 5">
      <p>This is a popular annotation!</p>
    </VeltIf>

    {/* 3. Combine multiple conditions: */}
    <VeltIf condition="{annotation.status.id} === 'OPEN' && {annotation.comments.length} === 0">
      <p>This is a new open annotation without any comments yet.</p>
    </VeltIf>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <!-- 1. Show content only for open annotations: -->
    <velt-if condition="{annotation.status.id} === 'OPEN'">
      <p>This annotation is currently open.</p>
    </velt-if>

    <!-- 2. Display a message for annotations with more than 5 comments: -->
    <velt-if condition="{annotation.comments.length} > 5">
      <p>This is a popular annotation!</p>
    </velt-if>

    <!-- 3. Combine multiple conditions: -->
    <velt-if condition="{annotation.status.id} === 'OPEN' && {annotation.comments.length} === 0">
      <p>This is a new open annotation without any comments yet.</p>
    </velt-if>
    ```
  </Tab>
</Tabs>

## Strict CSP Policy

Some environments enforce a Content Security Policy that disallows `unsafe-eval`, which blocks the default evaluator. Switch to Velt's CSP-compliant parser:

<Tabs>
  <Tab title="React / Next.js">
    ```javascript theme={null}
    client.enableSafeEval();
    client.disableSafeEval();
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```javascript theme={null}
    Velt.enableSafeEval();
    Velt.disableSafeEval();
    ```
  </Tab>
</Tabs>

## Related

* Display a value instead of hiding a block: [Template Variables](/ui-customization/template-variables).
* Apply a CSS class on the same kind of condition: [Conditional Classes](/ui-customization/conditional-classes).