How to navigate the editor

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

1. Top bar

In the Top Bar you have the following functionalities:

Menu - go back to the Dashboard, set up preferences for your project and manage advanced features
Project name - takes you to the Project Settings page
See active users on the project
Invite users to collaborate
Preview project
Show generated code
Export project
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.
Go to the Elements lesson to learn more.

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 the pages and components.

For each project you can create multiple pages, add links between them, and customize their URLs. We will cover Pages in an upcoming lesson.
Once you start building your user interface, you'll quickly detect some patterns that you will want to transform into Components.
A Component is a higher-level building block that you'll use later to speed up the composition of your layout. Components also accept properties that you can configure.
You can learn more about components in the Components lesson from the documentation.

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.
In the following lessons you will learn how to add different type of elements and you will build your first layout.

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 Panel (color, text and layout) - add style tokens to use throughout the project
Style Inspector Panel (visual and advanced) - add styles to your elements

Right panel of the editor

How to edit projects in TeleportHQ

To learn more about editing your projects in the TeleportHQ editor check out this article.

Updated on: 17/03/2025

Was this article helpful?

Thank you!