Conditional Content

Overview

Conditional content lets you show or hide elements in your template based on the data you pass at generation time. This means a single template can produce different-looking documents depending on the data.

Examples:

• Show a "PAID" badge only when the invoice is paid
• Display a discount line only when a discount code is applied
• Show different footer text for domestic vs. international orders
• Hide an optional notes section when no notes are provided

Setting Visibility Conditions

To make an element conditional:

1. Select the element on the canvas
2. In the inspector panel, find the Visibility section
3. Click Add Condition
4. Set the field key, operator, and value

Operators

Example: "PAID" Badge

Create a green "PAID" badge that only appears when the invoice is paid:

1. Add a Text element with the text "PAID"
2. Style it with a green background, white text, and rounded corners
3. In Visibility, set: status equals paid

// This data shows the badge:
{
  "data": {
    "status": "paid",
    "invoice_number": "INV-001"
  }
}

// This data hides the badge:
{
  "data": {
    "status": "pending",
    "invoice_number": "INV-002"
  }
}

Example: Optional Notes

Show a "Notes" section only when notes are provided:

1. Add a Text element with "Notes:" as a label
2. Add a Field element with key notes
3. Set both elements' visibility to: notes is not empty

Multiple Conditions

You can add multiple conditions to a single element. All conditions must be true for the element to be visible (AND logic).

For example, show a "VIP" badge only for paid invoices over $1,000:

• Condition 1: status equals paid
• Condition 2: total greater than 1000

Boolean Fields

For simple show/hide toggles, use boolean values in your data:

{
  "data": {
    "show_discount": true,
    "show_tax_details": false,
    "show_footer_note": true
  }
}

Set the visibility condition to: show_discount equals true

Next Steps

• Data Binding — Fundamentals of dynamic data
• Calculated Fields — Compute values from data
• Field Elements — Dynamic text fields