What are data sources, and which ones can I connect?

A data source in TeleportHQ is a connection to a place where your content lives: the built-in TeleportHQ database, your own database, a spreadsheet, a web API or a headless CMS. Once a data source is connected, you can show its content on your pages, for example a product list, a team page or an events calendar. You manage all connections in the Data Sources panel in the editor. Connecting a data source doesn't turn a website into a web app.

Where to find data sources in TeleportHQ#

The TeleportHQ Data Sources panel lives in the editor's left sidebar.

1. Open your project in the editor.
2. In the left sidebar, click the database icon. Its tooltip reads Data Sources. The Data Sources panel opens.
3. To connect something new, click the + button at the top of the panel (tooltip Add Data Source). If the project has no data sources yet, the panel says No data sources in this project: click Add data source.

4. The Add Data Source panel opens beside it, with one card for each type you can connect. Click a card to open its setup form.

Each connected data source appears in the list as a card with its name and type, for example "Products DB, TeleportHQ database". When elements on your pages use it, the card also shows how many, for example "• 3 nodes" (3 elements). Click that count to see which elements use it. Once you have a data source, a Search data sources... box at the top of the panel finds one by name or type.

Which data sources TeleportHQ supports#

TeleportHQ can connect 19 types of data source. They appear in the Add Data Source panel in this order:

You can also ask the TeleportHQ AI Assistant to connect a public REST API for you, for example "connect https://api.example.com/events as a data source". It adds only APIs that need no key or password. See How to connect a REST API.

TeleportHQ database or your own database?#

Choose the TeleportHQ database when you don't have a database yet and your site is published on TeleportHQ. It is created in one click, and you build tables inside the editor. It only works on sites hosted by TeleportHQ, so it won't work in code you download.

Choose your own database (PostgreSQL, MySQL, MongoDB and others) when your data already lives there, or when other apps also use it. Your database must accept connections from the internet. See TeleportHQ database limits by plan to compare.

Rules for connecting data sources in TeleportHQ#

• One connection per database type. The TeleportHQ database, PostgreSQL, MySQL, MariaDB, Amazon Redshift, MongoDB, Redis, Firestore, ClickHouse, Airtable, CockroachDB, TiDB and Turso can each be connected once per project. After that, the type's card shows Already connected and can't be clicked. You can't add a second PostgreSQL database to the same project.
• One headless CMS per project. The CMS Connection card also shows Already connected once a CMS is set up.
• REST API, JavaScript, Google Sheets and CSV File can be added as many times as you need, for example one REST API per web service.
• Passwords and API keys are stored as Secrets. When you save a data source, TeleportHQ moves the passwords and tokens you typed into your project's Secrets. See Keep passwords and API keys safe.

Does a data source turn my website into a web app?#

No. In TeleportHQ, connecting a data source keeps a website a website. No window asks you to enable web app features, and the project needs no Web App slot. That is true for every type in the list, the TeleportHQ database included, whether you add it in the Data Sources panel or ask the AI Assistant.

What turns a TeleportHQ website into a web app are features that run on TeleportHQ's servers, such as user sign-in, a workflow, the online store, the blog or the help center. Each of them asks you first, in a window titled Enable Web App features?. See What's the difference between a website and a web app?.

What changes when you add your first data source#

The first time you save a data source in a TeleportHQ project that has no data source and no CMS yet, a window titled IMPORTANT appears. It says that by adding a data source you acknowledge that:

• "the project becomes a dynamic application that requires server-side rendering": pages that show data are built on the server, so they show current data;
• code export and download are limited to the Next.js framework;
• other frameworks, such as React, Vue and Angular, are no longer available for export.

Click I understand to finish saving. Closing the window with its × saves nothing.

Downloading code is included on Pro and Premium, and a project with data sources then downloads as Next.js. On a trial, code download isn't included. If the workspace is neither on a trial nor subscribed, the window adds a line saying that code download needs a paid plan. See Can I download my site's code?.

From data source to page#

Connecting a data source doesn't change your pages by itself. To show the data, you bind elements to it:

• a single text or image shows one field, for example a product's name;
• an Array Mapper repeats a card once for every item in a list;
• a Table element shows rows and columns;
• a details page creates one page per item, for example /products/blue-shirt.

Start with How to show data from a data source on your pages.

Good to know#

• Deleting a data source unbinds every element that uses it. If a feature such as Authentication, E-Commerce, the Admin Panel, the AI Assistant Chat, the Blog or the Help Center uses it, those features are turned off too. See Refresh, edit or remove a data source.
• When the AI builds a whole site whose pages read live data, TeleportHQ asks first whether to enable web app features: "The generated pages include web app features (workflows or live data)." If you keep it as a website, the project stays a website.
• Want to edit your data inside TeleportHQ? The TeleportHQ database and most SQL databases open in a table editor. See View, add and edit records.