How to edit a component and update every copy

In TeleportHQ, you edit a component by opening its main component: double-click any copy (instance) of it on the canvas, or click the component in the Components folder of the left sidebar. It opens in its own canvas tab. Every change you make there updates all instances on every page.

Before you start#

• You need a role that can edit components: Owner, Admin or Designer.
• To change only one copy, don't edit the main component. Use props, or detach that copy. See How to change one copy of a component without changing the others.

Open the main component#

Use any of these ways in TeleportHQ:

• On the canvas, double-click an instance (it has a purple outline).
• Right-click an instance and choose Open Main Component.
• In the left sidebar → Pages, Components & Tree View, click the component in the Components folder.
• Open the command palette and type the component's name.

The component opens in a new tab above the canvas, on a checkerboard background.

In a project made with the AI Website Builder, the first time you open the navigation or the footer, a small Your Navigation (or Your Footer) panel explains that its links stay in sync with your pages. Click Show Me How for a short tour, or Got It to close it.

Edit the component#

1. On the component canvas, select the element you want to change. For example, click the logo image in a Navigation component.
2. Change it the same way you change elements on a page: edit text, replace the image, or use the right panel.
3. Add new elements from Elements: click a card, or drag it into the component.
4. Click the page's tab above the canvas to go back to your page.

Changes are saved automatically. Every instance of the component shows the change.

Place the component on a page#

1. Open the page where you want the component.
2. In the left sidebar → Pages, Components & Tree View, find the component in the Components folder.
3. Drag the component onto the canvas, to the spot where it should go.

Or select a container on the page, right-click the component in the list, and choose Add to Selected Element.

See where a component is used#

1. In the Components folder, right-click the component.
2. Choose View instances of component.

A Node References for component "…" window opens. It lists every page (and component or form) that uses the component, with the instances under each. Click an instance to open that page with the instance selected. Use the search box or Filter to narrow a long list, and Close to leave. View instances of component is greyed out when the component isn't used anywhere.

Check that it worked#

Open a page that uses the component. The instance shows your change. Instances you changed with props keep their own values for those props.

Troubleshooting#

I can't move or style an element inside the component on my page Elements inside an instance are locked on the page. Open the main component to change them. You can still style the instance as a whole, for example its margin or width.

"Could not add component because it would create a circular dependency." You tried to place a component inside itself, directly or through another component. Place it somewhere else.

"Add to Selected Element" is greyed out You are editing that same component. "A Component can't be Added in Itself."

My change didn't show on one of the pages That copy may be detached, or its props override the value you changed. Select the copy and check the Component Properties section in the right panel.

Good to know#

• The two small round swatches at the top right of the component canvas switch the checkerboard between light and dark. They don't change your site.
• The Component settings button above the top right of the canvas opens the component's Props and State. See How to add editable settings to a component (props).
• While a component is open, the command palette's Preview component opens it in a new browser tab.