Workspace

Your workspace is the home for all of your Projects.

Top Bar Navigator Styles Stage

Get started with Projects

To create a new Project → Click on the Plus icon under the Projects tab or at the + Icon at the top-right navigation.

Projects are public by default. To set a Project to private → Click on the Share icon Inside your project
Y
Your Name username
Your Bio Your Website
Projects Starred Explore Archived

Start from scratch to emphasize your own design.

Empty
Blank
From nothing to something

Pick a template to quickly get a website up and running.

Portfolio
Description

Import your design from anywhere, Relate will translate it to code.

Import
Learn more
Import Code, Figma, Sketch, XD...
Empty
Blank
From nothing to something
Portfolio
Description
Landing Page
Description
Project Name
Description
Project Name
Description

Inside your Projects

Within each Project you will find the same workspace.
It's divided in sections to help you find your way:

Top Bar

Where you manage your Project

Preview your website and code, add Elements and external resources such as stylesheets, Share your Project with collaborators, and Publish your website. Learn more.

The Play icon
Checkout your live preview
View code
View the generated code
Libraries
Add external resources
Add Elements
Add elements to your page
Publish
Publish your website
Share
Collaborate on your project
Actions
Manage the project
Y
My Account
Manage your plan and settings
Navigator

Where you create your Project's content

Add, view, and manage the Elements of your website per Page. Learn more.

Home
Page
Page 1
Page 2
Element Style
Div Identifier Style
Element Identifier Style
Element Style
Element Style
Element Style
Element Style Style
Element Style
Title
Description
Language
Favicon
Webclip
Styles Manager: Where you style your content.

View and edit the Styles and behavior of your Elements. Learn more.

Add Style
Breakpoints
States
Display
Flex





Col Gap
Row Gap
Spacing
Margin
Padding
Stage: Where content and Styles come together.

See your design changes applied in real-time. Learn more.