Conditional Templates

Conditionally show or hide parts of a Velt component wireframe. Conditions read the same data as 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.

React / Next.js
Other Frameworks

<VeltIf condition="{annotation.status.id} === 'OPEN' && {annotation.comments.length} === 3">
  {/* Content to render if condition is true */}
</VeltIf>

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

React / Next.js
Other Frameworks

<VeltCommentDialogWireframe.Header veltIf="{user.isAdmin} === true" />

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

{<variable>} <operator> <value>

Variables go in curly braces and support nested paths ({annotation.comments.length}, {annotation.comments[0].from.userId}). See 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

React / Next.js
Other Frameworks

{/* 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>

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

React / Next.js
Other Frameworks

client.enableSafeEval();
client.disableSafeEval();

Velt.enableSafeEval();
Velt.disableSafeEval();

Display a value instead of hiding a block: Template Variables.
Apply a CSS class on the same kind of condition: Conditional Classes.

Concepts

Approaches

Components: Async Collaboration

Components: Realtime Collaboration

Reference

Conditional Templates

1. Using `Velt If` component

2. Using `Velt If` attribute

Syntax

Examples

Strict CSP Policy

​1. Using Velt If component

​2. Using Velt If attribute

​Syntax

​Examples

​Strict CSP Policy

​Related

1. Using `Velt If` component

2. Using `Velt If` attribute

Syntax

Examples

Strict CSP Policy

Related