Chapter 13: Variables

Variables enable dynamic, personalized content in your video templates. Use variables to create templates that can be customized for different audiences, products, or contexts.

What Are Variables?

Variables are placeholders in your content that get replaced with actual values when the video is rendered:

Hello {firstName}!
Your order #{orderNumber} is ready for pickup.

Becomes:

Hello Sarah!
Your order #12345 is ready for pickup.

Variable Syntax

Variables use curly brace syntax:

{variableName}

Naming Rules

• Start with a letter or underscore
• Contain only letters, numbers, underscores, and hyphens
• Case-sensitive ({Name} ≠ {name})
• No spaces inside braces

Hyphens are supported mainly for templates imported from the classic editor, which names variables like {first-name}. For new templates, camelCase ({firstName}) reads better and matches the rest of the documentation.

Valid Examples

{firstName}
{product_name}
{Order123}
{_private}
{first-name}    // Classic-editor style

Invalid Examples

{first name}    // No spaces
{123start}      // Can't start with number
{-leading}      // Can't start with a hyphen

Transforming a Value

A placeholder can change how it shows a value without changing the variable itself. Add one or more transforms after the name, separated by |:

{firstName|upper}
{firstName|title}
{firstName|substr(0,1)|upper|possessive}

Transform	What it does	firstName = “ada lOVELACE”
upper	All capitals	ADA LOVELACE
lower	All lowercase	ada lovelace
title	Capitalizes every word, lowercases the rest	Ada Lovelace
substr(start,length)	Part of the value, counting from 0; leave out length to keep the rest (substr(4))	substr(0,3) → ada
possessive	Adds 's, or just ' when the value already ends in s	ada lOVELACE's, and “James” → James'

Transforms apply left to right, so {firstName|substr(0,1)|upper|possessive} takes the first letter, capitalizes it and adds the possessive: A's.

A transform belongs to that one placeholder. Hi {firstName|title}, {firstName} shows the capitalized and the raw value side by side, and the Variables panel still lists a single firstName variable that takes the same untransformed data. The panel shows every transformed form in use beneath the value, so you can check what each will render as.

The canvas preview (with Show values on) and the rendered video apply the transforms identically. Only the transforms above exist: {name|shout} is not a placeholder and stays literal text. The start of substr must be 0 or greater.

Transforms work wherever placeholders work: text, lists and tables, media and sound paths, and TTS text.

Where Variables Work

Variables can be used in:

Location	Example
Text elements	Hello {name}!
Voiceover transcript	Welcome, {company}...
Pattern sound URLs	audio/{language}/intro.mp3
TTS text	Your code is {code}

Using Variables in Text

Adding a Variable

1. Double-click a text element to edit
2. Type the variable with braces: {variableName}
3. Click outside to confirm
4. The variable appears with braces in the editor

In Preview

During preview, variables show their set values:

• If value is set: Shows the value
• If no value: Shows the variable name

The Variables Panel

Access the Variables panel to manage all variables:

1. Click Variables in the top toolbar
2. The panel shows all detected variables
3. Set default values for each variable
4. See where each variable is used

Variable List

The panel displays:

• Variable name
• Current default value
• The transformed forms in use (for example |title → Ada Lovelace)
• Usage count and locations
• Edit/delete controls

Setting Default Values

1. Find the variable in the list
2. Click the value field
3. Enter a default value
4. Press Enter or click outside

Default values are used in preview and when no override is provided.

Variable Usages

FX Express tracks where each variable is used:

Text Usages

Shows which scenes and elements contain the variable:

• Scene number
• Element type
• Click to navigate to usage

Voiceover Usages

Shows timestamp in the voiceover:

• Time position (e.g., “1:23”)
• Click to jump to that point

Creating Variables

Variables are auto-detected when you type them:

1. Type {newVariable} in any text element
2. The variable automatically appears in the Variables panel
3. Set its default value

You can also pre-create variables:

1. Open Variables panel
2. Click “Add Variable”
3. Enter name and default value

Common Variable Patterns

Personalization

Hi {firstName}!
Welcome back, {username}.
Dear {customerName},

Product Information

{productName}
${price}
{description}
SKU: {sku}

Dynamic Data

Date: {currentDate}
Time: {appointmentTime}
Location: {venue}

Conditional Content

Combined with Optional scenes:

Scene shows only if {hasCoupon} is "true"
Coupon code: {couponCode}

Variable Best Practices

Naming Conventions

• Use descriptive names: {customerFirstName} not {n}
• Be consistent: {productName} everywhere, not mixed with {product_name}
• Use camelCase or snake_case consistently

Default Values

• Set realistic defaults for preview
• Use typical-length text to test layout
• Consider longest expected values

Documentation

• Keep a list of variables and their purposes
• Note expected formats (dates, currency)
• Document any required vs optional variables

Testing

• Preview with different value lengths
• Test empty values (if possible)
• Verify all variables have values before export

Variable Workflow

Template Creation

1. Design with placeholder text
2. Replace placeholders with variables
3. Set default values for preview
4. Test with various value lengths

Template Usage

1. Load the template
2. Provide variable values via API or interface
3. Render with actual data
4. Each render can have different values

Variables and Scene Modes

Variables work with conditional scenes:

Optional Scenes

Show scene only when condition is met:

Variable: {showPromo}
Condition: equals "true"
Scene appears only when {showPromo} = "true"

Choice Scenes

Select variant based on variable value:

Variable: {language}
Variants: en, es, fr
Scene shows matching language variant

Troubleshooting

Variable Not Replacing

• Check spelling exactly matches
• Verify braces are correct { and }
• Ensure variable has a value set
• Check for extra spaces inside braces

Variable Not Detected

• Must use exact syntax: {name}
• No spaces: { name } won’t work
• Check for invisible characters
• Re-type the variable

Wrong Value Showing

• Check default value in Variables panel
• Verify no duplicate variable names
• Check if override value is provided
• Check the placeholder’s transforms ({name|upper} shows the value in capitals)

Transform Not Applied

• Only upper, lower, title, substr(start,length) and possessive exist
• No spaces around |: {name | title} is literal text
• substr needs whole numbers, and the start must be 0 or greater

Variable Shows in Output

• Variable name appears = no value set
• Set a default value
• Or ensure value is provided at render time

API Integration

When rendering videos programmatically, provide variable values:

{
  "variables": {
    "firstName": "Sarah",
    "orderNumber": "12345",
    "productName": "Widget Pro"
  }
}

Each render can have different values, enabling:

• Personalized videos at scale
• Dynamic content based on data
• Localized versions from one template

---

← Previous: Animations and Keyframes | Next: Smart Objects →