# 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. {% embed url="" %} ## 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. \ ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FSQThNbAikbVSreW5D1d1%2Fcustom%20components%20-%20publish%20icon.png?alt=media\&token=6012a52b-5e3b-40e3-bd35-f8da8a128297) 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.\ ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FBS4ZGAWZMn2ms95RJqPJ%2Fcustom%20components%20-%20share%20icon.png?alt=media\&token=7c78b102-9f1c-42d7-8775-65a3b008fec6) 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](#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.\ ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FyUurfic9e7myqdjYW8rQ%2Fmodule_add_component.png?alt=media\&token=1f26a1f3-ad3b-40b5-9010-7a990ffbd1c8) 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](#remix-an-imported-module)): 1. Open the [Share a Module](#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.\ ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FSQThNbAikbVSreW5D1d1%2Fcustom%20components%20-%20publish%20icon.png?alt=media\&token=6012a52b-5e3b-40e3-bd35-f8da8a128297) ## Remix an Imported Module 1. Open your project containing the [imported module](#import-a-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.\ ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FSQThNbAikbVSreW5D1d1%2Fcustom%20components%20-%20publish%20icon.png?alt=media\&token=6012a52b-5e3b-40e3-bd35-f8da8a128297) ## 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**. \ ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2Fuzwru9YLktMMaV9vDM79%2Fmodule_update.png?alt=media\&token=88867f26-d0b5-4cd9-9ad1-67120b4a5adb) 5. Click **Update** to confirm the update. {% hint style="danger" %} This action can't be undone and will change **all** of the instances of this imported module used in the project. {% endhint %} ## 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.

{% hint style="info" %} 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. {% endhint %} ## 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. {% embed url="" %} ## 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](#remix-a-custom-component). ## 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-module](#create-a-new-module "mention")after clicking on the **Logic Modules** tab. ## Share a Logic Module To share a Logic Module, you can follow the same steps as [#share-a-module](#share-a-module "mention")after 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. ![](https://1223006790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LAn5scXl2uqUJUOqkJo-84897653%2Fuploads%2FVPZSuVdscxh4YRKn4tj1%2Flogicmodule_import_link.png?alt=media\&token=2f8a092a-535c-4606-a92c-713bd4192dba) 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-module](#remix-a-module "mention")after 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-module](#remix-an-imported-module "mention")after 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-module](#copy-a-module "mention")after clicking on the **Logic Modules** tab.

## Edit a Logic Module To edit a Logic Module, you can follow steps 1-8 in [#edit-a-module](#edit-a-module "mention")after clicking on the **Logic Modules** tab. {% hint style="danger" %} This action can't be undone and will change **all** of the instances of this imported module used in the project. {% endhint %} ## 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. {% hint style="success" %} **Have feedback on this doc?** Please take a moment to share your feedback here: [Thunkable Docs Feedback](https://docs.google.com/forms/d/e/1FAIpQLSfCwn5L2xyla-LSLZX0DSWFcFeJ43qp-r1tELCacuVS2zduLA/viewform?usp=sf_link). Your valuable insights will help us improve and better serve you in the future. {% endhint %}