How to copy, paste and duplicate elements (and paste styles)

In the TeleportHQ editor, select an element, press Ctrl+C to copy it, select where it should go and press Ctrl+V to paste (use Cmd on a Mac). Press Ctrl+D to duplicate an element right after itself. To give other elements the same look, copy the styled element, select the others and press Ctrl+Alt+V (Paste Style). All of these are also in the right-click menu.

Before you start#

• These steps work on the canvas and in the layers tree.
• You need a role that can edit the page. To copy elements into another project, see How to copy elements and components to another project.

Copy and paste an element#

1. On the canvas, click the element you want to copy, for example a pricing card. To copy several, hold Ctrl (Cmd on a Mac) and click each one.
2. Press Ctrl+C (Cmd+C on a Mac), or right-click the element and choose Copy.
3. Click the container where the copy should go, for example the row that holds your cards.
4. Press Ctrl+V (Cmd+V on a Mac). The copy is added inside the selected element. If that element can't hold other elements, the copy goes into the nearest one that can.

To move an element instead, use Cut (Ctrl+X, Cmd+X on a Mac) and then paste it.

Duplicate an element#

1. Click the element.
2. Press Ctrl+D (Cmd+D on a Mac), or right-click it and choose Duplicate. A copy appears right after the original.

You can also hold Alt (Option on a Mac) while you drag an element: when you drop it, the original stays and a copy is placed where you dropped.

Copy only the style (Paste Style and Paste Classes)#

Paste Style in TeleportHQ copies the look of one element onto others, for example to make every button match the one you styled.

1. Click the element with the look you want and press Ctrl+C (Cmd+C on a Mac).
2. Select the element or elements you want to change.
3. Press Ctrl+Alt+V (Cmd+Option+V on a Mac), or right-click and choose Paste Special → Paste Style.

To copy only the CSS classes of the first element, without its other styles, choose Paste Special → Paste Classes instead. See How to apply or remove a CSS class.

Paste images, SVG icons or HTML from outside TeleportHQ#

You can paste some content copied from other apps directly onto the TeleportHQ canvas. Select one element, then press Ctrl+V (Cmd+V on a Mac):

• An image (a PNG, JPEG, GIF, WebP or SVG file, or a screenshot): you see Adding the pasted image…. TeleportHQ uploads it to your Assets Manager and adds an image element inside the selected element (or on the page when nothing is selected).
• SVG code, for example an icon copied from a design tool: it's added as an image.
• HTML code: the HTML import window opens so you can check it first. See How to import HTML and CSS code.

Plain text copied from another app isn't pasted as a text element. Add a Text element first, then paste the text into it while editing.

Check that it worked#

The pasted or duplicated element is selected on the canvas and appears in the layers tree in its new place. After Paste Style, the selected elements show the new look straight away. If something went wrong, press Ctrl+Z (Cmd+Z on a Mac) to undo.

Troubleshooting#

Paste in the right-click menu is greyed out, with "Clipboard pasting from contextual menu is not supported in Firefox or Safari" Your browser doesn't let the menu read the clipboard. Press Ctrl+V (Cmd+V on a Mac) instead.

"Clipboard permissions required" The first time you use Paste from the right-click menu, TeleportHQ asks for permission to read your clipboard. Click Submit and allow it in your browser. If you deny it, you see Browser permissions for reading the clipboard have been denied. Please use the keyboard shortcuts for pasting content. Keyboard paste still works.

"Select a single element to paste an image into." You pasted an image while several elements were selected. Click one element, then paste again.

"The pasted image was added to your assets, but could not be placed here." The image was uploaded, but the selected element can't hold an image, or you selected something else while it uploaded. Find the image in the Assets Manager and add it from there, or select a container and paste again.

Paste Style and Paste Classes are greyed out They only work after you've copied an element in this editor session. Copy the styled element again. They aren't offered on component copies (instances).

"Root nodes cannot be cut, but have been copied to clipboard." You tried to cut the page itself. It was copied instead. Paste it where you need it.

"Failed to copy to clipboard. Please try again." or "An error has occured when pasting your content." Copy the element again and retry. If you copied something else in between (in any app), the clipboard now holds that instead.

Copy or Delete is greyed out on part of a menu, dropdown or slider Some parts of interactive elements, such as the burger menu of a navigation bar or slider buttons, can't be copied or deleted on their own, because the element would stop working. Select the whole element instead.

Nothing happens when I paste into a component You can't paste inside a component copy (instance) on a page, only into its slots. To change the component itself, open it for editing first.

"Pasted elements have responsive styles for breakpoints not defined in this project (…)" The copied elements had styles for screen sizes this project doesn't use. Open the Advanced tab in the right panel to review them.

Good to know#

• What gets copied. Copying an element also copies the classes, saved colors, text styles, fonts, components and images it uses.
• Conditions. Copied content that shows or hides elements on a condition keeps working where you paste it: conditions work in every project, websites included, and pasting them changes nothing else.
• Right-click on text. While you're editing text, the right-click menu only offers Copy, Cut, Create Link and Paste.
• BMP images. BMP files can't be pasted. Save the picture as PNG or JPEG first.