Modules

Overview

Creating modules allows you to save combinations of components and blocks as components or combinations of blocks without UI elements (Logic Modules) outside of the builder experience 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 Modules

Thunkable Modules 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 modules.

Create a New Module

1. Navigate to your Thunkable Project page.

2. Under Customizations, click on the Modules tab.

3. Click Create A New Module.

   
4. Name your module.

5. Click Create.

6. The module 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 module.

   
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 module's functionality with blocks.

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

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

14. Click Publish.

Share a Module

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

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

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

Import a Module

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 next to the Add Components library.

   
4. In the modal provided, either:

   1. My Modules tab - Select a Module from the list.

      
   2. Module Link tab - Type or paste the module's link.

      
5. Click Import.

6. The newly imported module is available under the heading Modules in the component library.
7. Drag the new module onto your screen.

Remix a Module

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

1. Open the Share a Module 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 Module

1. Open your project containing the imported module.

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

3. Hover over the vertical ellipsis to display the module'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 module 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 Module

1. Navigate to your Thunkable Project page.

2. Click the Modules tab.

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

4. A copy of the module is created.

Edit a Module

To make a change to an existing module:

1. Navigate to your Thunkable Project page.

2. Click the Modules tab.

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

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

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

6. Select Publish Module.

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

8. Click Publish.

To apply the edits to a previously imported module:

1. Open your project containing the imported module.

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

3. Hover over the vertical ellipsis to display the module'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 module used in the project.

Create Custom Properties

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

For example, a page title module. Perfect the design in the module 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 module:

1. Navigate to your Thunkable Project page.

2. Click the Modules tab.

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

4. Navigate to the Blocks tab.

5. Click the gear icon next to the Module 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 module editor's block tab.

2. In the component tree, click Module Workspace to access the module's unique blocks.

3. Drag the "when Module Initialized" block into the workspace. This event block is triggered when the screen the module 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 Module Initialized" block. In our example, we want to be able to modify the page title label's text.

6. Click Module Workspace.

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

   

Modify Module Property

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

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

2. In the module's properties panel, update the module property.

   

You must view your app with web preview or Thunkable Live to see the module 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 Modules tab.

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

4. Navigate to the Blocks tab.

5. Click the gear icon next to the Module 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 Modules tab.

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

4. Navigate to the Blocks tab.

5. Click the gear icon next to the Module 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 Modules

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

Known Limitations

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

• Modules can't be added to a layout component.

• Modules can't be in shared screens.

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

Logic Modules

Building on Modules, Logic Modules are specific to blocks and allow you to to start or trigger an event, set and change properties in your projects, and share them for other Creators to use.

Create a New Logic Module

To create a new Logic Module, you can follow the same steps as Create a New Moduleafter clicking on the Logic Modules tab.

Share a Logic Module

To share a Logic Module, you can follow the same steps as Share a Moduleafter clicking on the Logic Modules tab.

Import a Logic Module

1. Navigate to your Thunkable Project Page

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

3. On the projects blocks editor, click the plus icon next to Logic Modules in the middle of the Blocks panel.

   
4. In the modal provided, either:

   1. My Logic Modules tab - Select a Logic Module from the list.

      
   2. Module Link Tab - Type or paste the logic module's link.
5. Click Import

6. The newly imported logic module is available under the heading Logic Modules in the Blocks panel.

Remix a Logic Module

To remix a Logic Module that another Creator has shared with you, you can follow the same steps as Remix a Moduleafter clicking on the Logic Modules tab.

Remix an Imported Logic Module

To remix an already imported Logic Module you, you can follow the same steps as Remix an Imported Moduleafter clicking on the Logic Modules tab.

Copy a Logic Module

To copy a Logic Module you, you can follow the same steps as Copy a Moduleafter clicking on the Logic Modules tab.

Edit a Logic Module

To edit a Logic Module, you can follow steps 1-8 in Edit a Moduleafter clicking on the Logic Modules tab.

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

Create Custom Properties

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

Add a Property

To add a property to a module:

1. Navigate to your Thunkable Project page.

2. Click the Logic Modules tab.

3. Click the Edit associated with the logic module you want to edit.

4. Click the gear icon next to the Logic Module Workspace in the component tree.

5. Click Add a Property.

6. Give the event a descriptive name.

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

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

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

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 Logic Modules tab.

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

4. Click the gear icon next to the Logic Module Workspace in the component tree.

5. Click Add an Event.

6. Give the event a descriptive name.

7. 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.

8. 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 Logic Modules tab.

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

4. Click the gear icon next to the Logic Module Workspace in the component tree.

5. Click Add a Method.

6. Give the method a descriptive name.

7. Input the parameters the method will take in.

8. 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.

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

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.