How to copy elements and components to another project
In TeleportHQ, you can reuse a section, element or whole component in a different project with copy and paste. Copy it in the first project (Ctrl+C, or Cmd+C on a Mac), open the second project, select where it should go, and press Ctrl+V (Cmd+V). The styles, fonts, images and components it uses are copied too.
Before you start
- Both projects must be open on the same computer, because the copy goes through your computer's clipboard. They can be in different browser tabs and different workspaces.
- Use the keyboard shortcuts. In Firefox, pasting from the right-click menu doesn't work.
- To copy a whole project instead, duplicate it from the dashboard. See How to duplicate a project.
1. Copy in the first project
To copy an element or section:
- On the canvas, click the element, for example your footer section.
- Press Ctrl+C (Cmd+C on a Mac), or right-click it and choose Copy.
To copy a whole component:
- In the left sidebar, click the second icon (tooltip Pages, Components & Tree View).
- In the Components list, right-click the component and choose Copy. You can also click it and press Ctrl+C (Cmd+C on a Mac).
On the canvas, you can also right-click a component copy (instance) and choose Copy Main Component.
2. Paste in the other project
- Open the other project in the editor.
- Click the container where the content should go, for example the page's main container. For a component, you can also click a page in the Pages list.
- Press Ctrl+V (Cmd+V on a Mac). A window shows Processing clipboard content... while images are uploaded. Large content can take longer: The payload is very large, please wait a bit longer...
- If both projects have classes, saved colors or text styles with the same name but different values, the We have detected some design language conflicts window opens. Choose what to do for each one (see below), then click Submit.
Check that it worked
The pasted content appears on the canvas where you pasted it, and in the layers tree. Components it uses are added to the Components list; a component pasted from the list is also placed on the page as a copy (instance). Images it uses are in the Assets Manager, in a folder named external.
Resolve design language conflicts
The TeleportHQ conflicts window lists Classes, Tokens (saved colors and sizes) and Text styles that exist in both projects with different values. Every item starts on Keep original. Use Set all: to pick one choice for a whole group, or choose per item:
| Choice | What happens |
|---|---|
| Keep original class / token / text style | The project you paste into keeps its version. Pasted content uses it. |
| Create new class / token / text style | The pasted version is added under a new name. Both exist. |
| Replace original class / token / text style | The pasted version overwrites the one in this project, everywhere it's used. |
| Skip duplicate properties (classes and text styles) | The two versions are merged. Settings they share keep this project's values; settings only the pasted version has are added. |
| Overwrite duplicate properties (classes and text styles) | The two versions are merged. Settings they share take the pasted values; settings only the pasted version has are added. |
Click Cancel to stop the paste.
Troubleshooting
Nothing is pasted, or something else is pasted The clipboard holds the last thing you copied anywhere on your computer. Go back to the first project and copy again, then paste straight away.
Data from my CMS or database is gone Connections to data sources are removed when you paste into another project, because that project has different data. Lists and items show placeholder content. Reconnect them in the new project. See How to use CMS List, CMS Item, Rich Text and Mixed Type.
An image shows a placeholder instead of my picture The image couldn't be copied into the new project. Upload it again in the Assets Manager and replace the image.
I now have "Navbar" and "Navbar1" in my components Pasting a component whose name already exists creates a new component with a number added. It doesn't merge into or update the existing one. Delete the one you don't need.
There's no Copy in the component's right-click menu Your role in the first project can't create components, so the menu leaves Copy out. Ask the project owner or an Admin for a role that can, such as Designer. See What can each role do?
"Pasted elements have responsive styles for breakpoints not defined in this project (…)" The first project uses screen sizes the second doesn't. Review those styles in the Advanced tab of the right panel, or turn on the same screen sizes. See How to turn screen sizes on or off.
Good to know
- Languages. Only the language you're viewing is copied. If the second project has several languages, the pasted text is used for all of them until you translate it.
- Component settings. When you paste content from inside a component onto a normal page, its component settings become fixed values.
- Pasting twice creates two separate copies of any component.