How to show data from a data source on your pages
In TeleportHQ, you show data on a page by binding elements to it. Select an element, click the plug icon next to a field in the right panel, choose a value in the Select Dynamic Property panel, and click Bind property. For lists, such as products or team members, use an Array Mapper: design one card, and TeleportHQ repeats it for every item. Any element can be bound; it doesn't need to be inside a CMS element.
What you can do with data on TeleportHQ pages
| You want to… | Use | Article |
|---|---|---|
| Show a list of items as cards | Array Mapper | Show a list of items |
| Split a long list into pages, or add "Load more" | Paginated | Split a long list into pages |
| Show only some items, like one category or several brands | Filtering | Filter a list |
| Show items in a chosen order | Sort by | Sort a list |
| Let visitors search a list | Enable search | Add search to a list |
| Design what shows while loading or when empty | UI State | Design loading, empty and error states |
| Show rows and columns | Table element | Show data in a table |
| Show numbers as a chart | Chart elements | Add charts |
Give each item its own page, like /products/blue-shirt | Details pages | Create a page for each item |
| Show headless CMS content | CMS List, CMS Item, Rich Text, Mixed Type | Use CMS elements |
| Show a fallback when a field is empty | Fallback value | Show a fallback when data is missing |
| Show or hide an element, like "Sold out" | Conditional Rendering (works on every project) | Show or hide elements based on a condition |
| Keep a value that changes, like the selected tab | State (Page settings or Component settings) | Store and use values with States |
Bind one element to data
To make one TeleportHQ element show a value from data, for example a heading that shows a product name:
- On the canvas, select the element, for example a heading.
- In the right panel, find the field you want to fill, for example the text content or an image's source.
- Click the plug icon next to that field. On some fields a small menu asks you to choose Bind value (the whole field) or Edit segments (mix your own text with data, like "Price: 24 €").
- In the Select Dynamic Property panel, click through to the value, for example dataSources → Products → Item 1 → name. The path you picked shows at the bottom, after Selected:.
- Click Bind property.
The field now shows the bound value, with a trash button (Unlink) to remove the binding. A field bound to a data source or a list item also gets a fallback value field: see How to show a fallback when data is missing.
What you can bind to in TeleportHQ
The Select Dynamic Property panel lists these groups, depending on where the element is and which features are on:
- dataSources: every data source in the project, then its tables and rows.
- The list you're inside: when the element sits inside an Array Mapper or a CMS List, its context name (by default ArrayItem) gives you the current item's fields. Use this for cards in a list.
- URL Param: values from the page address, for example
?category=cakes, on pages that read them. - state and props: values stored in the page or component. A state filled from a data source lists the fields of what the source returned. See How to store and use values with States.
- global: values such as Current Language, All Languages, Current User, User is logged in, Cart, E-Commerce Products, E-Commerce Categories, Blog Posts, Blog Categories, Booking Categories or Help Categories, when those features are on.
Where data comes from while you design, and on your live site
- In the editor, the canvas loads real data from your data sources. Changes you make in TeleportHQ's table window, or through the AI Assistant, refresh the canvas by themselves. Changes made outside TeleportHQ show after you click Refresh on the list.
- On your published site, pages read the data when a visitor opens them. New or changed records appear without publishing again, unless the list caches its results.
- Design changes always need a publish: new bindings, filters and layout changes only reach the live site after you publish.
For details, see Why does my data look different in the editor and on my live site?
Troubleshooting
The plug icon's tooltip says "Cannot link dynamic property to this field" That field can't take data. Choose a different field of the element to bind.
"There was a problem loading all the data in the dynamic panel. If the problem persists, contact our support team." One data source didn't load. Check that its connection still works in the Data Sources panel, then open the panel again. If it keeps happening, write to hello@teleporthq.io.
Every card in my list shows the same item The card's elements are bound to dataSources → … → Item 1. Bind them again to the Array Mapper's item (for example ArrayItem → name).
I can't find CMS List or CMS Item in Elements Those elements only appear when a headless CMS is connected. For databases, APIs and spreadsheets, use Array Mapper, in the List group.
Good to know
- Before binding, you need a data source. See What are data sources, and which ones can I connect?
- Showing data, showing and hiding elements and keeping values in a page's state work on websites and web apps alike. Caching a list's results is the one list setting that asks to turn a website into a web app. See What's the difference between a website and a web app?
- Elements placed in a component's slot can't be bound this way: the tooltip says "Slotted elements cannot receive props."