Thunkable Docs
Build an AppDrag and Drop DocsSnap to Place DocsAcademy
Drag and Drop
Drag and Drop
  • What is Thunkable?
  • 🗺️Getting Started
    • Gen AI
    • Getting Started Guide
    • Keyboard Shortcuts
    • Undo Redo
    • Thunkable Account
      • Account Management
    • Preview and Test your App
    • Versioning
    • Data Sources
      • Google Sheets Data Source
      • Airtable Data Source
      • Webflow Data Source
      • Local Table Data Source
    • Project Collaboration
      • Organizations
    • 🎓Sample Apps & Tutorials
      • Thunkable Community Forums
      • Sample Apps
      • Video Tutorials
        • Thunkable Live App
          • How to Test and Troubleshoot with Thunkable Live App
        • Data Source Tutorials
          • Connecting to Data Sources
            • Google Sheets
            • Local Table
          • Create Data in a Thunkable Data Source
          • Read Data in a Thunkable Data Source
          • Update Data in a Thunkable Data Source
          • Delete Data in a Thunkable Data Source
        • User Auth & Management
          • Firebase
            • User Sign-Up, Sign-In, and Auth
            • User Sign Out and Password Reset
          • Google
            • User Sign-Up, Sign-In, Sign-Out, and Auth
          • Apple
            • User Sign-Up, Sign-In, Sign-Out, and Auth
        • Projects
          • How to Save Versions of Your Thunkable Project
          • How to Copy and Customize Public or Sample Thunkable Projects
        • User Interface & Design
          • Screens
            • Save and Reuse Thunkable Screens
            • Change Thunkable Screens with a Button Click
            • Create Scrollable Screens in Your Thunkable App
          • Navigators
            • How to Use the Thunkable Stack Navigator
            • How to Use Thunkable Top and Bottom Tab Navigators
            • How to Use the Thunkable Drawer Navigator
            • Combine Figma Frames with Thunkable Navigators
          • Components
            • How to Use the Visibility Property to Create Modals in Thunkable
          • Data Visualization
            • Customize a Data Viewer
          • Text
            • Implement Text Input Validation
        • Alerts & Notifications
          • Display Alert Messages in Your Thunkable App
          • How to Create Three-Button Alert Messages
        • Files
          • Cloudinary
            • Store and Access Cloudinary Files in Your Thunkable App
        • Camera
          • How to Use the Device’s Camera
          • How to Use the Device’s Video Camera
          • Use the Device’s Camera as a QR or Barcode Scanner
        • Realtime Databases
          • Firebase
            • How to Read Data in a Firebase Realtime Database
            • How to Update Data in a Firebase Realtime Database
        • Advanced Blocks
          • Connect Your Thunkable App to a Web API
        • Thunkable Academy
          • Building Your First Thunkable App
            • Getting Started with Thunkable
            • How to Design a Thunkable App
            • How to Connect a Thunkable App to a Data Source
            • How to Make A Thunkable App Interactive with Blocks
          • Thunkable No Code App Creation Basics
            • Thunkable UI Components and App Features
            • Understanding Thunkable's Drag and Drop Block Builder
            • Design, Develop, Debug, and Deploy Your App
        • Hour of Code
          • 2021 - Build an Informational App
          • 2022 - Build a Scavenger Hunt App
          • 2023 - Build a Translator and Text-to-Speech App
        • App Building
          • How to Build a Translation App in Thunkable
          • How to Create an Image Recognition App with Thunkable
          • How to Create a Text-to-Speech App in Thunkable
  • 🎨App Design
    • User Interface (UI) Components
      • Basic Components
        • Button Component
        • Label Component
        • Rich Text Component
        • Image Component
        • Text Input Component
        • Layout Component
        • Group Component
      • Data Components
        • Simple List Component
        • Data Viewer Components
          • Data Viewer List Component
          • Data Viewer Grid Component
          • Custom Data Viewer
      • Input Components
        • Switch Component
        • Slider Component
        • Checkbox Component
        • Date Input Component
        • Time Input Component
      • Media Components
        • Animation Component
        • Video Component
        • Loading Icon Component
      • Embed Components
        • Web Viewer Component
        • Map Component
        • Canvas Component
        • PDF Reader Component
        • Rating Component
      • Modules
        • Introduction
        • User Guide
      • Generative AI
    • Screens
      • Save and Reuse Screens
      • Improve Thunkable Load Time
    • Navigators
      • Top Tab Navigator
      • Bottom Tab Navigator
      • Drawer Navigator
      • Stack Navigator
    • Figma Integration
  • 🛠️Blocks
    • Thunkable Blocks Overview
    • Core Blocks
      • Control Blocks
      • Logic Blocks
      • Math Blocks
      • Text Blocks
      • Lists Blocks
      • Color Blocks
      • Device Blocks
      • Objects Blocks
      • Variables Overview
        • Connect a Firebase Realtime Database
        • Variables Blocks
      • Functions Blocks
    • App Features Blocks
      • Speech Blocks
      • Sound Blocks
      • Share Blocks
      • Camera Blocks
      • Files Blocks
      • Sign In Blocks
        • User Sign Up, Sign In, and Authentication with Firebase
        • User Sign Up, Sign In, and Authentication with Google
        • User Sign Up, Sign In, and Authentication with Apple
      • Location Blocks
      • Push Notification Blocks
      • In-App Purchase Blocks (with RevenueCat)
      • Data Sources Blocks
      • Alerts Blocks
      • Timer Blocks
      • Sensors Blocks
        • Gyroscope
        • Magnetometer
        • Accelerometer
        • Location Sensor
      • Ads by AdMob
    • Advanced Blocks
      • Web APIs Blocks
        • CORS Policy
        • 🆓No Auth APIs
          • Update Data in a Data Source
          • CRUD Operations
          • Setting Headers
        • 📊Charting APIs
          • Create a chart template
          • Charting in Thunkable
      • Bluetooth Low Energy Blocks
      • OpenAI Services ChatGPT Integration Blocks
      • "Any Component" Blocks
      • JavaScript Web Bridge
  • ⚙️Settings
    • App Settings
      • Tablet View
    • Assets
    • Cloud Variable Viewer
    • Manage your Projects
      • My Projects Page
      • Thunkable Projects
      • Duplicate Project
      • Share Your App
      • Download Your App
        • Download Your App on iOS
        • Download Your App on Android
      • Add to Home Screen
      • Managing Project Storage
      • App Data Privacy
      • Delete Project
  • 📱Publishing
    • Overview
    • Publish to the Apple App Store
      • User Guide
      • Troubleshooting
      • Review Process
      • Tracking Usage Description
    • Publish to Google Play Store
      • User Guide
      • Troubleshooting
      • Review Process
    • Publish as a Web App
      • User Guide
      • Custom Domains
      • Troubleshooting
    • Testing
      • Testing on iOS via TestFlight
      • Testing on Android
    • Troubleshooting
      • Publishing Checklist
      • Generate Screenshots
  • 🎮Gaming
    • Gaming Overview
      • Canvas Label
      • Sprites
      • Sprite Gallery
    • Gaming Blocks
      • Events
      • Motion
      • Looks
      • Direction
      • Sensing
      • Add & Remove
      • Stage
  • 🗃️Additional Resources
    • Release Notes
      • Release Notes 2025
      • Release Notes 2024
      • Release Notes 2023
    • Troubleshooting
      • Can't Sign in to Thunkable?
      • FAQs
    • Minimum Requirements
    • Bugs and Product Feedback
    • App Services and Emulators
Powered by GitBook
On this page
  • Overview
  • Video Tutorial
  • How to Save and Reuse Thunkable App Elements with Modules
  • Create a New Module
  • Share a Module
  • Import a Module
  • Remix a Module
  • Remix an Imported Module
  • Copy a Module
  • Edit a Module
  • Create Custom Properties
  • Add a Property
  • Configure Property Blocks
  • Modify Module Property
  • Add an Event
  • Add a Method
  • Video Tutorial
  • Known Limitations
  • Logic Modules
  • Create a New Logic Module
  • Share a Logic Module
  • Import a Logic Module
  • Remix a Logic Module
  • Remix an Imported Logic Module
  • Copy a Logic Module
  • Edit a Logic Module
  • Create Custom Properties
  • Add a Property
  • Add an Event
  • Add a Method

Was this helpful?

Export as PDF
  1. App Design
  2. User Interface (UI) Components

Modules

PreviousRating ComponentNextIntroduction

Last updated 11 months ago

Was this helpful?

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. Select Publish Module.

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

  13. 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. The module's unique URL is copied to your computer's clipboard.

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. Drag the new module onto your screen.

Remix a Module

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

Remix an Imported Module

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

  2. Hover over the vertical ellipsis to display the module's details.

  3. Click on Remix.

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

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

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.

  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.

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

In the component editor, click the Share icon in the upper right.

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

The newly imported module is available under the heading Modules in the component library.

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

Open the in your browser.

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

Open your project containing the .

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

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

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

Module Link Tab - Type or paste the logic module's link.

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

🎨
Thunkable Docs Feedback
Import a Module
remix a previously imported module
Share a Module
imported module
Remix feature