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
- Plan: Pro and Premium workspaces can view code as often as they like. A trial workspace gets 10 code views in total. See Can I download my site's code?
- Role: you need to be an Owner, Admin or Designer.
- Project type: web apps don't show the Code button. See Can I download my site's code?
Steps
- Open your project in the TeleportHQ editor.
- At the top right, click Code (tooltip View or Download Generated Code). The Code window opens on its Code tab.
- 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.
- At the top of the file list, open the format menu and choose a format. For example, choose HTML.
- In the file list, click a file. Its code appears on the right.
- To copy the file, click Copy (tooltip Copy to clipboard) above the code. The message "Code copied to clipboard" appears.
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.