Articles on: Getting started

Editor breakdown (how to navigate the editor)

Learn how to navigate Teleport before you start working on your first project.


Top bar

Left panel

Canvas

Right panel


1. Top bar


In the Top Bar you have the following functionalities:


Menu - return to the Dashboard, set up preferences and manage advanced features

Preview project

Project name - takes you to the Project Settings page

Code - Show generated code

See active users on the project

Export project

Share - Manage collaborators and access types

Publish project

Top bar of the editor


2. Left panel


Elements

The Elements panel contains all the basic building blocks with which you can start building your user interfaces. Most of them correspond to native HTML elements. You can drag and drop an element from this panel into the Canvas or use their keyboard shortcuts.

Sections

The sections panel contains over 20 categories of sections that you can use to build your website. These sections are are responsive and area created using themes in mind, which means that you can easily customize a website created with sections using themes. Learn more about how to use sections with this article.

Import HTML & CSS

This button opens a window where you can import HTML & CSS code into your project. You can also use this feature to create websites from scratch using code that was generated by AI tools like ChatGPT. Learn more about importing code in this article.

Files and layers

In the Files panel you can see all of the elements on the current page as well as all pages and components. Here you will find your list of pages and can access their settings (URL, Meta title and description, OG Image). Components are higher-level reusable building blocks that you can use to build websites faster.

CSS

Here you can manage all of the CSS classes used in your project. You can define your own classes and CSS combinators in this panel and you can also see all of the classes that are automatically generated by TeleportHQ. Learn more about CSS classes in this article.

CMS Integrations

From this section you can connect your TeleportHQ website to one of the supported headless CMS platforms. You can then use the data stored in the CMS platforms to create dynamic websites in TeleportHQ. Learn more about CMS Integrations in these articles.

Asset manager

The Assets Manager allows you to upload your own assets, access directly tens of thousands of images from the Unsplash, and choose icons from several popular libraries.


Left panel of the editor


3. Canvas


In the center, the most important piece of all, the Canvas. That's where all the visual building is happening. Above the canvas you can also find:


Zoom - control the scale of the Canvas

Undo/Redo

Media query controls


Canvas part of the editor


4. Right panel


Finally, on the right size of the interface you have:


Design language

Create your own design language using color, text, layout and imported tokens

Visual inspector panel

The Visual Inspector will help you quickly set the most common style properties on your elements. It is split into sections that are visible depending on your element's type and display property.

Advanced inspector panel

The inputs in the Advanced Inspector are similar to what you would find in the dev tools section of your browser. You can also use the Advanced inspector to add CSS properties that are not in the visual inspector.

Events

Set up events to trigger conditionally rendered elements.


Right panel of the editor


Updated on: 31/07/2025

Was this article helpful?

Share your feedback

Cancel

Thank you!