Conditions

Conditions control whether a component is visible or hidden based on data. Set the condition state to an expression, choose an operator, and optionally a second condition — the component shows or hides based on whether the expression evaluates to true or false.

Use this to hide empty sections, show "No posts" messages, or display content only for certain users.

The condition states

There are two special states for visibility:

condition — the first visibility rule. Required.

condition2 — a second condition (optional). Useful if you want to combine multiple rules.

Both accept an expression, an operator, and (for some operators) a second value to compare against.

Unary operators: testing one value

Unary operators test a single expression. You don't need to compare against anything else.

TRUTHY — the expression is truthy (not null, not false, not 0, not empty string). Use this to show a component only if data exists.

Example: Show a featured image only if it exists. - Condition: featured_image (the image field) - Operator: TRUTHY - Result: Component shows if featured_image is not null

FALSY — the expression is falsy (null, false, 0, or empty string). The opposite of TRUTHY.

Example: Show a "No image" message if featured_image is missing. - Condition: featured_image - Operator: FALSY - Result: Message shows only if featured_image is empty

EMPTY_ARR — the expression is an empty array. Use this on list expressions.

Example: Show "No posts" if the post list is empty. - Condition: posts - Operator: EMPTY_ARR - Result: Component shows if posts is an empty list

NOT_EMPTY_ARR — the expression is a non-empty array. The opposite of EMPTY_ARR.

Example: Show a blog section only if there are posts. - Condition: posts - Operator: NOT_EMPTY_ARR - Result: Component shows if posts is not empty

Binary operators: comparing two values

Binary operators compare the expression to a second value.

== (equals) — the expression equals the second value.

Example: Show a "Featured" badge only for featured posts. - Condition: is_featured (a true/false field) - Operator: == - Value: true (a fixed value) - Result: Component shows if is_featured is true

!= (not equals) — the expression does not equal the second value.

Example: Show content for non-draft posts. - Condition: status - Operator: != - Value: "draft" - Result: Component shows if status is not "draft"

> (greater than) — the expression is greater than the second value. Works on numbers and dates.

Example: Show "Best seller" badge for products with more than 100 sales. - Condition: sales_count - Operator: > - Value: 100 - Result: Component shows if sales_count > 100

< (less than) — the expression is less than the second value.

Example: Show a "Low stock" warning if inventory is less than 10. - Condition: inventory - Operator: < - Value: 10 - Result: Component shows if inventory < 10

>= (greater than or equal) — the expression is greater than or equal to the second value.

Example: Show a component for orders over $50 (inclusive). - Condition: order_total - Operator: >= - Value: 50

<= (less than or equal) — the expression is less than or equal to the second value.

Combining conditions

Use condition2 to combine two rules.

Scenario: Show a "Summer Sale" banner only for products in the "clothes" category AND priced under $50.

1. Set condition to category
2. Operator: ==
3. Value: "clothes"
4. Set condition2 to price
5. Operator: <
6. Value: 50
7. Result: Component shows only if both conditions are true

Both conditions must be true for the component to display.

Practical example: "No posts" message

Show a message when the blog post list is empty.

1. Add a Paragraph component with text "No blog posts yet"
2. Open the Data panel
3. Set the condition state:
4. Expression: posts
5. Operator: EMPTY_ARR
6. Save

The paragraph appears only when the posts list is empty. When posts exist, it hides.

Practical example: Featured content section

Show a "Featured" badge only on featured posts.

1. Add a Span or Div with the text or icon "Featured"
2. Set the condition state:
3. Expression: is_featured
4. Operator: ==
5. Value: true (fixed)
6. Save

The badge appears only on posts where is_featured is true.

Conditions in loops

Conditions are especially useful inside loops to hide/show items per iteration.

Example: Inside a blog post loop, hide drafts.

1. Your loop component has __data = posts
2. Add a component inside the loop (the post card)
3. Set the condition state on the card:
4. Expression: status
5. Operator: !=
6. Value: "draft"
7. Result: Each card shows only if the post is not a draft

Common mistakes

• Forgetting to set an operator. You need both the condition (expression) and the operator. Without the operator, the condition doesn't know what test to run.
• Using the wrong operator. TRUTHY/FALSY test if data exists; binary operators compare values. Check which one fits your logic.
• Not testing the condition. Set the condition, then check the preview. If it's not working, the expression or operator might be wrong.
• Using fixed values when you meant expressions. If you want to compare status == draft, make sure "draft" is entered as a fixed value in the "Value" field, not as an expression.

Learn more

• Binding data — creating states and expressions
• Loops and lists — showing/hiding items in a loop
• Expressions — understanding how expressions evaluate
• Filters — transforming data before testing it in a condition

---

Quiz

Q1: You want to show a component only if a post has a featured image. What condition do you set?

• A) featured_image operator TRUTHY
• B) featured_image operator FALSY
• C) featured_image operator ==

Answer

A) featured_image operator TRUTHY — TRUTHY tests if a value exists (is not null). If the image field is not empty, the component shows.

Q2: You want to show "No posts" text only when the blog is empty. What condition do you use?

• A) posts operator TRUTHY
• B) posts operator EMPTY_ARR
• C) posts operator ==

Answer

B) posts operator EMPTY_ARR — This tests if the posts list is empty. The "No posts" message shows when the list is empty.

Q3: You want to show a discount badge for items under $20. What operator do you use?

• A) price <
• B) price ==
• C) price TRUTHY

Answer

A) price < — The less-than operator compares price to 20. The badge shows if price < 20.

Q4: You want to show a component only for published posts (status = "published"). What do you set?

• A) condition = status, operator TRUTHY
• B) condition = status, operator ==, value "published"
• C) condition = published

Answer

B) condition = status, operator ==, value "published" — You're comparing the status field to the string "published". Use the == operator and enter "published" as the comparison value.

Q5: You want to show a component for high-value orders (over $100) in the "electronics" category. How many conditions do you need?

• A) One condition with two operators
• B) Two conditions (condition and condition2)
• C) One condition combining both rules

Answer

B) Two conditions (condition and condition2) — One rule tests the order amount, the other tests the category. Both must be true, so you use condition and condition2.