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

On a paid TeleportHQ plan (Pro or Premium), you download your website's code from the editor: click Code at the top right, open the Download tab, choose a format (React, Next, Vue, Nuxt, Angular or HTML) and click Download ZIP. TeleportHQ saves a ZIP file with the full project, ready to host anywhere or hand to a developer.

Before you start#

• You need a paid plan. Code download is included in Pro and Premium. A trial doesn't include it: on a trial you can look at the code in the Code tab (10 code views), but the Download ZIP button stays greyed out, and the command palette's Export as … project commands and Export to GitHub follow the same rule. See Can I download my site's code?
• Web apps can't be downloaded as code. A project that uses web app features (for example user sign-in, workflows, an online store, a blog or an admin panel) has no Code button and no Download tab. Showing and hiding elements, tabs, pop-ups and the browser widgets don't make a project a web app. See What's the difference between a website and a web app?
• Your role must allow publishing. Owners, Admins and Designers can download code. Editors and Viewers can't. See What can each role do?
• If AI is still building the project, wait until it finishes.

Steps#

1. Open your project in the TeleportHQ editor.
2. At the top right, click Code (tooltip View or Download Generated Code). A window opens on the Code tab.
3. At the top of the window, click the Download tab.
4. Click the card for the format you want. For example, click HTML to get plain HTML and CSS files you can upload to any web host. A checkmark shows your choice, and TeleportHQ remembers it for next time.
5. Read any note above the cards. It tells you what this format leaves out for your project (see "What each format keeps" below).
6. If you chose HTML, set the HTML Options (see below), or leave them as they are.
7. At the bottom of the window, click Download ZIP.

Your browser saves a file named after your project and the format, in lowercase. For example, a project called Sunny Bakery downloaded as HTML becomes sunny bakery-html.zip.

Which format should I pick?#

Some projects only offer some cards:

• Projects connected to a headless CMS or a data source show only Next and the project file: "Projects that use a Headless CMS integration or data sources can only be exported as Next.js…".
• Projects with several languages show only Next, HTML and the project file: "Projects that have internationalization enabled can only be exported as Next.js, HTML…".

HTML Options#

When you pick HTML, three options appear under HTML Options:

• Standalone Components: every component gets all its own code, so you can copy one component and paste it anywhere.
• Pages only: TeleportHQ generates only the page files and skips separate component files. You can't turn on this option and Standalone Components at the same time.
• Target Language: pick the one language to export. An HTML download holds one language at a time. A site with one language shows it too, with only that language to pick.

What each format keeps#

Every TeleportHQ download keeps your pages, components, styles, images, fonts and the code from Project settings → Custom code. These parts depend on the format:

• Showing and hiding on a click works in every format. Tabs, phone menus, pop-up windows and elements that appear on a condition keep working in the HTML download too, without a build step.
• Motion plays in Next and HTML only. Motion elements, scroll scenes and page transitions don't play in a React, Vue, Nuxt or Angular download. The Download tab says, for example: "This project has motion — Motion elements, scroll scenes or a page transition. The Next.js and HTML exports play it; the React export ships the same content without the animation."
• Browser widgets work in Next only. These widgets are left empty or without their behaviour in every other format: Calendar, Countdown, Kanban Board, QR Code, Barcode, Signature Pad, Color Picker, Emoji Picker, File Upload Field, Drag Area, Sortable List, Cookie Consent and the language switcher. The Download tab names the ones your project uses, for example: "Countdown works only in the Next.js export. The HTML download leaves it empty or without its behaviour."

• Charts and schema markup are in Next and React only. Charts are left out of the HTML, Vue, Nuxt and Angular code, and the Download tab says so, for example: "Charts are not included in the HTML code; they work in the Next.js and React exports and on the published site." The same goes for schema markup, the description of each page that search engines read.

If your site uses motion, charts or one of these widgets, pick Next to keep everything.

Check that it worked#

Open the ZIP file on your computer. For an HTML download you see HTML files for your pages, plus their styles and images. For Next, React, Vue, Nuxt or Angular, you see a project folder with a package.json file that a developer can install and run.

Troubleshooting#

The Download ZIP button is greyed out, and the tab says "Code downloads aren't included in your plan. Subscribe to a paid plan to export your project in HTML, CSS, Next.js, React, Vue or Angular." Your workspace is on a trial, or its subscription has ended. Code download needs Pro or Premium. The workspace owner can click Upgrade Now in the banner. See How to subscribe to Pro or Premium.

There is no Code button or Download tab Your project is a web app. Web apps can't be downloaded as code. You can still publish them from TeleportHQ. See Can I download my site's code?

"Your current role does not have enough permissions to view or download the generated code" Your role is Editor or Viewer. Ask a workspace owner or admin to change your role to Designer or Admin.

"Your project is still generating. Please wait for it to finish before viewing or downloading the code." AI is still building your site. Wait until generation ends, then try again.

I only see the Next card and the project file (or Next, HTML and the project file) Your project uses a CMS or data source, or has several languages. Those projects need features that other formats don't support.

A note says a widget "works only in the Next.js export" The format you picked can't run that widget. Pick Next, or remove the widget from your pages before you download.

My downloaded Next.js site shows "A custom code script on this page failed:" in the browser console One of your scripts in Project settings → Custom code throws an error. TeleportHQ catches the error and writes it to the console as a warning, instead of covering every page with the development error screen. Fix or remove that script. See How to add code to every page (head and body).

Good to know#

• Downloading doesn't publish or change your live site.
• A Next or React download brings schema markup up to date first. 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.
• TeleportHQ forms don't work in downloaded code. TeleportHQ forms only accept submissions from the project's TeleportHQ address (ending in .teleporthq.app or .teleporthq.site) and the custom domain connected to the project in TeleportHQ. On a site you host yourself, submissions are refused with "Domain not allowed" and nothing is saved. The built-in visitor analytics follow the same rule. See Why is my form not working?.
• Secrets from Project settings → Secrets appear in the code by name only, never with their value. Add the values on the host where you run the code. See How to keep passwords and API keys safe (Secrets).
• You can also send the code straight to a GitHub repository. See How to export your project to GitHub.