Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
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.
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 .
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.
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.
Custom Data ViewerWhen 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 SourcesBy 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.
Data Sources BlocksThere 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. (
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.​
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.
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.
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:
Click on a component name in the component tree (A) or the component within a screen in your workspace (B).
Type ctrl+c or command+c on Mac, and ctrl+c on PC, to copy the component.
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:
Hover over a component's name in the component tree.
Click the trash can icon.
Confirm the deletion.
To delete a UI component from your project:
Click on a component name in the component tree or the component within a screen in your workspace.
Click the vertical ellipsis in the upper right of the component's properties panel.
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!
The video component lets you play videos in your 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:
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.
When you're happy with the layout you have customized, ensure it is selected in the component tree.
Create interactive gaming apps with the canvas component.
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.
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 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
In-App Notification. Customize an in-app notification to match your app's stylings. Note that in order to use this Module, you will need to place it within a Group and toggle its visibility based on when you want the notification displayed or not. (Demo Project)
Click and drag the new component to position it as you desire.
Confirm the deletion.
You have two options for adding a video:
Upload Video File
You can upload a video file as an asset in your project. If you opt for this option, be mindful of the Thunkable 50 MB app size limit.
Enter Video URL
Enter the URL of the video you want to show in your project. The link must end in .mp4, .mov, etc., so videos uploaded to YouTube and other video-sharing sites may not work.
Video
The video users can play within your app.
Uploaded video file or the video's URL.
Play
Toggle whether or not video file auto-plays when the screen opens.
X
Location of top left corner of video component on X-axis, where the left hand side is X=0.
Number
Y
Location of top left corner of video component on Y-axis, where the top side is Y=0.
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.).
The video component is not recommended for streaming live video content.
Select Save as Data Viewer Layout.
Give your data viewer layout a detailed name.
Select the Layout Type you want to create. - List for a data viewer list - Grid for a data viewer grid
Click OK.
Click the Create New Screen icon at the top of the component tree in the Designer.
Drag a Data Viewer List or Data Viewer Grid component onto your screen.
Reposition and resize as necessary.
Connect your project to a data source. See here for instructions on connecting a data source: .
Click the sample template to access the data viewer templates available to you.
Click to select the layout you saved as a data viewer from the bottom of the template library.
Map your data source columns to components within your custom data viewer layout.
Custom data viewers are created using Thunkable’s layout component, which allow for more precise positioning of UI components on an app screen.
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.
A custom data viewer is designed to view data. It is not intended to receive user inputs. As such, we recommend that input components such as the text input and button, for example, are not included in a custom data viewer layout.
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.
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.
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.
The animation component is powered by . It makes adding animations as easy as adding images. For designers, animations can be created in or and imported as a .json file. For the rest of us, there is a large and growing community of designers who have that you can easily add to your app.
See a video tutorial for using animations in your Thunkable project here:
True/False
Number
Height
Height of video component in pixels.
Number
Width
Width of video component in pixels.
Number
Resize Mode
Define the dimensions of the video component.
Select from list [Stretch, Float in Place]
Initial value of switch
Tint Color
Color
Color of background when switch is false
On Tint Color
Color
Color of background when switch is true
Thumb Tint Color
Color
Color of the switch's slider
Disabled
True/False
Toggle whether value switch can be changed by user
X
coordinate value
Position of the upper left corner of the switch on the X-axis, where the left side of the screen is X=0.
Y
coordinate value
To access the blocks specific to the switch component:
On the Design tab, add a Switch component to a screen.
Navigate to the Blocks tab.
In the component tree on the left, click the name of the switch component.
A drawer of switch-specific blocks opens.
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.).
Value
True/False
PDF file or URL ending in .pdf
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.
X
The location of the top left corner of the PDF reader on the X-axis, where the left-hand side is X=0.
Number
Y
The location of the top left corner of the PDF reader on the Y-axis, where the top side is Y=0.
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.).
File
PDF to be displayed in the PDF reader
Animation
The name of the JSON animation file you want to display
Text
Loop
Toggle whether or not the animation loops
True/False
X
Location of top left corner of animation on X-axis, where the left hand side is X=0
Number
Y
Location of top left corner of animation on Y-axis, where the top side is Y=0
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.).
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.
This event fires every time the checkbox component is clicked.
Outputs
newValue - returns the new value of the checkbox (true or false) each time the checkbox 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 its most traditional use case, the rating component is used to display a rating in your app and allows users to leave their own rating. However, there are a lot of different icons to choose from so you can customize the "meaning" of your ratings. For example, you could use five hearts in a quiz app to represent the five lives or five guesses that each player gets.
This event block fires when a user inputs a rating in the rating component.
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 direction property is unique to the rating icon. Using these blocks, you can define how the rating component is filled. You can choose between row (left to right), row-reverse (right to left), column (top to bottom) or column-reverse (bottom to top).
The icon margin property is unique to the rating icon. Use these blocks to get or change the margin size between the icons of the rating component.
Height
Height of checkbox in pixels
Number
Width
Width of checkbox in pixels
Number
Resize Mode
Define dimensions of the checkbox component.
Select from list [Stretch, Float in Place]
Value
True - checked False - unchecked
True/False
Disabled
Toggle whether the value of the checkbox can be changed by user.
True/False
Color
Background color of the checkbox when it is checked.
Color
Unchecked Color
Color of the checkbox's perimeter when it is unchecked.
Color
X
Location of top left corner of checkbox on X-axis, where the left hand side is X=0
Number
Y
Location of top left corner of checkbox on Y-axis, where the top side is Y=0
Number
Height
Height of the rating component in pixels.
Number
Width
Width of the rating component in pixels.
Number
Resize Mode
Define the dimensions of the rating component.
Select from list [Stretch, Float in Place]
Value
Initial value of the rating.
Number
Count
Maximum value of the rating.
Number between 5 and 10
Image
Shape of the rating's icons.
Select from menu:
Pick One - menu of pre-set icons you can choose from. Preview these icons here.
Custom Image - upload images as an asset or provide an image URL (.jpg or .png files) for filled and empty icons.
Read Only
Toggle whether or not the user can edit the rating.
True/False
Rating Color
Color of filled-in icons reflecting the current rating.
Color
Background Color
Color of unfilled icons.
Color
X
The location of the top left corner of the rating component on the X-axis, where the left-hand side is X=0
Number
Y
The location of the top left corner of the rating component on the Y-axis, where the top side is Y=0.
Number
Position of the upper left corner of the switch on the Y-axis, where the top of the screen is Y=0.
Height
number in pixels
The switch's height is defined by a custom number of pixels.
Width
number in pixels
The switch's width is defined by a custom number of pixels.
Resize Mode
Stretch
Stretches the switch to fit the dimensions of the device's screen.
Resize Mode
Float in Place
Renders the switch in the same aspect ratio as the design, regardless of the device size.
Number
Height
Height of PDF reader in pixels.
Number
Width
Width of PDF reader in pixels.
Number
Resize Mode
Define dimensions of the PDF reader component.
Select from list [Stretch, Float in Place]
Number
Height
Height of animation in pixels
Number
Width
Width of animation in pixels
Number
Resize Mode
Define dimensions of the animation component.
Select from list [Stretch, Float in Place]
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.
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.).
Display websites in your app
The web viewer component displays websites in your app. You can also use it to run HTML and JavaScript commands. For example, you can run a simple HTML URL to decode an image into base 64 text.
Some websites may not appear when previewing your app on the web. We recommend previewing with the on a device.
URL
The "when web viewer receives message" block fires when the web viewer receives a message from the web page it's displaying. It returns the "message" output, text that contains the message that was received.
The "call web viewer's reload" block reloads the web viewer.
The "call web viewer's back" block navigates the user back to the previous page visited.
The "call web viewer's forward" block navigates the user to the next page in the user's browser history.
If you own the website displayed in the web viewer, you can send and receive messages between your website and the web viewer using Javascript. The "call web viewer's post message" block posts a message to the website.
You can see examples of sending and receiving messages and get further setup instructions here: .
The "call web viewer's value from post message" block returns any message received after using the "call web viewer's post message" block.
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.).
Create powerful, no-code, data-driven apps connected directly to Google Sheets, Airtable, or stored locally.
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.
The loading Icon is an animated graphical component used to notify users of your app that an action is taking place in the background, such as retrieving or uploading data. They serve as visual cues to users, signaling that the app is working behind the scenes, reducing uncertainty and providing reassurance while enhancing the overall user experience by managing expectations during brief wait times.
Height
Height of date input in pixels
Number
Width
Width of date input in pixels
Number
Resize Mode
Define dimensions of the date input component.
Select from list [Stretch, Float in Place]
Border Color
Color of border (only visible if border width > 0)
Color
Border Width
Width of border around date input in pixels
Number
Border Radius
Radius of corners of border on date input in degrees
Number
Shadow Color
Color of date input's shadow
Color
Shadow Opacity
Opacity of date input's shadow
Number between 0 and 100
Shadow Radius
Radius of corners of date input's shadow in pixels
Number
Shadow Offset
How far date input's shadow should be offset, in height and width, in pixels
Number
Style
Format to use when displaying selected date
Select from menu [YYYY-MM-DD, MM/DD/YYYY, M/D/YY, Month Day, Year, Mth. Day, Year]
Font Size
Size of font when displaying date
Number
Font Style
Make the date's text italicized
True/False
Font Weight
Make the date's text bold
True/False
Color
Color of font when displaying date
Color
X
Location of top left corner of date input on X-axis, where the left hand side is X=0
Number
Y
Location of top left corner of date input on Y-axis, where the top side is Y=0
Visible
Toggle whether your end users can see the date input
True/False
Border Style
Set whether border style is solid, dotted or dashed (only visible if border width > 0)
Number
Select from list [solid, dotted, dashed]
Height
Height of the web viewer in pixels.
Number
Width
Width of the web viewer in pixels.
Number
Resize Mode
Define dimensions of the web viewer component.
Select from list [Stretch, Float in Place]
Border Color
Color of border (only visible if border width > 0)
Color
Border Width
Width of border around the web viewer in pixels.
Number
Border Radius
Radius of corners of border on the web viewer in degrees.
Number
Shadow Color
Color of the web viewer's shadow.
Color
Shadow Opacity
Opacity of the web viewer's shadow.
Number between 0 and 100
Shadow Radius
Radius of corners of the web viewer's shadow in pixels.
Number
Shadow Offset
How far the web viewer's shadow should be offset, in height and width, in pixels.
Number
Set the initial URL to be displayed in the web viewer. The URL should begin with HTTPS://. You can also type in the name of an HTML file that has been uploaded to the project to display in the web viewer.
URL
Geolocation Enabled (Android only)
Select if you want to enable geolocation functionality for Android apps.
True/False
X
The location of the top left corner of the web viewer is on the X-axis, where the left-hand side is X=0.
Number
Y
The location of the top left corner of the web viewer on the Y-axis, where the top side is Y=0.
Visible
Toggle whether your end users can see the web viewer.
True/False
Border Style
Set whether border style is solid, dotted or dashed (only visible if border width > 0)
You may also find connecting to a Web API helpful for sending and receiving information between your app and a website.
Number
Select from list [solid, dotted, dashed]
The your data is pulled from.
Table
References chosen table in data source
The table within your data source your data is pulled from.
Filter View
References filter view in table
The filter view within your table your data is pulled from.
Grid Appearance
Select from list
How your data will be displayed in your app.
Populate Data
Select from lists
Map your data source's columns to the fields they will be displayed in.
Horizontal Scroll
True/False
True - data viewer scrolls horizontally
False - data viewer scrolls vertically
Empty text
Text
Text that will be displayed if there is no data in your data source to fill a data viewer field.
X
coordinate value
Location of the top left corner of the data viewer grid on the X-axis, where the left-hand side is X=0.
Y
coordinate value
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 data source blocks.
Refresh the data viewer grid to sync with the connected data source.
Set and get properties 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.
Data Source
References chosen data source
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.
Color
X
Location of the top left corner of the loading icon on the X-axis, where the left-hand side is X=0.
Number
Y
Location of the top left corner of the loading icon on the Y-axis, where the top side is Y=0.
Visible
Toggle whether your end users can see the loading icon.
True/False
Border Style
Set whether border style is solid, dotted or dashed (only visible if border width > 0)
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.).
The size property is unique to the loading icon. Using these blocks, you can set the size of the loading icon. You can choose between extra small, small, middle, large, or extra large.
The loading icon should be displayed when the app is performing an activity in the background and hidden when it is not.
One way to show and hide the icon is to use the visible property of the component.
In the following example, the loading icon becomes visible when the screen opens but disappears once data is retrieved from Airtable.
The loading icon displays on the app screen when the visibility property is true. The loading icon does not show on the app screen if the visibility property is false.
If you want to show different animation styles in your app as content loads, you can use the animation component. You can learn more here: Animation Component.
Color
The color of the loading icon.
The time input component allows users to easily select times. Users can pick times for appointments, deadlines, or any time-related tasks within an app. These components are essential because they simplify entering times, reducing errors and ensuring accuracy. The time input component utilizes the native Android and iOS time pickers.
Style
You can trigger actions to happen when an event occurs.
This event fires when the user has selected a time using the time picker.
Opens the time picker to prompt the user to enter a time.
Returns the hour from the time picker in 24-hour format. For example, if the user selects 2:30 PM, this block returns 14.
Returns the minutes from the time picker in. For example, if the user selects 2:30 PM, this block returns 30.
Returns the selected time from the time picker in the same format as the time input's style property. For example, if the user selects 2:30 PM, and the style is set to Hour:Minute AM/PM, this block returns 2:30 PM. If the user selects 2:30 PM, and the style is set to Hour:Minute 24h, this block returns 14:30.
The time the user selects automatically displays in the time input label, but if you want to save the time to be used later, you can use the block combination below to save the time as a variable.
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.).
Create powerful, no-code, data-driven apps connected directly to Google Sheets, Airtable, or stored locally.
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.
The Simple List component allows you to add, view and click on items in a list.
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.
You can customize the Simple List with the following properties:
A group is a container component in which other user interface components are placed. Groups are useful when you want to combine multiple components into one. This allows for their positions and visibility to be easily altered.
To add components to a group:
Drag and drop a group component onto a screen.
Drag and drop other UI components inside the group on the screen.
Height
Height of time input in pixels
Number
Width
Width of time input in pixels
Number
Resize Mode
Define dimensions of the time input component.
Select from list [Stretch, Float in Place]
Border Color
Color of border (only visible if border width > 0)
Color
Border Width
Width of border around time input in pixels
Number
Border Radius
Radius of corners of border on time input in degrees
Number
Shadow Color
Color of time input's shadow
Color
Shadow Opacity
Opacity of Time Input's shadow
Number between 0 and 100
Shadow Radius
Radius of corners of time input's shadow in pixels
Number
Shadow Offset
How far time input's shadow should be offset, in height and width, in pixels
Number
Format to use when displaying selected time
Select from menu [Hour:Minute AM/PM, Hour:Minute 24h]
Font Size
Size of font when displaying time
Number
Font Style
Select whether font is italic
True/False
Font Weight
Select whether font is bold
True/False
Color
Color of font when displaying time
Color
X
Location of top left corner of time input on X-axis, where the left hand side is X=0
Number
Y
Location of top left corner of time input on Y-axis, where the top side is Y=0
Visible
Toggle whether your end users can see the time input component
True/False
Border Style
Set whether border style is solid, dotted or dashed (only visible if border width > 0)
Get Time
Time in whichever format you specify
Get Hours
Hour of the Day from 1-24
Get Minutes
Number
Select from list [solid, dotted, dashed]
Minutes from 1-60
The your data is pulled from.
Table
References chosen table in data source
The table within your data source your data is pulled from.
Filter View
References filter view in table
The filter view within your table your data is pulled from.
Row Appearance
Select from list
How your data will be displayed in your app.
Populate Data
Select from lists
Map your data source's columns to the fields they will be displayed in.
Left Swipe
True/False
Toggle whether your end user can swipe a list item to the left to view an additional button. Reveals left swipe button settings if set to true.
Left Swipe Button Text
Text
Text of left swipe button when a user swipes list item to the left.
Left Swipe Button Text Color
Color
Text color of left swipe button when a user swipes list item to the left.
Left Swipe Button Background Color
Color
Background color of left swipe button when a user swipes list item to the left.
Right Swipe
True/False
Toggle whether your end user can swipe a list item to the right to view an additional button. Reveals right swipe button settings if set to true.
Right Swipe Button Text
Text
Text of right swipe button when a user swipes list item to the right.
Right Swipe Button Text Color
Color
Text color of right swipe button when a user swipes list item to the right.
Right Swipe Button Background Color
Color
Background color of right swipe button when a user swipes list item to the right.
Empty text
Text
Text that will be displayed if there is no data in your data source to fill a data viewer field.
X
coordinate value
Location of the top left corner of the data viewer list on the X-axis, where the left-hand side is X=0.
Y
coordinate value
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 data source blocks.
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 data sources blocks.
Refresh the data viewer list to sync with the connected data source.
Set and get properties 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.
Data Source
References chosen data source
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.
Text Items
Set text items of Simple List
List of text items
Color
Set font color of Text Items
Color
Background Color (text items)
Set background color for the items in the Simple List
Color
Writing Direction (iOS and web app only)
Set writing direction of text items
Select from list [auto, ltr, rtl]
Background Color (container)
Set the background color of the Simple List container.
X
Set the location of your Simple List on the X-axis in pixels
Number
Y
Set the location of your Simple List on the Y-axis in pixels
Visible
Toggle whether your end users can see the Simple List
True/False
Border Style
Set style of Simple List's border
To access the blocks specific to the simple list component:
On the Design tab, add a Simple List component to a screen.
Navigate to the Blocks tab.
In the component tree on the left, click the name of the simple list component.
A drawer of simple list-specific blocks opens.
This event fires and performs an action when the user clicks on an item within a simple list component.
Outputs
Item
Text of selected item
String
Index
Position of item in simple list (starting with 1)
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 data source. 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.
On Android devices, it is a known limitation that it is not possible to have three levels of nested scrollable components. If your list doesn't scroll you have to set at most one component as scrollable or only the screen scrollable outside of the simple list component.
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.
The added components are nested under the group in the component tree.
When a group component is moved, any UI components within it are moved with it as a unit.
Position
Relative to Screen
The group moves as the user scrolls.
Position
Relative to Device
X
coordinate value
Position of the upper left corner of the button on the X-axis, where the left side of the screen is X=0.
Y
coordinate value
Visible
true/false
Toggle whether users can see the group.
Background Fill
color
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: The image is resized to fit entirely within the container while maintaining its aspect ratio. This mode ensures that the entire image is visible within the container, and it may result in empty space around the image if the container's aspect ratio differs from the image's aspect ratio.
Repeat: The image is tiled or repeated to fill the entire container, both horizontally and vertically. This mode is often used for creating patterns or backgrounds that seamlessly repeat across the container.
Stretch: The image is resized to fully cover the container without maintaining its original aspect ratio. This can distort the image and may result in an unnatural appearance, so it's generally not recommended for most scenarios.
To access the blocks specific to the group component:
On the Design tab, add a Group component to a screen.
Navigate to the Blocks tab.
In the component tree on the left, click the name of the group component.
A drawer of group-specific blocks opens.
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.).
Location of the top left corner of the data viewer grid on the Y-axis, where the top side is Y=0.
Height
number in pixels
Height of the data viewer grid in pixels.
Width
number in pixels
Width of the data viewer grid in pixels.
Resize Mode
Stretch
Stretches the data viewer grid to fit the dimensions of the device's screen.
Resize Mode
Float in Place
Renders the data viewer grid in the same aspect ratio as the design, regardless of the device size.
Number
Height
Height of loading icon in pixels.
Number
Width
Width of loading icon in pixels.
Number
Resize Mode
Define dimensions of the loading icon component.
Select from list [Stretch, Float in Place]
Select from list [solid, dotted, dashed]
Border Color
Color of border (only visible if border width > 0)
Color
Border Width
Width of border around loading icon in pixels.
Number
Border Radius
The radius of corners of the border on the loading icon in degrees.
Number
Shadow Color
Color of loading icon's shadow.
Color
Shadow Opacity
Opacity of loading icon's shadow
Number between 0 and 100
Shadow Radius
Radius of corners of loading icon's shadow in pixels.
Number
Shadow Offset
How far loading icon's shadow should be offset, in height and width, in pixels.
Number
The image component allows you to display pictures in your app and can be made clickable using blocks.
The icon component is used to display an icon and can be made clickable using blocks.
You can customize your icon component using the following properties:
The group stays in place as the user scrolls (suitable for creating a floating action button).
Touch Opacity
Number between 0-100
Set the group's opacity when a user clicks on the group.
Position of the upper left corner of the button on the Y-axis, where the top of the screen is Y=0.
Height
number in pixels
The button's height is defined by a custom number of pixels.
Width
number in pixels
The button's width is defined by a custom number of pixels.
Resize Mode
Stretch
Stretches the group to fit the dimensions of the device's screen.
Resize Mode
Float in Place
Renders the group in the same aspect ratio as the design, regardless of the device size.
Color of group's background.
Background Image
PNG, JPG, GIF, SVG, etc. Can also use a URL that ends in a file extension.
The image displayed in the group's background.
Background Image Resize Mode
Select from list [cover, contain, stretch, repeat, center]. See the definitions of each setting below.
Define how the group's background image is displayed if the file and the group component have different dimensions/aspect ratios.
Border Style
select from list [solid, dotted, dashed]
Style of text input's border.
Border Color
color
Color of text input's border.
Border Width
number in pixels
The width of the group's border is defined by a custom number of pixels.
Border Radius
number in pixels
The radius of the group's border’s corners is defined by a custom number of pixels.
Shadow Color
color
The group's shadow is the color selected.
Shadow Opacity
number between 0 and 100
The opacity of the group's shadow.
Shadow Radius
number in pixels
The radius of the group's shadow’s corners is defined by a custom number of pixels.
Shadow Offset
number in pixels
How far the group's shadow should be offset, in height and width, is defined by a custom number of pixels.
Icon name
The icon displayed in the icon component.
Stroke Color
Color
Color of outline
Fill Color
Color
Color inside the icon
Stroke Width
Number
Width of outline
X
coordinate value
Position of the upper left corner of the icon on the X-axis, where the left side of the screen is X=0.
Y
coordinate value
Visible
visible
Users can see the icon.
Visible
invisible
To access the blocks specific to the icon component:
On the Design tab, add an Icon component to a screen.
Navigate to the Blocks tab.
In the component tree on the left, click the name of the icon component.
A drawer of icon-specific blocks opens.
This event will fire when the user clicks on the icon.
Set the icon component's icon type.
Icon type
Location of the top left corner of the data viewer list on the Y-axis, where the top side is Y=0.
Height
number in pixels
Height of the data viewer list in pixels.
Width
number in pixels
Width of the data viewer list in pixels.
Resize Mode
Stretch
Stretches the data viewer list to fit the dimensions of the device's screen.
Resize Mode
Float in Place
Renders the data viewer list in the same aspect ratio as the design, regardless of the device size.
Font Size
Set font size of Text Items
Number
Show Arrow
Toggle whether arrow is shown beside text items
True/False
Color
Number
Height
Set the Height of your Simple List in pixels
Number
Width
Set the Width of your Simple List in pixels
Number
Resize Mode
Define dimensions of the Simple List component/container
Select from list [Stretch, Float in Place]
Select from list [solid, dotted, dashed]
Border Color
Set color of Simple List's border
Color
Border Width
Set width of Simple List's border in pixels
Number
Border Radius
Set radius of corners for Simple List's border in pixels
Number
Shadow Color
Color of Simple List's shadow
Color
Shadow Opacity
Opacity of Simple List's shadow
Number between 0 and 100
Shadow Radius
Radius of corners of Simple List's shadow in pixels
Number
Shadow Offset
How far Simple List's shadow should be offset, in Height and Width, in pixels
Number
Number
The image component allows you to display pictures in your app and can be made clickable using blocks.
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.
You can customize your image using the following properties:
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:
On the Design tab, add an Image component to a screen.
Navigate to the Blocks tab.
In the component tree on the left, click the name of the image component.
Repeat: The image is tiled or repeated to fill the entire container, both horizontally and vertically. This mode is often used for creating patterns or backgrounds that seamlessly repeat across the container.
Stretch: The image is resized to fully cover the container without maintaining its original aspect ratio. This can distort the image and may result in an unnatural appearance, so it's generally not recommended for most scenarios.
Height
number in pixels
The image's height is defined by a custom number of pixels.
Width
number in pixels
The image's width is defined by a custom number of pixels.
Resize Mode
Stretch
Stretches the image to fit the dimensions of the device's screen.
Resize Mode
Float in Place
Renders the image in the same aspect ratio as the design, regardless of the device size.
Border: Color
color
The image's border is the color selected.
Border: Width
number in pixels
The width of the image's border is defined by a custom number of pixels.
Border: Radius
number in pixels
The radius of the image border’s corners is defined by a custom number of pixels.
Shadow: Color
color
The image's shadow is the color selected.
Shadow: Opacity
number between 0 and 100
The opacity of the image's shadow.
Shadow: Radius
number in pixels
The radius of the image shadow’s corners is defined by a custom number of pixels.
Shadow: Offset
number in pixels
How far the image's shadow should be offset, in height and width, is defined by a custom number of pixels.
A drawer of image-specific blocks opens.
Set the image component's .
Get the image component's .
Set the image component's filter.
Get the image component's filter.
Set the image component's height.
Get the image component's height.
Returns the height of the image component in pixels after it has been rendered on-screen.
Set the image component's width.
Get the image component's width.
Returns the width of the image component in pixels after it has been rendered on-screen.
Set whether the image component is visible on the screen.
Get whether the image component is visible on the screen.
Set the position image the upper left corner of the image on the X-axis, where the left side of the screen is X=0.
Get the position of the upper left corner of the image on the X-axis, where the left side of the screen is X=0.
Set the position of the upper left corner of the image on the Y-axis, where the top of the screen is Y=0.
Get the position of the upper left corner of the image on the Y-axis, where the top of the screen is Y=0.
Picture
PNG, JPG, GIF, etc. Can also use a URL that ends in a file extension.
The image file displayed in the image component.
Picture Resize Mode
Select from: cover, contain, stretch, repeat, and center.
Define how the image is displayed if the file and the image component have different dimensions/aspect ratios. See the definitions of each setting below.
Filter
Select from: None, Blur, Brightness, Contrast, Grayscale, Invert, Sepia, and Opasit
Define the filter that will be applied in the image component.
X
coordinate value
Position of the upper left corner of the image on the X-axis, where the left side of the screen is X=0.
Y
coordinate value
Visible
visible
Users can see the image.
Visible
invisible
This event will fire when the user clicks on the image.
Set the image component's Picture.
Using SVG files might result in images not being displayed correctly.
Position of the upper left corner of the image on the Y-axis, where the top of the screen is Y=0.
Users cannot see the image.
Get the image component's Picture.
Position of the upper left corner of the icon on the Y-axis, where the top of the screen is Y=0.
Height
number in pixels
The icon's height is defined by a custom number of pixels.
Width
number in pixels
The icon's width is defined by a custom number of pixels.
Resize Mode
Stretch
Stretches the icon to fit the dimensions of the device's screen.
Resize Mode
Float in Place
Users cannot see the icon.
Border: Color
color
The icon's border is the color selected.
Border: Width
number in pixels
The width of the icon's border is defined by a custom number of pixels.
Border: Radius
number in pixels
The radius of the icon border’s corners is defined by a custom number of pixels.
Shadow: Color
color
The icon's shadow is the color selected.
Shadow: Opacity
number between 0 and 100
The opacity of the icon's shadow.
Shadow: Radius
number in pixels
The radius of the icon shadow’s corners is defined by a custom number of pixels.
Shadow: Offset
number in pixels
How far the icon's shadow should be offset, in height and width, is defined by a custom number of pixels.
Get the icon component's icon type.
Set the icon component's stroke color.
Get the icon component's stroke color.
Set the icon component's stroke width.
Get the icon component's stroke width.
Set the icon component's fill color.
Get the icon component's fill color.
Set the icon component's height.
Get the icon component's height.
Returns the height of the icon component in pixels after it has been rendered on-screen.
Set the icon component's width.
Get the icon component's width.
Returns the width of the icon component in pixels after it has been rendered on-screen.
Set whether the icon component is visible on the screen.
Get whether the icon component is visible on the screen.
Set the position icon the upper left corner of the icon on the X-axis, where the left side of the screen is X=0.
Get the position of the upper left corner of the icon on the X-axis, where the left side of the screen is X=0.
Set the position of the upper left corner of the icon on the Y-axis, where the top of the screen is Y=0.
Get the position of the upper left corner of the icon on the Y-axis, where the top of the screen is Y=0.
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.
You can customize your Rich Text component using the following properties:
To access the blocks specific to the Rich Text component:
On the Design tab, add a Rich Text component to a screen.
Navigate to the Blocks tab.
In the component tree on the left, click the name of the Rich Text component.
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.
Height
number in pixels
The Rich Text component's height is defined by a custom number of pixels.
Width
number in pixels
The Rich Text component's width is defined by a custom number of pixels.
Resize Mode
Stretch
Stretches the Rich Text component to fit the dimensions of the device's screen.
Resize Mode
Float in Place
Renders the Rich Text component in the same aspect ratio as the design, regardless of the device size.
Background Color
color
The background color of the Rich Text.
Border: Style
solid
The Rich Text component's border is a solid line.
Border: Style
dotted
The Rich Text component's border is a dotted line.
Border: Style
dashed
The Rich Text component's border is a dashed line.
Border: Color
color
The Rich Text component's border is the color selected.
Border: Width
number in pixels
The width of the Rich Text component's border is defined by a custom number of pixels.
Border: Radius
number in pixels
The radius of the Rich Text component's border’s corners is defined by a custom number of pixels.
Shadow: Color
color
The Rich Text component's shadow is the color selected.
Shadow: Opacity
number between 0 and 100
The opacity of the Rich Text component's shadow.
Shadow: Radius
number in pixels
The radius of the Rich Text component's shadow’s corners is defined by a custom number of pixels.
Shadow: Offset
number in pixels
How far the Rich Text component's shadow should be offset, in height and width, is defined by a custom number of pixels.
Replace any text with the provided string. This will set it to the “default component styling” (no modifiers).
Get the component's text.
Set the background color of the component.
Get the background color.
Set the height of the component.
Get the height of the component.
The Computed Height block gets the on-screen dimensions of the component, after it has been rendered on-screen. The value returned is an integer, representing the size of the Rich Text component in pixels.
Set the width of the component.
Get the width of the component.
The Computed Width block gets the on-screen dimensions of the Rich Text component, after it has been rendered on-screen. The value returned is an integer, representing the size of the Rich Text component in pixels.
Choose whether to display or hide the component.
Get the True or False value for the Visible state.
Set the position of the component on the X-Axis, where the left side of the screen is X=0.
Get the position of the component on the X-Axis.
Set the position of the component on the Y-Axis, where the top of the screen is Y=0.
Get the position of the component on the Y-Axis.
Set the font of the component's text.
Set the font size of the component's text.
Make all the text Bold or Normal.
Set all the text to Italic.
Underline all the text.
Draw a line through all the text.
Highlight all the text in a specific color.
Set the line spacing.
Set all the text to a specific color.
Set the component's Text Align. Text Align can be any of the following values: Auto, Left, Right, Center, or Justify.
Text
Text
Text that appears on the Rich Text Component
Font
Select from menu
Font used to display component's text
Font Size
Number
Size of the text
Font Weight
True/False
Make the text bold
Color
Color
Color of the text that appears on the component
Highlight Color
Color
The color in which to highlight the text
Strikethrough
True/False
Draw a line through the select text
Underline
True/False
Underline the selected text
Italic
True/False
Make the selected text italicized
Text Align
Select from menu
Set alignment of the text relative to the outline
Line Spacing
Number
Maximum amount of lines of text that will display
Visible
True/False
Display or hide the component
X
coordinate value
Position of the upper left corner of the Rich Text component on the X-axis, where the left side of the screen is X=0.
Y
coordinate value
Visible
visible
Users can see the Rich Text.
Visible
invisible
This event will fire when the user clicks on the Rich Text.
Removes all text from the component.
Reset all text formatting (including paragraph modifiers) to the default styling (i.e., the styling that a brand new Rich Text component has before it is modified).
Using Custom Fonts may only be available for Creators on certain Thunkable plans. Please refer to our pricing page for more information: Thunkable pricing.
Position of the upper left corner of the Rich Text component on the Y-axis, where the top of the screen is Y=0.
Users cannot see the Rich Text.
Initial value of the slider
Step
Number
Step between values on the slider
Minimum Value Range
Number
Minimum value the user can select. Must be less than Maximum Value.
Maximum Value Range
Number
Maximum value the user can select. Must be greater than Minimum Value.
Min Track
Color
Color of slider track between minimum value and current value
Max Track
Color
Color of slider track between current value and maximum value
Thumb Color
Color
Color of the slider thumb widget
Disabled
True/False
A disabled component is temporarily inactive and cannot be interacted with by the user.
X
coordinate value
Position of the upper left corner of the slider on the X-axis, where the left side of the screen is X=0.
Y
coordinate value
Visible
visible
Users can see the slider.
Visible
invisible
To access the blocks specific to the slider component:
On the Design tab, add a Slider component to a screen.
Navigate to the Blocks tab.
In the component tree on the left, click the name of the slider component.
A drawer of slider-specific blocks opens.
This event fires as the value of the slider changes. Returns the current value of the slider.
This event fires when the user lifts their finger or thumb off the slider. Returns the current value of the slider.
Value
Number
The text input allows the person using your app to type in anything that they want such as words, passwords or numbers.
The text input component is a field where app users can enter text, such as a name or email address.
In this tutorial, we’ll implement text input validation to disable a button until text input conditions are met.
You need to make your screen scrollable to prevent the text input from moving up when the keyboard appears.
To access the blocks specific to the text input component:
On the Design tab, add a Text Input component to a screen.
Navigate to the Blocks tab.
In the component tree on the left, click the name of the text input component.
This event fires when the user clicks on the text input component.
This event fires when the component loses focus, i.e. the user clicks on another component.
This event fires when the enter or submit button is pressed on the device keyboard.
This event fires whenever a character is added to or removed from the text input (i.e. whenever there is a change to the content of the text input).
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.).