Showing data on your pages

How to show a fallback when data is missing

September 15, 2026
How to show a fallback when data is missing

In TeleportHQ, a fallback value is what an element shows when its data is empty, for example "No description yet" when a product has no description. After you bind a field to a data source or to a list item, a small box with the placeholder fallback value appears under the binding in the right panel. Type your fallback text there and press Enter.

Before you start

  • The field must already be bound to a data source, or to an item of a list (Array Mapper, CMS list or CMS item). See How to show data from a data source on your pages.
  • Bindings to a state, a component setting (prop), a URL Param or a global value have no fallback box.

Steps

  1. On the canvas, select the bound element, for example the description text in a product card.
  2. In the right panel, find the bound field: it shows the name of the data it's bound to. Under it, a short line leads to a box with the placeholder fallback value.
  3. Click the box and type the fallback, for example No description yet.
  4. Press Enter, or click outside the box, to save.
A bound text in the TeleportHQ right panel, with the fallback value box under the binding highlighted

When the TeleportHQ fallback shows

On your published site, the fallback replaces a value that is missing, empty, 0 or false. So a product with a price of 0 shows the fallback too: pick a fallback that also fits that case, or don't use one on number fields where 0 is a real value.

Check that it worked

Preview an item whose field is empty. For a list, find a card for an item with no description; for a details page, pick that item with the item button at the top left of the canvas. The element shows your fallback text instead of an empty space. Publish to check the live site.

Fallback ideas

  • A product without a short description: Description coming soon
  • A team member without a photo: bind the image, then type the address of a default avatar picture as the fallback
  • An event without a location: Online

Troubleshooting

I don't see the fallback value box The field is bound to a state, a prop, a URL Param or a global value, or it isn't bound at all. Fallbacks only appear for bindings to a data source or a list item.

The editor shows an empty space, but my live site shows the fallback For a field bound straight to a data source (not through a list item), the editor canvas only uses the fallback when the value is missing, not when it's an empty text. Your published site uses it in both cases.

Good to know

Share

Related Articles

How to show data from a data source on your pages

In TeleportHQ you show data on a page by binding elements to it: click the plug icon next to a field in the right panel, pick a value in the Select Dynamic Property panel and click Bind property, or use an Array Mapper to repeat a design for every item in a list.

How to show a list of items (List / Array Mapper)

In TeleportHQ, you show a list of items, such as products from a database, by adding an Array Mapper from Elements → List, binding its Source to a data source table in Array Mapper Settings, and designing one card inside it that repeats for every item.

How to design loading, empty and error states

In TeleportHQ, you design what visitors see while a list loads, when it has no items, or when a CMS list fails to load by selecting the Array Mapper, CMS list or CMS item, turning on Override State in its UI State row, picking the state and editing that version on the canvas.

How to show or hide elements based on a condition

In TeleportHQ, you show an element only when a condition is true, such as "stock equals 0" or "the menu is open", by selecting it, turning on the Conditional Rendering switch near the top of the right panel and building the condition from a value, an operator and a comparison value; it works in every project, website or web app.