How to import HTML and CSS code

In the TeleportHQ editor, click Import HTML / CSS / JS in the toolbar at the bottom of the canvas, paste your HTML (with its <style> block) into the HTML Import window, and click Save. TeleportHQ turns the code into normal elements and CSS classes that you can edit visually. You can also paste HTML straight onto the canvas.

Before you start#

• Use plain HTML, CSS and JavaScript. TeleportHQ reads HTML, not React, Next.js, Vue or other framework code. If you ask an AI tool like ChatGPT or Claude for code, ask for "plain HTML and CSS in one file".
• Put the CSS in a <style> tag in the same code, below or above the HTML. Stylesheets linked from another address with <link> aren't brought in.
• For a better responsive result, write media queries for TeleportHQ's default breakpoints: 991px, 767px and 479px. See How to turn screen sizes on or off and change their widths.
• To import a whole site with several pages, images and CSS files, use a ZIP file instead. See How to import a website from a ZIP file.
• HTML import is available on every plan.

Steps#

1. Open your project in the TeleportHQ editor.
2. Open the page where the code should go.
3. Optional: on the canvas, select the one container the code should go into. With nothing selected, TeleportHQ adds the code to the page.
4. In the toolbar at the bottom of the canvas, click the code-upload icon (tooltip Import HTML / CSS / JS). The HTML Import window opens.

5. Paste your code into the code box. TeleportHQ checks it as you type: the bar at the bottom of the window shows each check with a tick, or the number of problems it found.
6. If there are problems, click the arrow button at the window's right edge (it changes to a warning color when something is wrong). The list of problems opens on the right. Fix them (see Troubleshooting). Click a line in the list to jump to it in the code.
7. Click Save. The elements appear on the canvas.

To close the window without importing, click the X at its top right.

Tools at the bottom of the HTML Import window#

• { } (tooltip Prettify code): lays out the code neatly.
• The HTML file icon (tooltip Sanitize HTML): fixes common structure problems in the code.
• The ZIP icon (tooltip Import a project from a ZIP archive): imports a ZIP file instead. See How to import a website from a ZIP file.

Paste HTML directly onto the canvas#

1. Copy your HTML code.
2. In the TeleportHQ editor, click the page or a container on the canvas.
3. Press Ctrl+V (Windows) or Cmd+V (Mac).

The HTML Import window opens with your code already in it. Click Save. If you paste raw SVG code, TeleportHQ adds it as an image instead.

Check that it worked#

The imported elements appear on the canvas and in the layers list. Select one: in the right panel, its CSS classes from your <style> block are listed, and you can change them like any other class.

Troubleshooting#

"Unclosed tag …" or "Unended tag …" An HTML tag is missing its closing tag. Add the closing tag on the line the message names, for example </div>.

Tag "x" cannot be imported to teleport. TeleportHQ doesn't support that tag. Remove it, or replace it with a supported tag such as <div>.

"For a good experience, linebreaks should only be used inside text tags." There's a <br> outside a text element. Move it inside a <p>, heading or <span>, or remove it.

Class "x" already in project. By default, we will merge and overwrite it with the contents in the style tag. Your project already has a class with that name. If you save, the imported styles replace the existing ones, which can change other elements that use the class. To keep both, turn on Duplicate under the message, or rename the class in your code first, for example .hero to .imported-hero.

An Import Notes list appears after I paste You pasted a whole page, with <!DOCTYPE>, <html> or <body> tags. TeleportHQ removes those wrapper tags and lists what it changed under Import Notes, for example several <style> blocks combined into one. Nothing is wrong: check the list and click Save.

"Could not import HTML. The parsed HTML tree is empty." TeleportHQ found no HTML elements to import. Check that you pasted the HTML and not only CSS or JavaScript.

"Failed to run prettier, please check the syntax." or "Failed to run fixer, please check the syntax." The code has a syntax error that stops TeleportHQ from formatting it. Look for missing quotes, brackets or closing tags.

I clicked Save and nothing appeared on the canvas More than one element was selected on the canvas, so TeleportHQ skipped the import. Click one container, or press Escape until nothing is selected, then import again.

My JavaScript doesn't do anything Scripts don't run on the TeleportHQ canvas. Open the preview, or publish the site, to test them. For scripts that should run on every page, use custom code for the whole site instead.

Good to know#

• Where to put code depends on its scope:
  • A section with its own styles: import it with Import HTML / CSS / JS, so you can edit it visually.
  • A widget or snippet that must stay as code in one spot (a booking calendar, a map embed): use a Code Embed element. See How to add your own HTML or JavaScript with Code Embed.
  • Scripts, styles or tracking tags for every page: use Project settings → Custom code. See How to add code to every page (head and body).
• Prefix your class names (for example .bakery-hero__title) so imported styles don't clash with classes already in the project.
• You can copy elements from another TeleportHQ project with copy and paste. See How to copy elements and components to another project.