Custom Components

Creating custom components is currently in a public beta testing phase.

Overview

Creating custom components allows you to save combinations of components and blocks to reuse in your projects and share them for other Creators to use. Create the component in the component editor once and use it as often as you need in any of your projects.

Video Tutorial

How to Save and Reuse Thunkable App Elements with Custom Components

Thunkable custom components allow you to save and reuse combinations of UI components and blocks in your projects. In this tutorial, you’ll learn how to create, share, import, copy, and edit custom components.

Create a New Custom Component

1. Navigate to your Thunkable Project page.

2. Click the My Components tab.

3. Click Create A New Component.

   
4. Name your custom component.

5. Click Create.

6. The component editor opens. It is similar to the editor you’re used to designing in, but you’ll notice the screen has a default group component within which to build your custom component.

   
7. From the components library, drag and drop components into the group on the screen.

8. Resize the group as necessary to achieve your desired design.

9. Navigate to the Blocks tab.

10. Build your component’s functionality with blocks.

11. When you’re happy with your component, click the Publish icon in the upper right.
12. Select Publish Component.

13. Include Release Notes. For future iterations, you’ll include what changed in the version.

14. Click Publish.

Share a Custom Component

You can share custom components with other Creators using the component's unique URL. When you're ready to share a custom component:

1. In the component editor, click the Share icon in the upper right.
2. The custom component's unique URL is copied to your computer's clipboard.

3. Share the URL with another Creator. To import your shared custom component, they will follow these instructions: Import a Custom Component (choosing option 2 in step 4).

Import a Custom Component

1. Navigate to your Thunkable Project page.

2. Open an existing project or create a new one.

3. On the project’s Design tab, click the plus icon at the top of the Add Component library.

   
4. In the modal provided, either:

   1. My Components tab - Select a custom component from the list.

      
   2. Component Link tab - Type or paste the custom component's link.

      
5. Click Import.

6. The newly imported component is available under the heading Custom Components in the components library.
7. Drag the new component onto your screen.

Remix a Custom Component

If another Creator has shared a custom component with you, you can remix it following the steps below (you can also remix a previously imported custom component):

1. Open the Share URL of a Custom Component in your browser.

   
2. Click on Click to Remix near to the top right.

3. Make any desired changes and then click Publish to make available for importing into a project's component library.

Remix an Imported Custom Component

1. Open your project containing the imported custom component.

2. When you hover over the imported custom component in the component library, a vertical ellipsis appears.

3. Hover over the vertical ellipsis to display the custom component's details.

   
4. Click on Remix.

5. You will be given the option to select Remix and Replace or to simply Remix. Remixing creates a copy that can be edited but won't replace the original that you have already imported into your project. Remix and Replace creates a copy that can be edited and replaces the original imported component in your project. Deselect the checkbox if and click Remix to simply make a copy that can be edited.

   
6. Make the desired changes to the copy and click Publish to make available for importing into a project's component library.

Copy a Custom Component

1. Navigate to your Thunkable Project page.

2. Click the My Components tab.

3. Click the Copy associated with the component you want to make a copy of.

4. A copy of the custom component is created.

Edit a Custom Component

To make a change to an existing custom component:

1. Navigate to your Thunkable Project page.

2. Click the My Components tab.

3. Click the Edit associated with the component you want to edit.

4. Make the necessary changes on the Design and Blocks tabs.

5. When you’re happy with your component, click Publish in the upper right.

6. Select Publish Component.

7. Include Release Notes that state what has changed in this version.

8. Click Publish.

To apply the edits to a previously imported custom component:

1. Open your project containing the imported custom component.

2. When you hover over the imported custom component in the component library, a vertical ellipsis appears.

3. Hover over the vertical ellipsis to display the custom component's details.

4. To apply the changes you made in the component editor to the components you added to your screens within this project, click Update.
5. Click Update to confirm the update.

This action can't be undone and will change all of the instances of this imported component used in this project.

Create Custom Properties

Adding a property to your custom component allows its properties to be modified after it has been imported into a project.

For example, a page title custom component. Perfect the design in the custom component editor, add a property and the associated blocks, and then modify the page title on each screen of the imported project.

Add a Property

To add a property to a custom component:

1. Navigate to your Thunkable Project page.

2. Click the My Components tab.

3. Click the Edit associated with the component you want to edit.

4. Navigate to the Blocks tab.

5. Click the gear icon next to the Component Workspace in the component tree.

6. Click Add a Property.

7. Give the event a descriptive name (e.g. page title).

8. Select the property type (String (text), Boolean (true or false), Number, or Color).

   
9. Input the default value, the value the property will have if it is not modified in the project it's imported into.

10. Click the X in the upper right to close the modal.

Configure Property Blocks

To configure the blocks to modify the component's properties when it is later imported into a project:

1. Navigate to the custom component editor's block tab.

2. In the component tree, click Component Workspace to access the custom component's unique blocks.

3. Drag the "when Component Initialized" block into the workspace. This event block is triggered when the screen the custom component is added to opens.

4. Click the name of the component to which the property applies. In this example, we're changing the page title label.

5. Drag the relevant block into the "when Component Initialized" block. In our example, we want to be able to modify the page title label's text.

6. Click Component Workspace.

7. Drag the property block you created when you added a property to the custom component and connect it to the existing blocks.

   

Modify Custom Component Property

Once a custom component has been imported into a project, to modify its properties:

1. Drag and drop the imported custom component onto your project's screen.

2. In the custom component's properties panel, update the custom property.

You must view your app with web preview or Thunkable Live to see the custom property render. It will not be rendered in the project's designer.

Add an Event

An event is a block that allows the project to react to behavior that occurred inside of the component.

1. Navigate to your Thunkable Project page.

2. Click the My Components tab.

3. Click the Edit associated with the component you want to edit.

4. Navigate to the Blocks tab.

5. Click the gear icon next to the Component Workspace in the component tree.

6. Click Add an Event.

7. Give the event a descriptive name (e.g. continue button clicked).

8. Input the parameters the event will take in.

   Once you drag and drop a block that refers to the parameter or publish the component, the event's parameters cannot be edited.

9. Click the X in the upper right to close the modal.

Add a Method

A method is a block that allows the project to trigger behavior to occur inside of the component. When you call a method, it is possible to provide additional information in parameters. When a project calls a component's method, the component has access to the values in the parameters.

1. Navigate to your Thunkable Project page.

2. Click the My Components tab.

3. Click the Edit associated with the component you want to edit.

4. Navigate to the Blocks tab.

5. Click the gear icon next to the Component Workspace in the component tree.

6. Click Add a Method.

7. Give the method a descriptive name (e.g. change color).

8. Input the parameters the method will take in (e.g. color).

9. Press your keyboard's enter or return key.

   Once you drag and drop a block that refers to the parameter or publish the component, the method's parameters cannot be edited.

10. Click the X in the upper right to close the modal.

Video Tutorial

How to Use Methods to Trigger Behavior in Thunkable Custom Components

In this tutorial, you’ll learn how to use methods to trigger behavior in custom components.

Known Limitations

As part of this beta release, some functionality is not supported. This includes the following:

• Custom components can't be added to a layout component.

• Custom components can't be in shared screens.

• Creators can't update a custom component that they do not own. To do so they will need to use the Remix feature.

Have feedback on this doc? Please take a moment to share your feedback here: Thunkable Docs Feedback. Your valuable insights will help us improve and better serve you in the future.