View code and export

Now that you visually built a project let's see the code behind it and learn how to export it.

View code
Export code

1. View code

At any point during the build process you can check the Code Panel that is behind the scenes populated with the generated code based on the changes you are doing in stage. To do that, go in the top right side of the Teleport and press on the Code icon.

Code panel presentation

By default, the generators are set to display our UIDL in React.js format. The UIDL (User Interface Definition Language) is the backbone of our generators. If you want to take a look under the hood, we've got an Open Source Github Repo here.

You can change the format of the code into many flavours of Javascript. We support the following:

React
Vue
Preact
Angular
React-Native
Stencil
UIDL
HTML

Along with that there are multiple ways to structure the CSS of a project that you can choose from as well. The CSS formats that we support are:

Inline Styles
CSS Modules
plain CSS
Styled Components
Styled JSX
React JSS

How to change the format of the code

What you have selected as a page or component will be shown in code format in the Code Panel.
You can also quickly copy the code and take it somewhere else.

2. Export Code

Exporting the code that is automatically generated is easy and it comes with a lot of options. Everything is batched into a project that is build on top of the Next.js framework

Export to Codesandbox
Clicking on the Export button will show all the available choices you can pick from. After selecting one, you can choose to continue to work on the project using Codesandbox.

How to export your project

Export to Github

Another option is to take the project on Github. To do this you will need to go in Project Settings and copy the Github Token there. After that, clicking on the Github icon in the Export menu will take you to the created project.

How to export to Github

Save to local

The last option is to export the code as a zip file and save it on your local machine.

How to save project on the local drive
Was this article helpful?
Cancel
Thank you!