Custom Components
Creating custom components is currently in a private beta testing phase. If you want to join the private beta program, see this post in the Community: Be a part of testing our latest Beta feature, Custom Components!
Creating custom components allows you to save combinations of components and blocks to reuse in the same or other projects. Create the component in the component dditor once and use it as often as you need in any of your projects.
- 1.Navigate to your Thunkable Project page.
- 2.Click the My Components tab.
- 3.Click Create A New Component.
- 4.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.
- 5.From the components library, drag and drop components into the group on the screen.
- 6.Resize the group as necessary to achieve your desired design.
- 7.Navigate to the Blocks tab.
- 8.Build your component’s functionality with blocks.
- 9.When you’re happy with your component, click Publish in the upper right.
- 10.Select Publish Component.
- 11.Include Release Notes. For future iterations, you’ll include what is changed in the version.
- 12.Click Publish.
- 1.Navigate to your Thunkable Project page.
- 2.Open an existing project or create a new one.
- 3.On the project’s Design tab, scroll to the bottom of the components library.
- 4.Click Import a Component.
- 5.Choose a component to import.
- 6.Click Import.
- 7.The newly imported component is available under the heading Imported Components at the bottom of the components library.
- 8.Drag the new component onto your screen.
- 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.
- 9.Return to your Thunkable Project page.
- 10.Open your project.
- 11.A question mark icon appears when you hover over the imported component’s tile in the component tree.
- 12.Hover over the question mark icon to display the messaging.
- 13.To apply the revisions you made in the component editor to the components you added to your screens within this project, click Update Component.
- 14.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.
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.Click the X in the upper right to close the modal.
As part of this private 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.
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.
Last modified 3d ago