Data & databases

A data source is a connection that brings content from a database, spreadsheet, API or headless CMS into your TeleportHQ project, so your pages show real data instead of typed text; you manage them in the editor's Data Sources panel, and connecting one keeps a website a website.

In TeleportHQ, you connect your own database from Data Sources → Add Data Source, by entering its connection details and clicking Fetch Database Schema, which adds all its tables to your project.

To connect Supabase to TeleportHQ, copy the Session or Transaction pooler connection string from your Supabase dashboard, paste it in Data Sources → Add Data Source → Supabase, and click Fetch Database Schema.

To connect Airtable to TeleportHQ, create an Airtable personal access token with the data.records:read and schema.bases:read scopes, then enter it with your Base ID in Data Sources → Add Data Source → Airtable.

To use a Google Sheet in TeleportHQ, share the sheet so anyone with the link can view it, paste its URL in Data Sources → Add Data Source → Google Sheets, load the preview and click Save Data Source.

In TeleportHQ you can use a fixed list as data without any external service, either by uploading a CSV file (Add Data Source → CSV File) or by typing a JSON-style list in the JavaScript data source.

In TeleportHQ, you connect a REST API from Data Sources → Add Data Source → REST API by entering the API URL, choosing the method, adding any headers or authorization, clicking Fetch data from API and then Save Data Source; you can also cache the API's answers, or ask the AI Assistant to connect a public API.

In TeleportHQ, you connect Strapi, Contentful, WordPress, caisy.io or Flotiq from Data Sources → Add Data Source → CMS Connection, enter the CMS credentials, and choose which content types get automatic list and details pages.

TeleportHQ stores passwords, tokens and API keys as project Secrets, which the project owner manages in Project settings → Data & code → Secrets and links to credential fields with the plug button, instead of typing the value into each data source.

In TeleportHQ, click a data source card in the Data Sources panel to rename it, change its connection details or refresh its tables, and use the card's trash button to delete it, which unbinds every element that uses it.

To add the built-in TeleportHQ database, open Data Sources in the editor's left sidebar, click + (Add Data Source), choose TeleportHQ database and click Setup TeleportHQ Database; TeleportHQ creates a hosted database for the project that you then fill with tables.

On Pro and Premium, a TeleportHQ database holds up to 200,000 records per table, 3,000,000 records in total and 2 GB, with up to 30 tables, 20 columns per table and 20 indexes; a database created during the trial gets the lower tier (5,000 records per table, 15,000 in total, 50 MB) and becomes inactive after 7 days.

In TeleportHQ, you create tables from the Add a new table card of your database in the Data Sources panel, either by filling in the Create New Table form or by describing the tables you need in the Create Tables with AI window.

In TeleportHQ, Import from File on your database's Add a new table card turns a CSV, Excel (.xlsx), OpenDocument, JSON, SQL dump or SQLite file into new tables with their rows, and the upload button in a TeleportHQ database table's window imports a CSV into that existing table, updating matching rows and adding the rest.

In TeleportHQ, you manage a database table's rows in its table window, opened with View Data in the Data Sources panel: click Create Record to add a row, double-click a cell to change it, open a row's menu for View Details or Delete Record, and use the SQL view to look up rows with a query.

In TeleportHQ, you change a table's columns in the Structure view of its table window: click Add Column to add a field, the pencil (Edit column) to change one, tick Foreign Key to link a column to another table, and use Recent changes to revert a change you made.

A TeleportHQ database on the lower tier, which includes every database created during the trial, becomes inactive 7 days after it's created or after a subscription ends, so logins, the store, bookings, the blog and anything else that uses it stop working; subscribing to Pro or Premium within 30 days restores it from its backup and moves it to the paid limits.

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.

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.

In TeleportHQ, you paginate a list by selecting an Array Mapper, Table or CMS List bound to data, ticking Paginated and setting Items/page; you can choose Previous / Next buttons or numbered pages, load more items as visitors scroll, or add a Load more button.

In TeleportHQ, you filter a list by selecting an Array Mapper or CMS list bound to data, clicking + next to Filtering in the right panel, choosing a field, an operand and a value in Filtering Options and clicking Save Changes; several filters must all match, and on database lists you can switch them to OR and group them.

In TeleportHQ, you sort a list by selecting an Array Mapper bound to data and either typing a field name in Sort by with asc or desc in Sort direction, or clicking + next to Sorting to add rules with Ascending or Descending; whichever you set last is the one the list uses.

In TeleportHQ, you add a search box to a list by selecting an Array Mapper or Table bound to a data source and ticking Enable search; TeleportHQ adds a search input that filters the list by its text fields, in Preview and on your published site.

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.

In TeleportHQ, you show data as rows and columns by adding a Table from Elements → List, clicking Data Source at the right of the Table section in the right panel to pick a table, and using Configure in Configure columns to choose and order the columns.

In TeleportHQ, you add a chart by clicking a chart card in Elements → Charts, then in the right panel's Chart Settings choosing the Chart Type, typing labels and values under Data (or clicking Bind to use dynamic data), and setting the title, legend and axes under Options; charts need no web app.

In TeleportHQ, you give every item in a list its own page, like /products/blue-shirt, by opening a page's menu in Pages, Components & Tree View, turning on Is Details Page, choosing the list in Select Source, and designing the page once with elements bound to the current item.

When a headless CMS is connected to your TeleportHQ project, the Elements panel shows a CMS group with CMS list (many entries), CMS item (one entry), Rich Text (formatted content) and Mixed Type (a different component per entry type), which you bind to your CMS content types in the right panel.

In TeleportHQ, when you bind a field to a data source or to a list item, a "fallback value" box appears under the binding in the right panel; type the text to show when the data is empty or missing, such as "No description yet", and press Enter.

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.

In TeleportHQ, a state is a named value, like isMenuOpen or activeTab, that elements can read and clicks can change; you create one for a page or component from the Page settings or Component settings button above the canvas, in the State tab, and it works in every project, website or web app; global states live in Project settings and need a web app.

In TeleportHQ, the editor and your published site load data separately: design and filter changes need a publish, cached lists and cached REST API responses can show older content for a while, CMS pages refresh on their own schedule, and data changed outside TeleportHQ needs a Refresh in the editor.