Overview

The label component is used to display read-only text and can be made clickable using blocks.

Labels work alongside other user interface components like buttons, images, and text inputs to create a cohesive and intuitive user experience.

Properties

You can customize your label using the following properties:

Label

To access the blocks specific to the label component:

1. On the Design tab, add a Label component to a screen.

2. Navigate to the Blocks tab.

3. In the component tree on the left, click the name of the label component.

Overview

The image component is used to display visual content, such as pictures, icons, logos, and other types of images and can be made clickable using blocks. The image component is foundational in creating visually appealing and engaging mobile app interfaces.

Properties

You can customize your image using the following properties:

Image

• Center: The image is displayed at its original size within the container, and it is centered both vertically and horizontally. This means that if the image is larger than the container, parts of it may extend beyond the container's edges.

• Cover: The image is resized to completely cover the container while maintaining its aspect ratio. This mode ensures that the entire container is filled with the image, and any excess image parts are cropped if necessary. This can result in parts of the image being clipped.

• Contain:

When working with these resize modes, it's important to consider the context of your app's design and the type of content you're displaying. Different situations might call for different resize modes to achieve the desired visual outcome. For instance, cover might be suitable for background images, while contain could work well for displaying profile pictures. Always strive to maintain a visually pleasing and user-friendly experience while keeping the specific characteristics of each resize mode in mind.

To access the blocks specific to the image component:

1. On the Design tab, add an Image component to a screen.

2. Navigate to the Blocks tab.

3. In the component tree on the left, click the name of the image component.

There are a number of ways that Modules can speed up app development or enhance apps themselves.

• Reusable designs and functionality. Creators can use Modules to help them avoid repeating designs and blocks across multiple screens. Today, when copying sets of components, the associated blocks will not copy. However, when copying Modules that contain components, not only are the designs preserved but also the associated Blocks and functionality.

• Blocks organization. While today you can visually collapse certain Block clusters, you may still have many blocks for variables, functions, or other blocks. By compartmentalizing them to just the components where they’re needed, you can keep your Blocks workspace more tidy and easier to understand.

• Easier updates. Have a change for a common feature across your app? Now you can just update the Module once and it will update everywhere the feature exists within the project.

• Shared advanced capabilities. Sometimes you want functionality that you’re unable to build or are unfamiliar with. Through Module publishing and importing, Creators will be able to share what they’ve built with one another.

To help you get started on building Modules, we’ve assembled a small list of samples you can use directly or even remix and make your own. To view the samples, click the plus icon next to the Add Components library on the project’s Design tab.

• Stepper. A simple user interface (UI) element that allows users to easily increment or decrement the value within a Text Input. Using its associated blocks, you can obtain the value whenever it changes or directly set the value when you need to reset it. ()

• Sign-In/Up. When paired with a valid account, app users can create accounts and sign into the app. Simply use the Module’s “successful sign up” and “successful sign in” blocks to return the new or returning user’s Firebase UUID. ()

• User Profile. This is a design template for displaying different app users’ details. You can remix this module and apply your own stylings. Once added to your project, you can set the profile fields directly using the available blocks or change multiple fields at once using the “set profile” block. Note that if left empty, a field will display the default value from its parameters. (

Overview

There are two data viewer components: the data viewer list and the data viewer grid. Each of these acts as a presentation layer for your data source.

Data Viewer List Component

Data Viewer Grid Component

Custom Data Viewer

Thunkable provides various default data viewer list and data viewer grid templates, but saving a customized layout component as a data viewer allows you to display your data in a way that reflects your brand design and preferences.

Related Docs

Data Sources

When a data source powers your app, you can continuously update your app contents without having to republish it. It allows you to build a dynamic app that can create, read, update, and delete data. Thunkable supports Google Sheets, Airtable, Webflow, and local tables as data sources.

Data Sources Blocks

By incorporating the data source blocks into your app, you can allow users to create, read, update, and delete data in your data source when they interact with the data viewer.

Overview​

The switch component is a two-state toggle that allows users to select between two options. It is commonly used in selecting on/off for things like sound, Bluetooth, WiFi, etc.

Properties

Switch

To access the blocks specific to the switch component:

1. On the Design tab, add a Switch component to a screen.

2. Navigate to the Blocks tab.

3. In the component tree on the left, click the name of the switch component.

This event fires every time the switch is clicked.

Outputs

• newValue - returns the new value of the switch (true or false) each time the switch is clicked.

There are two types of property blocks: dark green "set" and light green "get" blocks. The specific blocks available vary according to the UI component.

The dark green set blocks allow you to change the component's properties using blocks. For example, if you don't want a group component to be enabled for a user until they've typed a set number of characters into a text input component, you can use the group's dark green set group's disabled status block.

The light green get blocks allow you to access the properties of a component (e.g. color, font, width, text, etc.).

In this short guide, we will go through the entire process of creating a module and using a module within a project.

To demonstrate all aspects of Modules, we will be creating a simple module that will show the text “Hello World” in many different styles and themes. When someone clicks on “Hello World”, the background color will change.

When creating a module, the first step would be to plan what we want our module to do and how we want it to function.

Planning

First, we can think about what components we want to use first. This module will be very straightforward as we want to display text, so we will use a label component.

Next, we want to consider how it will function. It’s important to think about Modules as a separate entity in your project. It doesn’t have any way to communicate with our project unless we make that connection.

For this module, we want to display “Hello World” in many different styles. So we need to have a way to set “styles” or “modes”. When it comes to setting, there are two places where we can set. The first is done through Properties and is in the Designer tab. The second is done through Methods and is in the Blocks tab. Setting in the Designer tab would allow us to choose a design before the app loads while setting in the blocks lets us change the design while the app is running. For this module, we will opt for both options. Thus, we will need to create a connection for the project to tell the module what style of “Hello World” to display.

Another aspect to consider is whether we would like any information from the module. Information can also take the form of any actions or events taking place in the module that we would like to be able to access or know of in the project. We can do this through Events and the Blocks tab. For our module, I would like to know when someone clicks on “Hello World” or when it changes.

Although there aren’t concrete plans, it is recommended to have a general idea of what you want your module to do.

First, we will need to create a new module.

Now that we have a new module, let's start building our Module.

A module’s properties can be found by clicking on the gear icon next to the Module Workspace in the component tree. Module properties can be used to pass information from the project to the module through the Designer before the app loads up.

It is recommended that modules be published and tested throughout the development process. One important thing to note is that once we publish the module, method parameters, properties, events, and methods can not be deleted.

Module Events can be found by clicking on the gear icon next to the Module Workspace under UI Components. Module events can be used to pass information from the module to the project. You can think of events as a doorbell. Anytime the module runs that block, a doorbell is pressed to alert the project

As you add features and make fixes to your module, you will need to push those updates out to all the projects that imported your module already.

Module Methods allow your project to give commands to run blocks inside your module. This is also how you can have your project pass information from your project to your module through blocks.

Now that you have created a new feature, it is recommended to publish and test your module following the steps from and .

Like regular projects, if there is a module that looks interesting that you would like to use, modify, or look at its components or blocks, you can remix modules in projects. Give it a try with the project and module in this guide. A link to the project can be found .

Overview

The data viewer components act as a display layer for the data in a connected data source. The data viewer list displays your data as a list.

Properties

Data Viewer List

The "Item Click" event block is fired when any list item in the data viewer is clicked. It returns "row id" which corresponds to the unique Thunkable row ID of the item that was clicked. The row id is most useful when used with the the .

The left and right swipe click events are fired when these buttons are clicked. Both return a "row id" to identify which row was clicked when using the .

Refresh the data viewer list to sync with the connected data source.

Set and get of the data viewer list.

If the data viewer list isn't the best layout to display your data, one of these other options may be more appropriate:

To access the data sources blocks, you must first connect a data source. Then, by incorporating the data source blocks into your app, you can allow users to create, read, update, and delete data in your data source when they interact with the data viewer.

Overview​

User interface (UI) components make up the visual aspect of your app. Combine, style and customize Thunkable UI components to give your app personality and style that best suits your brand.​

Properties Panel

Each UI component you add to your app has an associated properties panel unique to that component. Using the various settings in the properties panel, you can style and customize your Thunkable UI components to give your app personality and style that best suits your brand.

A label's properties panel is displayed on the right in the example below. Note its unique properties, such as the label's text, font, color, etc.

Component Tree

The component tree can be found at the top left corner of your project's designer. The component tree contains a list of the UI components in your app. The expand and collapse arrows show or hide the nested UI components.

Copy and Paste Components

Once you’ve perfected a UI component on the Design tab of a drag and drop project, you can duplicate it using copy-and-paste keyboard shortcuts.

To copy and paste a component:

1. Click on a component name in the component tree (A) or the component within a screen in your workspace (B).
2. Type ctrl+c or command+c on Mac, and ctrl+c on PC, to copy the component.

3. Type ctrl+v

You can delete UI components from the component tree or the component's properties panel.

To delete a UI component from your project:

1. Hover over a component's name in the component tree.

2. Click the trash can icon.

3. Confirm the deletion.

To delete a UI component from your project:

1. Click on a component name in the component tree or the component within a screen in your workspace.

2. Click the vertical ellipsis in the upper right of the component's properties panel.

3. Select Delete.

Learn more about each of the UI components:

Once you have designed the UI you want, you can start adding functionality to your app with blocks and app features!

Overview

The PDF reader component lets users view and pinch to zoom PDF documents within the app interface. It serves as a tool for displaying various types of content, such as reports, forms, contracts, or educational materials.

Properties

PDF Reader

There are two ways to set a file to display in the PDF reader.

• Upload PDF File You can upload a PDF file as an asset in your project. If you opt for this option, be mindful of the Thunkable 50 MB app size limit.

• Enter PDF URL Enter the URL of the PDF you want to show in your project. The link must end in .pdf.

There are two types of property blocks: dark green "set" and light green "get" blocks. The specific blocks available vary according to the UI component.

The dark green set blocks allow you to change the component's properties using blocks. For example, if you don't want a button to be enabled for a user until they've typed a set number of characters into a text input component, you can use the button's dark green set button's disabled status block.

The light green get blocks allow you to access the properties of a component (e.g. color, font, width, text, etc.).

Overview

The animation component is powered by Lottie. It makes adding animations as easy as adding images. For designers, animations can be created in Adobe After Effects or Haiku and imported as a .json file. For the rest of us, there is a large and growing community of designers who have created free and editable animations that you can easily add to your app.

Video Tutorial

See a video tutorial for using animations in your Thunkable project here:

Properties

Animation

This event fires when the user clicks on the animation component. You can trigger actions to occur when the animation is clicked.

There are two types of property blocks: dark green "set" and light green "get" blocks. The specific blocks available vary according to the UI component.

The dark green set blocks allow you to change the component's properties using blocks. For example, if you don't want a button to be enabled for a user until they've typed a set number of characters into a text input component, you can use the button's dark green set button's disabled status block.

The light green get blocks allow you to access the properties of a component (e.g. color, font, width, text, etc.).

Overview

The canvas component is a touch-sensitive panel that enables the movement of objects with velocity, collisions, and the ability to bounce off each other. It is most often used to create dynamic games and experiences that involve touching the device’s screen.

Adding a Canvas

To add a canvas to your app, drag and drop the canvas component into the app builder.

When you click on the Canvas in your component tree, Canvas tab will appear. Click on this tab to customize your canvas

The three elements of a Canvas are the Stage, the Sprites, and the Canvas Label.

The Stage

The Stage is the background of your Canvas. You can set a background color or background picture, a border color, and the stage's Height and Width. You can click and drag your Sprites on the stage in the Canvas tab.

You can set Gravity of the Stage along the X and Y axis. The Sprites on the stage can be toggled to ignore gravity or not. If a Sprite is affected by gravity, it will be pulled in the direction of the gravity.

Your Canvas Stage will automatically scale up in order to match the size of the device screen. If the aspect ratio of the Stage does not match the aspect ratio of the device, you can use Stage Scaling Mode to resize the background to fill the device screen.

Scale: The aspect ratio of the background will be maintained, and the background will be scaled up. May result in some of the background being cropped.

Stretch: The background image will be stretch in order to fill the screen. May result in the background image being distorted.

Select how you want your background image to be centered when it is scaled to match the device screen.

Can be set to center, center horizontally only, center vertically only, or none.

You can enable Touch Drawing on your Screen. You can set the Drawing Color to choose the color you draw in. You can set the Drawing Width to choose the thickness of the line you draw on the stage.

You can add multiple stages to a Canvas component, in the same way you can add multiple Screens to an app project. when you have selected your Canvas tab, click on the + next to your Stage name to add another Stage to the Canvas.

Each Stage has its own Sprites, background color, gravity, etc.

Overview

The Rich Text component is used to compose and display formatted text, and can also be made clickable using blocks.

Rich Text works alongside other user interface components like buttons, images, and text inputs to create a cohesive and intuitive user experience.

Properties

You can customize your Rich Text component using the following properties:

Rich Text

To access the blocks specific to the Rich Text component:

1. On the Design tab, add a Rich Text component to a screen.

2. Navigate to the Blocks tab.

3. In the component tree on the left, click the name of the Rich Text component.

Overview

Simple lists are used to organize and display information in an easy-to-read format. They help present data or options in a structured manner, making it convenient for users to scan through and find what they need quickly. Think of a list as a tidy way to show items like contacts, tasks, or menu options, saving space and making navigation smoother within an app.

Properties

You can customize the Simple List with the following properties:

Simple List

To access the blocks specific to the simple list component:

1. On the Design tab, add a Simple List component to a screen.

2. Navigate to the Blocks tab.

3. In the component tree on the left, click the name of the simple list component.

This event fires and performs an action when the user clicks on an item within a simple list component.

Outputs

There are two types of property blocks: dark green "set" and light green "get" blocks. The specific blocks available vary according to the UI component.

The dark green set blocks allow you to change the component's properties using blocks. For example, if you don't want a group component to be enabled for a user until they've typed a set number of characters into a text input component, you can use the group's dark green set group's disabled status block.

The light green get blocks allow you to access the properties of a component (e.g. color, font, width, text, etc.).

Sample Blocks Combinations: Set Simple List's Text Items to

There are various ways you can define the items in a list using blocks. Using the "set simple list's text items to" block, you can:

• Type each list item.
• Make the list from a string of text.
• Pull list items from a column of a connected . This method allows you to create a dynamic simple list where the information displayed to the user changes whenever you change your cloud-based data in the data source.

Overview

The data viewer components act as a display layer for the data in a connected data source. The data viewer grid displays your data in a grid.

Properties

Data Viewer Grid

The "Item Click" event block is fired when any grid item in the data viewer is clicked. It returns "row id" which corresponds to the unique Thunkable row ID of the item that was clicked. The row id is most useful when used with the the .

Refresh the data viewer grid to sync with the connected data source.

Set and get of the data viewer grid.

If the data viewer grid isn't the best layout to display your data, one of these other options may be more appropriate:

To access the data sources blocks, you must first connect a data source. Then, by incorporating the data source blocks into your app, you can allow users to create, read, update, and delete data in your data source when they interact with the data viewer.

The checkbox component allows users to select one or more options from a set. They're like little digital checkboxes you see when you want to choose multiple options simultaneously, such as selecting items in a to-do list or filtering search results. These components play a pivotal role in enhancing user experience by providing a clear and intuitive way for users to select various options. They offer visual feedback, showing users what's currently selected and what's not, which is crucial for clarity and ease of use within an app.

The ability to showcase videos within a mobile application enriches user experiences and enhances engagement. The video component allows your users to play, pause, rewind, or fast-forward videos that you have uploaded to your app or linked to with a URL. The videos can be stored in the or your project.

To add a video to your project:

1. Drag and drop a video component onto the screen.

Thunkable provides various default and templates, but saving a customized layout component as a data viewer allows you to display your data in a way that reflects your brand design and preferences.

In this tutorial, we’ll show you how to customize a Thunkable data viewer so you can display your data in a way that meets your user’s needs and reflects your brand design.

1. When you're happy with the layout you have customized, ensure it is selected in the component tree.

Overview

The date input component allows users to easily select dates. It's like a digital calendar where users can pick dates for appointments, deadlines, or any time-related tasks within an app. These components are essential because they simplify entering dates, reducing errors and ensuring accuracy. The date input component utilizes the native Android and iOS date pickers.

Properties

Date Input

You can trigger actions to happen when an event occurs.

This event fires when the user has selected a date using the date picker.

Returns the date from the date picker in the format Mon., DD, YYYY.

Returns the date from the date picker in numeric form. For example, if the user selects February 17, 2024, this block returns 17. If they select 5 March 2025, this block returns 5.

Returns the month from the date picker in numeric form. For example, if the user selects February 17, 2024, this block returns 2. If they select 5 March 2025, this block returns 3.

Returns the year from the date picker in YYYY form.

Opens the date picker to prompt the user to enter a date.

There are two types of property blocks: dark green "set" and light green "get" blocks. The specific blocks available vary according to the UI component.

The dark green set blocks allow you to change the component's properties using blocks. For example, if you don't want a group component to be enabled for a user until they've typed a set number of characters into a text input component, you can use the group's dark green set group's disabled status block.

The light green get blocks allow you to access the properties of a component (e.g. color, font, width, text, etc.).

The slider component is a horizontal track with a control, called a thumb, that app users can adjust between a minimum and maximum value. As a slider’s value changes, the portion of track between the minimum value and the thumb fills with color.

The button component gives your user familiar ways to start actions in your app. Examples include navigating between app screens, submitting user inputs, and triggering a device’s camera to take a photo.

In the block combination below, when a user clicks Button1 they will be taken to, or navigate to, Screen2.

In this tutorial, you’ll learn how to use the “navigate to” block to allow your app’s users to navigate between app screens with a simple button click.