A tour of the TeleportHQ editor

The TeleportHQ editor is where you build and change a project. It has five areas: the header at the top (the Project Menu, Share, Code and Publish), the left sidebar with panels such as Elements, Pages, Components & Tree View, Plugins and Growth, the canvas in the middle where your page is shown, the right panel that shows either your site's Design Language or the styles of the selected element, and a floating toolbar at the bottom with Preview, Backups and Support. All of a project's settings are in one Project settings panel, opened from the cog at the bottom of the left sidebar.

The five areas of the TeleportHQ editor are:

1. The header at the top, with the Project Menu, Share, Code and Publish.
2. The left sidebar, with panels such as Elements, Pages, Components & Tree View, Plugins and Growth.
3. The canvas in the middle, where your page is shown.
4. The right panel, which shows either your site's Design Language or the styles of the selected element.
5. The floating toolbar at the bottom, with Preview, Backups and Support.

The header (top bar)#

The TeleportHQ editor header runs across the top of the screen.

On the left:

• Project Menu: the TeleportHQ logo. It opens a menu with Dashboard (back to your projects), Project settings, Edit and View (switches for how the editor behaves and what it shows), Accessibility check (problems that make your site hard to use for some visitors, such as an image without alternative text or text with low contrast), AI Hub, Help, Refer & Earn and Account.
• Trial chip: on a trial, the workspace owner sees how many days are left, for example "Trial · 5d left", with Subscribe now.
• Warning chips: yellow or red chips appear when something needs attention, such as missing settings or security issues. See What do the warnings at the top of the editor mean?.

In the middle: the project name. Click it to see your Available tokens and to open Purchase tokens, AI Costs & Usage, AI Hub and Project settings. Workspace owners and editors also see Duplicate and Create New Project.

On the right:

• A warning icon, shown after the editor reported errors or warnings. Click it to read them again under Recent errors and warnings.
• The avatars of people who are in the project right now. Click one to follow what they're doing.
• Public or Private, and Share: invite people and change who can see the project.
• Refer & Earn: invite friends and earn AI tokens.
• Code: view or download your site's code.
• Publish: put your site online.
• Upgrade: shown to the workspace owner when the workspace isn't on a paid plan.

The left sidebar#

The TeleportHQ left sidebar is a column of icons in three parts, separated by thin lines. Click an icon to open its panel; click it again to close the panel. Hover an icon to see its name.

1. Elements: add building blocks (text, images, buttons, forms, layouts) from Primitives, or ready-made designs from Sections. See How to add elements to a page.
2. Pages, Components & Tree View: the Explorer, with your pages, your components and the layers tree of the open page. See How to use the layers tree.
3. Data Sources: connect databases, a CMS or APIs. See What are data sources?.
4. Workflows: build automations for web apps. See What are workflows?.
5. Assets Manager: upload and pick images, videos, icons and files. See What is the Assets Manager?.
6. Plugins: the features your project can add, such as sign-in, a store, a blog or bookings. Above it, each plugin your project uses gets a button of its own: E-commerce, Blog, Help Center, Bookings and AI assistant chat, while they're switched on.
7. Growth, under the Live label: analytics, SEO tools and the Marketing Studio, plus what your live site receives: form submissions, and the store's orders and the bookings when those are switched on. See What's in the Growth tab?.

Forms don't have an icon of their own. You add a form from Elements, and its submissions are in Growth → Forms → Form submissions. See How to see and export form submissions.

The TeleportHQ Plugins panel lists Authentication, E-commerce, Blog, Help Center, Bookings, AI assistant chat and Admin panel, with a Search plugins... field above them. Each row says On or Off, and an orange warning icon (Needs attention) shows when a plugin that's on has something to fix. Click a row to open its settings beside the list. For the Blog, for example, they hold the Blog enabled switch, Start tutorial, Blog panel with an Open button, Show in the left sidebar, and then the Blog's own settings. Switching on any plugin turns a website into a web app, and TeleportHQ asks you to confirm first. See How to turn features on or off, What's the difference between a website and a web app? and How to add a blog to your site.

At the bottom of the TeleportHQ left sidebar, the Project settings cog opens the Project settings panel. It holds all of the project's settings, grouped under Site, Appearance, Data & code, Editor, AI, Credentials and Integrations. Small icons at the bottom of that panel open the Discord community, the Video tutorials and the Keyboard shortcuts. See Where are Project Settings, and what's in them?.

You can drag the icons above Plugins into the order you like. Right-click the TeleportHQ left sidebar to change which icons it shows:

• Hide followed by the icon's name, such as Hide Data Sources, hides the icon you right-clicked.
• Buttons in the sidebar lists every icon, each with a tick you can turn on or off.
• Show all buttons brings back every hidden icon.
• Reset order puts the icons back in their first order.

The same switches are in Project Menu → View → Left sidebar. Elements and Plugins can't be hidden, and Plugins and Growth keep their places. See How to reorder the tabs in the left sidebar.

The canvas#

The TeleportHQ canvas is the large area in the middle that shows your page as visitors will see it. Click an element to select it; double-click a text to edit it.

Above the page you'll find:

• Tabs for the pages and components you have open, like tabs in a browser.
• Undo and Redo. See How to undo and redo changes.
• Screen size icons (breakpoints) to design for laptop, tablet and phone. See How to make your site look good on phones and tablets.
• Zoom controls: −, the zoom percentage (click to reset to 100%) and +. See How to zoom and move around the canvas.
• Ask AI above the top left of the page. Above the top right, Page settings (Component settings when a component is open) and AI Assistant. See What can the TeleportHQ AI Assistant do?.

When some elements are hidden, a small card at the bottom center of the canvas shows how many, for example "3 hidden elements". Click it to find and show them. See How to hide an element.

The right panel#

The TeleportHQ right panel shows one thing at a time, and it changes depending on what you're doing:

• Nothing selected: the Design Language panel, with your site's colors, text styles, spacing and CSS classes. See What is the Design Language panel?.
• An element selected: the Inspector, with the tabs Visual and Advanced for styling that element. See How the style panel works.
• AI Assistant open: the chat with the AI Assistant.
• Comments open: the comments list.

The bottom toolbar#

The TeleportHQ toolbar floats at the bottom of the editor. From left to right, it has:

1. Quests: guided tasks that earn AI tokens. See What are Quests?.
2. Your AI token balance, shown as a number of tokens. Click it to buy more AI tokens.
3. The import and view buttons:
   • Import HTML / CSS / JS and Import Project (ZIP): bring in existing code. See How to import HTML and CSS code.
   • Show layout structure: a gray outline view of your page. See How to see your page structure.
   • Show comments: comments from you and your team. See How to leave and reply to comments.
4. Backups: save and restore versions of your project. Backups aren't included in the trial. See How to back up and restore your project.
5. Preview: open your whole site in a new tab and click through it. See How to preview your site before publishing.
6. Support: chat with the TeleportHQ team. See How to get help.

If the toolbar is gone, open Project Menu → View → Workspace and click Toolbar to show it again.

Good to know#

• First-time tour. The first time you open a project, TeleportHQ shows a short tour with five stops: the AI Assistant button, the Toolbar, Elements, Layers & Files and the Assets Manager. Click Next to move on and Complete at the end. To see it again, open the Project Menu → Help → Restart Tutorial.
• Keyboard shortcuts make many actions faster. Open the list from Project Menu → Help → Keyboard Shortcuts, or press Ctrl + Shift + / (⌘ + Shift + / on Mac). See Keyboard shortcuts in the TeleportHQ editor.
• Command palette. Press Ctrl + P (⌘ + P on Mac) to search your pages and components, or type > to run a command. See How to use the command palette.
• Small screens. The TeleportHQ editor needs a window at least 767 pixels wide. See Which browsers and devices does TeleportHQ work on?.