How to add editable settings to a component (props)

In TeleportHQ, props (component properties) let each copy of a component show its own content, for example a different photo, name and job title on each "Team member" card. Open the main component, select the text, image or link you want to make editable, click the connect (plug) icon next to its field in the right panel, and choose Create String Prop, Create Richtext Prop or Create Prop. Then select any copy on a page and change the value in the Component Properties section of the right panel.

Before you start#

• Props can only be added inside components, not on pages. Create the component first. See How to create a component.
• You need the Owner, Admin or Designer role.
• TeleportHQ doesn't create props automatically unless you turn that on. See "Create props automatically" below.

1. Create a prop from an element (recommended)#

1. Open the main component. For example, double-click a TeamMemberCard on a page.
2. On the component canvas, select the element to make editable. For example, click the name text.
3. In the right panel, find the field that holds the value: the Text Content section for a text, the image source for an image, or Fill for a colour.
4. Click the connect (plug) icon next to the field.
5. For a text, a small menu opens first. Choose Bind value. (Edit segments is for mixing fixed text with other values.)
6. Choose the kind of prop:
   • For a text: Create String Prop (plain text) or Create Richtext Prop (text that keeps bold, italic and links).
   • For any other field, such as an image, a link or a colour: Create Prop.

TeleportHQ creates the prop with the element's current value as its default and connects it to the element. It names the prop after the element (for example, an unnamed heading gives a text prop called heading), and opens Component settings → Props with the new prop selected. Rename it to something clear, for example memberName.

If TeleportHQ can't make a prop out of that value, it says "A property cannot be created for this value."

2. Create a prop from the Props tab#

Use the TeleportHQ Props tab when you want a prop first and connect it later.

1. With the component open, click Component settings above the top right of the canvas.
2. Open the Props tab.
3. Click Create new prop. The New Prop Value panel opens beside it.
4. In Name, type a name, for example buttonLabel. Spaces and dashes become underscores, and other special characters are removed as you type.
5. In Type, choose the kind of value. The common ones are string (text), richtext (formatted text), number and boolean (on or off). The panel starts on boolean.
6. For string, you can pick a Validation Type: text, color, link, email or image. For number, you can pick phone.
7. In Default, type the value copies use unless they change it, for example Book a table.
8. Click Create.

To connect this prop to an element, select the element and click the connect (plug) icon next to its field (for a text, then Bind value). Choose Dynamic Properties Assignment Panel, open props in the list, and click the prop.

3. Change the value on each copy#

1. Go back to your page and click a copy of the component.
2. In the right panel → Visual tab, open Component Properties.
3. Change the value, for example type Maria Lopez.

Only that copy changes. See How to change one copy of a component without changing the others.

Manage props in the Props tab#

The TeleportHQ Props tab in Component settings lists every prop of the component in a table:

• Name: type in the field to rename the prop. Press Enter or click away to save.
• Type: the kind of value. It can't be changed after creation.
• Default value: the value every copy shows unless the copy sets its own. Change it here to update all copies that don't override it.
• Internal value: a value used only inside the editor, while you design the component. Its tooltip says "This is the value used inside the editor, for conditional rendering": for example, set it to try out elements that show or hide depending on this prop. It isn't saved with your project (it goes back to the default when you reload), and it never changes your copies or your published site.
• Delete prop (trash icon), and an arrow that lists the Elements bound to this prop. The arrow only shows when the prop is connected to something.

Hover a row to highlight the connected elements on the canvas. Click a row to select them. Use Search props… to filter a long list.

To clean up, right-click a prop and choose Unlink (disconnect it from its elements) or Delete. The connected elements keep the default value as normal content. Delete also removes the values copies had set. When some props aren't connected to anything, a Remove all unused Props button appears.

Create props automatically#

TeleportHQ can create props for you whenever you add a text, a button, an image, a video, a text input or a link inside a component.

1. At the bottom of the left sidebar, click the Project settings cog.
2. Under Editor, click Preferences, then Editing.
3. Under Components, turn on Create props when adding text or images in components.

In the same section, Create simple string props for texts makes the automatic text props plain text instead of formatted text. Duplicate props when duplicating an element copies the props bound to an element when you duplicate it. All three are off by default. With automatic props on, Make Component also creates props for the elements it turns into a component.

Check that it worked#

Select two copies of the component on a page. Set a different value on each in Component Properties. Each copy shows its own value on the canvas.

Troubleshooting#

"A property cannot be created for this value." That field can't hold a prop, for example because the element is itself a copy of another component. Select a different element or field.

The Create button is greyed out The name is empty or invalid, or the Default value is empty. Fill in both.

"Prop or State names can't be more than 30 characters long." Shorten the name in the New Prop Value panel.

"Prop names need to be alphanumeric, in camel case and start with a letter" This appears when you rename a prop in the table. Names must start with a letter, use only letters, numbers and underscores, and be at least 2 characters long. A few words aren't allowed, such as title, state, props, window and document (the message then reads, for example, Can't name a prop "title"!). An invalid name goes back to the old name.

"The path you added is not a valid URL format." The prop's Validation Type is link. Type a full address, for example https://example.com. Props checked as email or phone show "The email address you have entered is invalid." or "The phone number you have entered is invalid…".

I can't find Component settings or the Props tab Open a component first: on a page, the button reads Page settings and has no Props tab. The button is hidden in read-only projects and for roles that can't edit components.

Good to know#

• Elements placed inside a slot never get automatic props.
• Props of type func run an action when an event happens; copies show them under Functions. object and array hold structured data. These are mostly used with events and data.