Project settings

How to turn on Advanced Features

How to turn on Advanced Features

TeleportHQ Advanced features are optional behaviours for a project's editor and export, such as Advanced Embeds or the Private Folder. To switch one on, click the Project settings cog at the bottom of the left sidebar, open Editor → Preferences → Advanced features, and flip the switch next to the feature. Each switch saves as you flip it; there's no Save button.

Before you start

Steps

  1. In the TeleportHQ editor, at the bottom of the left sidebar, click the Project settings cog.
  2. In the Project settings panel, under Editor, click Preferences.
  3. In the drawer, click Advanced features. The five features open in a second column, each with a switch and a description.
  4. Click the switch next to the feature you want. It turns on and saves at once.
  5. To turn a feature off, click its switch again.
The TeleportHQ Advanced features settings, listing the five features with their switches and descriptions

The five Advanced Features

FeatureWhat it doesWatch out for
Advanced EmbedsCode Embed content from other sites is turned into normal page code instead of loading as external scripts, which makes published sites faster. See How to add your own HTML or JavaScript with Code Embed.
Exclude Globals from HTML ComponentsLeaves global items, such as font imports and global styles, out of components in HTML exports.Useful when you paste exported components into another site that has its own fonts and styles.
Private FolderShows a Private Folder in your uploaded files, for sensitive files such as configuration files or build scripts. See What are the Private and Functions folders?
Advanced Image OptimisationsConverts your uploaded images to WebP and resizes them for each screen size when you publish or export, which can help SEO. See How image optimization works (and how to turn it off).Creates extra image files, so the project gets a little bigger. "Does not currently apply to Angular and HTML downloads."
Strict White Space SensitivityKeeps spaces exactly as they are in HTML exports.Turn it on if words run together (missing spaces) in your HTML download.

Check that it worked

The feature's switch stays on when you close and reopen Advanced features. Features that change the published site, such as Advanced Embeds and Advanced Image Optimisations, take effect the next time you publish.

Troubleshooting

I can't find Advanced Features in the Project Menu It moved. Advanced Features are now in Project settings → Editor → Preferences → Advanced features. See Where did the Edit, View and Advanced Features menus go?.

Conditional Rendering is missing from the list It's no longer an advanced feature. Showing or hiding elements, states and events work in every TeleportHQ project, websites included, with nothing to turn on. See How to show or hide elements based on a condition.

My change doesn't show on my live site Features that affect the published site apply the next time you publish. Publish again.

Good to know

  • The dashboard's Project Settings page (project card ⋯ menu → Project Settings) also has an Advanced Features tab. There, you flip the switch and click Save Changes.
  • Older help articles mention Developer Mode. It can no longer be turned on from Advanced features.
Share

Related Articles

A tour of Project settings: everything you can set for your project

In the TeleportHQ editor, click the Project settings cog at the bottom of the left sidebar to open one panel with every project setting, grouped under Site, Appearance, Data & code, Editor, AI, Credentials and Integrations; click an entry to open it in a drawer beside the panel, and switch features such as the store or the blog on in the Plugins tab.

How to show or hide elements based on a condition

In TeleportHQ, you show an element only when a condition is true, such as "stock equals 0" or "the menu is open", by selecting it, turning on the Conditional Rendering switch near the top of the right panel and building the condition from a value, an operator and a comparison value; it works in every project, website or web app.

How image optimization works (and how to turn it off)

When you publish or export a TeleportHQ site, each uploaded image is resized to the size it's shown at, so pages load faster; if an image looks blurry, right-click it in the Assets Manager and choose Disable Optimisations, and for WebP images and phone and tablet sizes turn on Advanced Image Optimisations in Project settings → Editor → Preferences → Advanced features.

What are the Private and Functions folders?

In the TeleportHQ Assets Manager, the Private folder holds developer text files such as next.config.js that are added to the top folder of your generated project, and you show it with the Private Folder switch in Project settings → Editor → Preferences → Advanced features; the Functions folder holds .js files that become server functions at /api/<name> when you publish.

How to add your own HTML or JavaScript with Code Embed

In TeleportHQ, you add your own HTML, CSS or JavaScript to one spot on a page by dragging or clicking the Code Embed element in Elements → Primitives → Media, pasting the code into the Code Embed (HTML+CSS+JS) window and clicking Save.

Where did the Edit, View and Advanced Features menus go?

In the TeleportHQ editor, Edit and View are still in the Project Menu and are also in Project settings → Editor → Preferences, Advanced Features, AI Providers, AI Settings and Global SEO Settings moved into the Project settings panel (the cog at the bottom of the left sidebar), and Extra Features and the old Features group are now the Plugins tab.