Articles on: Data Integrations

How to integrate Data Sources with your TeleportHQ websites

Learn how to add data from API’s and modern databases to your TeleportHQ website to be able to create apps, dashboards, internal tools and more.

1. Connect Data source to project

2. Map data to individual elements

3. Map data to tables

4. Map data with array mapper element

TeleportHQ supported data sources include: REST API, Supabase, PostgreSQL, MySQL, MariaDB, Amazon Redshift, MongoDB, Redis, Firestore, ClickHouse, Airtable, CockroachDB, TiDB, Turso as well as through JavaScript, Google Sheets or CSV Files.

You can connect multiple data sources to the same TeleportHQ project.

Connect data source to project

To add a new data source to your project:

Go to the Left panel -> Data Source Integration
Select a Data source from the list of integrations
Follow the steps required for the selected integration
Click Fetch Database Schema
Select the data you want to import
Click Complete Setup

Each data source integration will have unique connection requirements. You will find all of the information you need in the connection panel.

How to connect data source to a teleportHQ project

Map data to elements

After the selected data source was connected successfully to the TeleportHQ project you can map that data to any element in the project. Data can be mapped to multiple types of elements such as:

Map data to individual elements

The most basic mapping is on an individual element including text or images.

To map data to an element:

Select the element
From the Right panel click on the Link data icon
From the Dynamic panel, select the data you want to map

Mapping data to an individual element

Map data to tables

Tables can also be used to get dynamic data from data sources. To map data to a table:

From the Left panel -> Elements, Drag a table element to the project (canvas)
Go to the Right panel and click on the Link data icon
Choose the data that you want to import

Once the data is added to the table you can configure which columns are shown and their order. To do this:

With the table selected go to the Right panel
Click the Configure columns button

Mapping data from data source to a table

Map data with array mapper element

Arrays mappers can be used to display multiple items from an imported data list. The array mapper element will repeat a layout added to it as many times as there are elements in the list. The list can of course be configured and limited. To map data with an array mapper:

Go to the Left panel -> Elements
Drag the Array mapper element to the project
Go to the Right panel -> Array mapper settings
Map a list of items you want to use as a source to the Array mapper element
Add an element or component inside of the Array mapper (Items layer)
Map data to each element in the Array mapper

Mapping data with an array mapper

Updated on: 16/02/2026

Was this article helpful?

Thank you!