Your Workspace

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

Top Bar

Left Side of the Top Bar

On the left side of the Top Bar you have the following functionalities:
    • Menu - go back to the Dashboard and set up preferences for your project
    • Project name - takes you to the Project Settings page
    • Undo/Redo
    • Zoom - control the scale of the Canvas

Right Side of the Top Bar

On the right side of the Top Bar you have the following functionalities:
    • See active users on the project
    • Invite users to collaborate
    • Preview project
​    • Show generated code
    • Export project
    • Publish project

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.

Files

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.

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.

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.

Right Panel

Finally, on the right size of the interface you have:
​    • Design Language Panel (color, text and layout) - add styles to use throughout the project
    • Style Inspector Panel (visual and advanced) - add styles to your elements