What is the Assets Manager?

The Assets Manager is the place in the TeleportHQ editor for all your project's media. Open it from the left sidebar (or press Ctrl+4, Cmd+4 on Mac). In the Uploads tab you upload, organize and check your own images, videos, documents, audio and 3D files. The Stock, 3D, Audio and Icons tabs offer free photos, videos, 3D models, sounds and icons you can add to your pages.

How to open the Assets Manager#

In the TeleportHQ editor, do any of these:

• In the left sidebar, click the folder icon (tooltip Assets Manager).
• Press Ctrl+4 (Cmd+4 on Mac).
• Double-click an image, video or other media element on the canvas.
• In the right panel, click the image thumbnail in an element's Background section.

The first time you open it, the Stock tab is selected. When you drag files from your computer over the editor, it switches to Uploads.

If the folder icon is missing from the left sidebar, it's hidden. Right-click the left sidebar and choose Show all buttons. See How to reorder the tabs in the left sidebar.

The Uploads tab#

The Uploads tab of the TeleportHQ Assets Manager holds your own files. From the top:

1. The tabs: Uploads, Stock, 3D, Audio and Icons.
2. Search: type part of a file or folder name to find it.
3. Runtime Storage: files that visitors of your web app uploaded. See How to let visitors upload and store files (Runtime Storage).
4. The Public folder: your uploads and the folders you make. Its + button uploads files or creates a folder.

Between Runtime Storage and Public sits the Functions folder, with the Private folder above it if you turned it on. See What are the Private and Functions folders?

When the page you're editing uses files that are heavy for a web page, a line such as 2 heavy files on this page shows above Runtime Storage. See How to find files that slow down your page.

At the bottom of the tab, Sort files by: lists files by name or by size.

The five tabs#

How to use an asset on your page#

To add a TeleportHQ asset to your page, point at it in the Assets Manager and click the button that appears on its row, or drag it onto the canvas. What the button does depends on what you have selected:

• Nothing, or a container, selected: the button adds a new Image, Video, Audio or 3D model element (tooltip add asset to stage).
• An image, video, audio or 3D model element selected: the button swaps the file (tooltip replace asset).
• Hold Alt: the file is added next to the selected element instead (tooltip add sibling).

Right-click a picture in Uploads for more options, such as Add Image Block, Add Container with Background Image, Edit Image… (opens the image editor, for PNG, JPEG and WebP pictures) and Generate AI Variation. With a container selected, the menu also offers Set as Background Image. Documents and text files can't be placed on the canvas; link to them instead.

How to edit a picture#

The TeleportHQ image editor changes a PNG, JPEG or WebP picture from your Uploads. Open it with Edit Image… in the picture's right-click menu, or select the image on the canvas and click Edit image above it. The Edit image window has six tabs:

The Background and AI tabs use AI tokens, and show the cost ("Uses about … AI tokens") before you start. Undo and Redo sit at the top of the window; the zoom buttons, Fit and 100%, sit at the bottom of the picture. Save as new image adds the result as a new file in the same folder; the original stays as it was. If you close the window with changes you haven't saved, TeleportHQ asks first: Keep Editing or Discard Changes.

What you can do with your files#

• Upload images, videos, documents, audio and 3D models. See How to upload images, videos and files.
• Check which files are allowed and your storage limit. See Which files can I upload, and how big can they be?
• Sort files into folders. See How to organize files in folders.
• Rename files, delete them and remove unused ones. See How to rename or delete files (and remove unused ones).
• Find the files that slow down a page. See How to find files that slow down your page.
• Link to a PDF or other file so visitors can open or download it. See How to link to a file so visitors can download it.
• Edit text files such as robots.txt without uploading them again. See How to edit uploaded text files.
• Edit a picture: crop, adjust, add text, remove the background, change it with AI, or save a smaller copy. See How to add and replace images.
• Use SVG images. See How to use SVG images.
• Control image optimization. See How image optimization works (and how to turn it off).
• Use the Private and Functions folders for developer files. See What are the Private and Functions folders?

What you can add for free#

• Stock photos and videos from Unsplash and Pexels. See How to use free stock photos and videos (Unsplash, Pexels).
• 3D models, game sprites and sounds. See How to use free 3D models, game sprites and sounds.
• Icons you can recolor. See How to add and color icons.
• AI-generated images from a folder's + menu → Generate new asset. This uses AI tokens. See How to generate images with AI.

Good to know#

• Uploads count toward your project's storage. Stock photos, stock videos, sprites and sounds are linked from the provider and don't use storage. Stock 3D models are copied into your project and do use storage.
• Images and videos that nothing in your project uses show a yellow icon: "This asset is not being used in the project. It will be ignored when exporting or publishing."
• A file whose size shows in orange or red, with a warning sign, is heavy for a web page. Point at the size to read why.
• Visitors who aren't signed in see "Sign in to upload custom assets or use images from Unsplash" in the Uploads tab, with a Sign In button.