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

# 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](https://velt.dev/docs/ui-customization/template-variables.md).

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.

> [tab] 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] 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>
> ```

## 2. Using `Velt If` attribute

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

> [tab] React / Next.js
>
> ```jsx theme={null}
> <VeltCommentDialogWireframe.Header veltIf="{user.isAdmin} === true" />
> ```

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

## 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](https://velt.dev/docs/ui-customization/template-variables.md) 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

> [tab] 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] 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>
> ```

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

> [tab] React / Next.js
>
> ```javascript theme={null}
> client.enableSafeEval();
> client.disableSafeEval();
> ```

> [tab] Other Frameworks
>
> ```javascript theme={null}
> Velt.enableSafeEval();
> Velt.disableSafeEval();
> ```

## Related

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


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.