Export

How to view your site's code

How to view your site's code

In TeleportHQ, click Code at the top right of the editor to see the code generated from your design. Choose a format such as HTML or React in the format menu, click through the project's files, and copy any file with Copy. Viewing code doesn't change your live site. Viewing it as Next or React can first update your pages' AI-written schema markup, which uses AI tokens (see Good to know).

Before you start

Steps

  1. Open your project in the TeleportHQ editor.
  2. At the top right, click Code (tooltip View or Download Generated Code). The Code window opens on its Code tab.
The right side of the TeleportHQ editor header with the Code button highlighted
  1. On a trial, an Upgrade workspace window with the paid plans opens first. Close it to reach the Code window. The window then says "Your plan includes 10 code views." and how many are left. Click View code. This uses one view.
  2. At the top of the file list, open the format menu and choose a format. For example, choose HTML.
  3. In the file list, click a file. Its code appears on the right.
  4. To copy the file, click Copy (tooltip Copy to clipboard) above the code. The message "Code copied to clipboard" appears.
The TeleportHQ Code window on its Code tab, with the format menu and the Copy button highlighted, the project's files on the left and a file's code on the right

When HTML is selected, a gear button (tooltip HTML generation options) next to the format menu lets you preview the same options as the download: Standalone Components, Pages only and, on sites with several languages, Language.

To get every file at once, use the Download tab instead. The footer says so: "Use the Download tab to get all your source files at once." See How to download your site as code.

Check that it worked

The file list on the left shows your project's folders and files, and the code of the selected file shows on the right. Choosing another format in the menu generates the files again in that format.

Troubleshooting

"You've used all your code views. Subscribe to a paid plan to preview code without limits." Your trial workspace has used its 10 code views. Clicking View code now opens "This feature is not available on your current plan". To keep viewing code, the workspace owner can subscribe to Pro or Premium.

"Full project could not be generated, but individual components' code can be viewed." Something in the project stopped the full code from generating. You can still open the code of single components. On a trial, viewing this partial result doesn't use a code view. If a component shows "Could not generate code", contact support from the chat in the editor and name that component.

The format menu only offers Next, HTML and the project file Your project is connected to a CMS or a data source, or has several languages. Those projects can only be generated in these formats. The last option in the menu shows the project file that TeleportHQ's open-source code generators read. It isn't website code.

There is no Code button Your project is a web app. Web apps don't show generated code. See What's the difference between a website and a web app?

"Your current role does not have enough permissions to view or download the generated code" Ask a workspace owner or admin to give you the Designer or Admin role.

"Your project is still generating. Please wait for it to finish before viewing or downloading the code." AI is still building your project. Wait until it finishes, then click Code again.

Good to know

  • The 10 trial code views belong to the whole workspace, not to one person or one project, and they don't reset during the trial.
  • Next and React code bring schema markup up to date. Schema markup is the description of a page that search engines read. Before showing Next or React code, TeleportHQ rewrites the AI-written schema markup (a page's Page settings → Schema markup) of every page whose content changed since, which uses AI tokens. It's skipped while your workspace has fewer than 500 tokens, and never replaces schema markup you edited by hand. To turn this off, switch off Keep Schema Markup Up To Date in Project settings → SEO & social → Search engines. See How to add schema markup (structured data) to your pages.
  • Older help articles mention CSS style options (Styled JSX, CSS Modules, Styled Components). The current Code tab doesn't offer them.
Share

Related Articles

How to download your site as code (React, Next.js, Vue, HTML and more)

On a paid TeleportHQ plan (Pro or Premium), click Code at the top right of the editor, open the Download tab, pick a format such as HTML, React or Next and click Download ZIP to save your website's source code; a trial can't download code and web apps can't be downloaded.

Can I download my site's code?

Yes, on a paid TeleportHQ plan (Pro or Premium) you can download a website's code as HTML, React, Next.js, Vue, Nuxt or Angular, or export it to GitHub; a trial only lets you view the code (10 code views), and web apps can't be downloaded as code.

How to export your project to GitHub

On a paid TeleportHQ plan, open Code → Download, pick a format, click Export to GitHub, paste a classic GitHub personal access token with the repo scope and click Export to GitHub again; TeleportHQ creates or updates a repository with your website's code.

How does the TeleportHQ free trial work?

Every new TeleportHQ account starts a free 7-day trial with no credit card, covering the whole product on 1 project with 30,000 AI tokens; subscribe before it ends to keep your work online and get 25,000 extra tokens.

What can each role do? (Admin, Designer, Editor, Viewer)

TeleportHQ has six roles (Owner, Admin, Designer, Editor, Viewer and Limited Viewer); Owner, Admin, Designer and Editor can edit and use an editor seat, Viewers are free and read-only, and the Editor role can't publish, view code, edit components or see every page by default.