How to show or hide elements based on a condition

In TeleportHQ, conditional rendering shows an element only when a condition is true, for example a "Sold out" badge when stock equals 0, or a menu panel only while a state isMenuOpen is true. Select the element, turn on the Conditional Rendering switch near the top of the right panel, under Workflows, and build the condition from a value, an operator and a comparison value. Conditions work in every TeleportHQ project, website or web app, and need no extra setting.

Before you start#

• Nothing to turn on. Conditional rendering is on in every TeleportHQ project. It isn't an advanced feature any more, and using it doesn't turn a website into a web app.
• You need a value to test: a field of a list item or of a details page, a state, a component setting (prop), or a built-in value such as User is logged in. To make a value that a click can change, see How to store and use values with States.
• Role. You need a role that can edit the project, for example Designer.

Steps#

1. Turn on the Conditional Rendering switch#

1. On the canvas, select the element to show or hide, for example a "Sold out" badge inside a product card.
2. In the right panel, make sure the Visual tab is open.
3. Near the top of the right panel, under Workflows, find the Conditional Rendering section.

4. Turn on the Conditional Rendering switch at the right of the section's title. The section shows a Bind button, an Operand list and a value box.

   

2. Build the condition#

1. Click Bind. A small menu opens.
2. Click Dynamic Properties Assignment Panel. The Select Dynamic Property panel opens.
3. Choose the value to test, for example the list item's stock field, and click Bind property.
4. In the Operand list, choose how to compare, for example =.
5. In the value box, type the comparison value, for example 0.

The badge now only shows on cards whose stock is 0.

To compare with another value instead of typed text, click the plug icon next to the value box and choose Dynamic Properties Assignment Panel. Insert Code Expression in the same menu lets you type a formula instead.

Operators you can use#

The Operand list in a TeleportHQ condition depends on the type of value you test:

• Text, numbers and true/false: =, !=, >, >=, <, <=.
• Lists: contains, does_not_contain, is_empty, is_not_empty, length_equals, length_greater_than, length_less_than. With contains, a Match by field (optional): box lets you compare one field of each item, for example id.
• Objects: has_key, does_not_have_key, is_empty, is_not_empty.

is_empty and is_not_empty need no comparison value.

Combine several conditions#

To require more than one thing in TeleportHQ, for example "logged in and the cart is not empty", first bind the first value. Then:

• Click + condition to add another condition. Between two conditions, choose and (all must be true) or or (one is enough).
• Click + group to add a group of conditions. At the top of the group, choose all of or any of, and add conditions inside it with its own + condition.

To remove a condition or a group, click the × at its right.

See hidden elements while designing#

An element whose condition is false doesn't show on the canvas. TeleportHQ gives you three ways to see it:

• Change the value the canvas uses. When the selected element is hidden, the section says "Element not visible in the canvas! The current value of <value> is <v>." Click the Set … to … button below it, and the canvas shows the element. This only changes the value the editor uses for its preview.
• Show every hidden element. At the bottom center of the canvas, click See all conditionally rendered nodes. Every element with a condition shows until you click Showing all conditional nodes again. The button only appears on pages that have conditions.
• Use the canvas switch. When a state switches a section between several views (tabs, or a price toggle for monthly and yearly), a small switch appears on the canvas while you point at that section or select something in it. It lists every view; click one to see it. Visitors still start on the view your state starts with.

Common examples#

• Open and close something on a click: create a state isOpen (true or false), show the panel when isOpen = true, and give the button a Change State event that toggles isOpen. See How to use states in a component.
• Tabs: create a state activeTab, show each tab's content when activeTab = 1, 2 or 3, and make each tab button change the state. The Tabs element in Elements builds this for you.
• Show a Log out button only to signed-in visitors: test User is logged in = true. Signing in needs user accounts, which make a site a web app. See How to make a page visible only to signed-in users.
• Hide an empty field: test the field with is_not_empty when it's a list, or with != and an empty value when it's text. For a placeholder text instead, see How to show a fallback when data is missing.
• Ask the AI Assistant: you can also ask it, for example "Show the sale banner only when the cart is empty". It can add conditions on a website without making it a web app.

Check that it worked#

Change the value you test, for example switch the previewed item or the state's value, and watch the element appear and disappear. Then click Preview in the bottom toolbar and try it as a visitor would, for example by clicking the button that changes the state.

Troubleshooting#

I can't find the Conditional Rendering section You selected a component's main (outermost) element, which can't have a condition. Select an element inside it, or select the copy of the component on the page. If the Advanced or Events tab is open in the right panel, click Visual.

"Right side operator is an expression. The canvas will always treat this case as true and show it." The comparison value is a formula, which the editor can't work out. The canvas shows the element; check the real result in Preview or on your published site.

My condition disappeared Turning the Conditional Rendering switch off deletes the condition. Click Undo above the canvas, or set it up again.

The element shows in the editor but not on my live site (or the other way round) The canvas uses the value set in the editor, for example a state's Internal value or the item picked on a details page. Visitors start with the state's Default value. See Why does my data look different in the editor and on my live site?

Good to know#

• Elements hidden by a condition are still part of the page. Visitors don't see them while the condition is false.
• See all conditionally rendered nodes and the Set … to … button only change what the editor shows, never your site.
• Downloaded code: the Next.js download runs every condition. The HTML download runs conditions on states, such as a menu that opens on a click; other conditions are worked out once, from the values the page starts with. See How to download your site as code.
• To hide an element on every page load, for example on mobile only, use visibility settings instead. See How to hide an element.