You can use blocks to let your user create, read, update and delete information in your data source by interacting with the Data Viewer, using Data Sources blocks:
Thunkable gives you a variety of ways to create your very own cross platform apps. To learn how to set up a Thunkable account, please read our article on signing in.
Click on one of the links below to download the Thunkable mobile app.
If you don't have an iOS or Android device, you can on your computer that will display your apps.
We have custom components and third-party integrations that you can drop directly into your projects. These components will allow you to build more advanced features.
The language of blocks is a visible programming language. By dragging and dropping blocks together, you can program your app.
Welcome to Thunkable Docs
One Product, Two Interfaces
The first thing you need to know as we welcome you to our Thunkable Docs is that we have two libraries of documents. One for each of the interfaces we currently offer:
Drag and Drop
Drag and Drop is our new platform interface that took our Creator's favorite features and functions from the previous interface (Snap to Place) and improved on them.
You'll know if you're looking for support with the Drag and Drop interface if your screen looks like this:
The Thunkable Docs to support users of the Drag and Drop interface are available here: Drag and Drop docs
Snap to Place
Snap to Place was our first foray into cross-platform app development. It is our old platform interface.
You'll know if you're looking for support with the Snap to Place interface if your screen looks like this:
You're in the right place if you're looking for the Thunkable Docs supporting our Snap to Place interface.
In addition to our Thunkable Docs, we are also proud to offer you the following resources:
Not sure where to get started with the Drag and Drop interface? Check out the Thunkable Academy!
Want to connect with other Thunkable Creators? Ask a question and join the conversation in the Community!
Enjoy instructional videos? Check out our library of tutorials available on YouTube.
You can get started building with Thunkable today for free. As you progress as a developer with Thunkable, we offer different membership tiers that allow you to build more and do more. This includes:
🖥️ Publishing web apps
💰 Showing AdMob ads in your app
🙈 Making private apps
⚡ Expedited publishing
📢 Adding push notifications to your app
📱 Creating a personalized splash screen
and more!
Thunkable offers plans to suit individual and business needs.
User Interface
Components to interact with
The User Interface (UI) category is a collection of all the components you need to design the look and feel of your app.
UI Components are visible components that users can move, click on, and type in. Each UI component is described in greater detail on its own page.
PDF Reader
Allow your users to view your favorite PDFs -- legal contracts, art posters or maybe even a PhD dissertation -- all from the convenience of your app
Simply upload your PDFs into the File property and voila!
Once you upload the PDF, you will be able to view it in your app and pinch to zoom in.
Drawer Navigator
Navigate to different screens using a clickable drawer that slides out from the side.
To add a navigator to your app, you will need to drag the navigator component into your component tree, and then drag a screen on top of the navigator component.
To name your drawers, click on each screen and navigate to the Drawer label on the bottom right corner of the properties section.
You have many options for styling your Drawer Navigator, such as changing the background color or tint color. Here are the different options for customization:
Image
The image category contains components to upload pictures to your users device and to the cloud. It also has components for displaying pictures and animations.
Camera
With the camera component, you can open up your phone’s camera to take a picture.
🗄️ Data
Information is the lifeblood of any organisation so Thunkable gives you several options for collecting, storing and, retrieving data in your app
You can use the Local DB and the Local Storage components to store data on your users device.
If you want to store data in the cloud, whether you're working with plain text or with media files, Thunkable has a wide variety of components to suit your needs.
The WebAPI component allows you to quickly and easily connect to any third-party API. Click on the link below to see some examples of how to get started.
Local Storage
This storage option is useful for saving simple info on the device, especially helpful for remembering user's setting from a previous session.
To save data locally to your phone, simply name a key to store a value under. If you have a previous value in your key, saving it will override that value
Location
Location Sensor
The Location Sensor returns a user's current location in latitude and longitude as well as a location object which includes additional properties like accuracy, altitude, speed and heading (or direction) which you have to retrieve with the object blocks above
Public Gallery of Projects
A new app marketplace.
The Thunkable Gallery is an app building marketplace where users can find, share and remix existing projects. By default, all public projects built on Thunkable are sent to the Public Gallery.
When browsing the Gallery, here are three things that you can do with public projects:
View a Project
Click to open any project on the Public Gallery to view an app's design or programming blocks.
2. Preview a Project
After downloading the , you can use the app to preview any public project directly on your mobile device.
Tutorials
We have lots of ways for you to learn how to use Thunkable.
To learn how to use Thunkable, try our in-platform tutorials. Click on the expand arrow on the left to open the tutorials panel. Click on a tutorial name to launch the video in a modal you can resize and move anywhere on the screen.
Follow step-by-step app-building instructions with our .
The Thunkable Community is where Thunkers share their ideas with the world. You can find a wide selection of staff and community-written guides and tutorials in the section.
Signing In
You can create a Thunkable account with a Google account or with any other email address.
If you've never used Thunkable before then you should visit our page. The sign up page gives you two options. You can either sign up with a Google account or an Apple account and sign in immediately, or you can enter your email address and to be sent a magic sign-in link. We recommend using a Google or Apple account, as it will make testing your app a little easier.
The email will look something like the image below. Pressing the Click to Sign In button will open your new Thunkable account and keep you signed in for 30 days, unless you choose to sign out sooner.
Returning users can go directly to our page to sign back into their Thunkable account. You can Sign in with Google, Sign in with Apple or Sign in with email.
Social
🤖Gaming Blocks🎮
Learn how to program the canvas and sprite components.
When you add a canvas to your project, you will get 7 additional categories of blocks. Each of these categories will allow you to programatically control what happens with your sprites and sprites types, on the canvas and the stage.
Add & Remove
Adds an instance of the sprite type at the x and y location
Remove the selected sprite from the canvas
Get a list of all of the sprites of the selected sprite type
Contact our Support Team
Creators on our Pro, Business, and Team plans can click the chat icon in the upper right of a Thunkable Project page to connect with our team.
You can toggle between the Drag and Drop and Snap to Place docs in the upper left corner.
Additional Support Options
Pricing and Membership
On August 10th, we transitioned docs.thunkable.com to host our documentation for Thunkable's Drag and Drop platform. Previously, this URL was home to our Snap to Place documentation, which is now at an alternate URL.
There is a limit of 50 MB per app so be careful or size down your larger PDFs if it may exceed this limit
Properties
Computed Height and Width
File
Visible
Bring your favorite PDFs with you in an app!
Drawer Width: Width of the Drawer in pixels
Drawer Position: Position Drawer swipes out from: left or right
DrawerOptions
Active Tint Color: Tint color for selected drawer.
Active Background Color: Background color for selected drawer.
Inactive Tint Color: Text color for unselected drawers.
Inactive Background Color: Background color for unselected drawer.
Adding Navigators
Name Your Drawers
Drawer Navigator Properties
DidUserCancel
true/false
returns whether the user cancelled taking the photo
Error
text
if there was an error, returns the error
Output Name
Data Type
Function
Photo
image
Blocks
Take Photo
if a photo was taken, returns the photo
Event / Property
Description
Get Current Location
Returns a user's location in latitude and longitude degrees; also includes additional information in a location object including i) estimated location accuracy in meters, ii) altitude in meters, iii) speed in meters/second and iv) heading in degrees
Get User's Current Location
Functions
Get Current Location
Properties
Enable High Accuracy
Maximum Age
3. Remix a Project
All projects on the Public Gallery can be remixed. This means that you can customize any app project that you see.
This button will sign you in automatically with your Google account. For most users this will be a Gmail address but if your school or work email is powered by Google then that will work too.
This button will sign you in automatically with your Apple account.
If you click Sign in with email you will be invited to type you email address in a text input.
When you click Email me the link we will send you a link that will sign you back into your account.
To learn more about using Thunkable, take a look at some of our tutorials.
Once you're ready to try out your app, we have a helpful guide for live testing.
You should now use stored variables instead of adding a Local Storage component. This will work the same way in the background but will save you a lot of blocks. To work with tabular data in your app please use the local DB component in your app.
Save Data
Get Data
Create Sprite Type
Remove Sprite
Get all Sprites in Sprite Type
Loading Icon
Video Tutorial
Loading Icon Overview
For activities that take more than a few seconds, loading icons can be helpful to tell your app users that an activity is happening in the background, such as retrieving or uploading data.
The large loading icon is on the top; the small is on the bottom on a Pixel 3
Style the Loading Icon
Property
Description
Color
The color of the loading icon
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 shows up when the app opens but disappears after data is retrieved from Airtable.
When the visibility is set to true, the loading icon will be seen on the app screen. If set to false, the loading icon will not be seen on the app screen.
You can use the component to display a JSON animation from Lottie in your project. Lottie offer a wide range of animations that can be displayed as content in your project loads.
Layout
How to set up and organize your app.
From Idea to App
To go from an idea to app, we strongly recommend that you sketch out your vision using the below app templates. It's important to first create a roadmap for how people will interact with your app.
Navigator Tutorial
Arrange Screens with Navigators
Most apps navigate through screens using navigators. Click here to watch a tutorial on how to use each navigator.
Here are three examples of navigators that you can use on Thunkable.
and Navigators - These navigators allow you to change screens by clicking on icons at the top or bottom of the screen.
2. - A navigator that pulls out a side menu of different options to choose from.
3. - Navigators that allow you to stack screens on top of other screens.
Bottom Tab Navigator
Navigate to different screens using a bottom tab navigator.
Bottom tabs are a popular way to navigate an app today
Adding Navigators
To add a navigator to your app, you will need to drag the navigator component into your component tree, and then drag a screen on top of the navigator component.
Tab Navigator Properties
You have many options for styling your Bottom Tab Navigator, such as changing the background color or tint color. Here are the different options for customization:
Simple Properties
Active Tint Color: Select a font color for the tab currently in use.
Active Background Color: Select a color for the tab currently in use.
Inactive Tint Color: Select a color for the text of the tabs that are not in use.
Inactive Background Color: Select a color for the tab not currently in use.
ShowLabel: Toggle whether to show tab labels in the Tab Navigator.
ShowIcon: Toggle whether to show icons in the Tab Navigator.
When designing a tab, you can use words or images to guide users to different screens.
Step 1. Add screens to a Navigator by dragging and dropping them on top of a Navigator.
Step 2. Select the Bottom Tab Navigator. Decide if you would like to display icons or labels by clicking on these switches:
Step 3. Depending on if you are adding icons or labels, select the screen you would like to style and upload an image or add content:
Additional descriptions are below:
Tab Bar Label -- The name of your tab label
Active Tab Icon -- Icon that appears when tab is selected; You can upload an image for this icon.Inactive Tab Icon -- Icon that appears when tab is not selected; You can upload an image for this icon.
To ensure that your bottom tab navigator is visible, the TabBarVisible switch must be set to true. If the TabBar is visible switch is set to false, the bottom tab navigator will not be visible in your app.
Stack Navigator
Navigators are the only component that you cannot drag and drop into your phone at the moment. You'll have to drag it left to the tree hierarchy. Make sure that screens are fully contained within your navigator.
Name Your Screens
The Stack navigator creates a header bar across all screens. You can add a title to this bar by navigating to the Screen properties
Property
Description
Header Title
To enable a Stack transition, you will have to add a Screen navigation block like the one below. You can find the Screen navigation block in the pre-built Control category:
Screens can Stack from left to right or from top to bottom. You can set the transition style with the Stack property below:
It is possible to hide the Header bar and maintain the Stacking transition by using the Stack property below. Hiding the Header bar will also hide the back button that makes it easier to transition to your original screen
Photo Library
Allows the user to select a photo to upload from their device to the app
Blocks
Select Photo
Opens the photo library and allows the user to select and upload a photo.
Outputs
Name
Data Type
Data
Photo
Barcode Scanner
Enable your apps to read barcodes and QR codes
Barcode Scanner Overview
Barcodes and QR codes can be useful features in many types of apps from social apps like WeChat and Venmo to connect friends together or location-based games like scavenger hunts. The Barcode Scanner component uses the camera to read any barcode or QR code.
Blocks
The Barcode Scanner is among the easiest components to set-up and use. After adding the component to your app, you can connect it with a button and a label like the blocks below.
Scan
Outputs
Name
In most cases you'll use the default back camera in your mobile device but you also have the option to specify the front camera in certain cases.
Media DB by Cloudinary
Media DB Overview
Cloudinary Media DB is a service that allows you to store media files in the cloud. Thunkable's Media DB component allows you to send media directly from your Thunkable app to a linked Cloudinary account.
If you use Thunkable's default Cloudinary DB, your files will be deleted after 90 days. Please connect your own Cloudinary DB to your Thunkable project to keep your media safe.
Getting Started
No set up is required but creating your free Cloudinary account is highly recommended. Thunkable provides its own subscription key for your convenience but we strongly recommend creating your own account to ensure privacy for your uploaded media. We also have a current media size limit of 10MB per app and we may periodically clean out our default Cloudinary account
Create a account
Connect your Cloudinary cloud to Thunkable
To connect your Cloudinary cloud to Thunkable, simply retrieve the following fields from the Cloudinary dashboard: Cloud name, API key, and API secret.
You can add these details to your app in the properties panel of the Media DB component.
You can upload any media file from your phone to your Cloudinary account with the mediaDB component. In this case we do some additional checking with the block to make sure that the user has attached an image and that neither the photo library nor the mediaDB components encounter an error.
Your Thunkable Projects Page
Navigate and filter your projects
Your projects Page
You can find your projects page at x.thunkable.com/projects.
This is the first page you see when you sign in.
Viewing your projects
Thunkable lets you choose between viewing your projects in List View or Grid View.
You can decide whether to view your projects in List View or Grid View in the upper right corner of the page.
Filtering your projects
Search Bar
You can use the search bar to filter your projects by name
Filter public/private projects
are able to create . You can use the Public and Private checkboxes to filter your projects, showing only public projects or only private projects.
When you click on the 3 dots on a project card (Grid View) or list item (List View), you can see some project options.
You can delete your project, duplicate your project, or see your Project detail page.
On the Project Detail page, you can test out your app, similar to when it has been published as a .
You can also view information about the project, such as its name, creator, project size, and how many times it has been remixed or favorited.
If the project is a remix of another project, the name and creator of the original project will be displayed.
Create New Project
There a several different types of project in Thunkable
A project is a place where your designs, files and blocks come together to create Android and iOS apps. There are three different types of project in Thunkable.
When you first sign in to Thunkable you will be prompted to create a project. To learn more about the maximum size your projects can be, please see our article about the for apps.
Public projects are included in the for anyone to preview, download or remix. If you create a public project, please know that it can be viewed by anyone in the Thunkable community.
Private projects are just that, private. They can only be seen by their app creator and do not get included in the Only Thunkable users with a paid plan can create and share private projects.
To make your projects public or private, clicking the vertical ellipsis associated with a project reveals its project menu. You can then select Project Detail Page and switch to change who can view your project.
You can also click into your app settings in your project and toggle the switch to set your project to public or private.
Private projects become Read-Only projects when a Thunker's paid membership expires. Read-Only projects remain private and are not included in the Thunkable Gallery.
You can only preview Read-Only. Once a project has been switched to Public, you cannot switch it back to Read-Only.
🛠️ Components
Features and functions for your app
What's a Component?
Apps contain many different features.
On Thunkable, you get to drag & drop which features - which we call components - go into your app.
Some features you can see. Let's call these features visible components. Examples include buttons, loading icons, and images.
Some features you can't see. Let's call these features invisible components. Examples include sounds, timers, and databases.
Visible Components
To put it simply, visible components are features that you can see on your app screen - like the ones pictured above.
Visible components can be styled by size, text, space, and location.
When adding visible components into your app, please note that they can only exist on one screen at a time. For example, if you want to add a button to three different screens, each screen will require its own button.
Invisible components are features on your app that you can't see.
They often relate to your app's functionality, and are quietly running in the background. When you add an invisible component to your app, that component can work on any screen.
For example, if you add a database component to your app, the database can be accessed from any screen. You do not need to add a database component to each screen.
Invisible components are displayed underneath the mobile device on the Thunkable app builder.
Components are organized into 10 different categories. For a more detailed description of each category and an outline of the components they contain, click on one of the pages below.
To find a component, you can manually scroll through the components section on the Thunkable app builder. You can also expand and collapse categories depending on your needs.
The quickest way to find a component is by searching for it in the search bar. Any matching components will also be displayed as you type.
The component tree can be found at the top left corner of your screen, just below your project name. The component tree contains a list of the visible and invisible components in your app.
You can move components around on the component tree to change the location of a component in your app.
Components that are nested can also be expanded and collapsed by clicking on the ▾ icon.
Sprite Gallery
This is a gallery of Sprites that have been awarded to the winner (as voted by the Community) of our Game Design challenges. This is a part of our Weekend Design Challenge challenge calendar. You can find these Weekend Design Challenges in our Creator Lounge.
Animals
Lion
Poodle
Objects
Computer
Events
Events Blocks: Blocks that program the canvas to respond
Canvas
When Canvas Loads
Program an action after the canvas loads.
When Canvas Touched
Program an action when the user touches the canvas
Sprites
Please note, that for the sprite events, event handlers can be configured to work with an entire type of sprite or just with one specific sprite.
Sprite Clicked
This event triggers when the sprite is clicked.
This event triggers when the two sprites collide.
This event triggers when the sprite collides with the edge.
This event triggers when the user stops dragging the sprite.
File Picker
The File Picker will open your end user's file library and allow them to select a file. The file can then be used in the app.
You can allow your end user to upload any kind of file, or limit their selection by file type, eg. HTML, PDF, etc.
Input
Description
Data Type
Color
There is a predefined set of colors in the blocks palette
As pictured below, the easiest way to set a specific color is using a text block with the syntax rgba(r,g,b,a)
If you want to select specific colors, use the RGB block below
Strangely, you can also create a color by blending two together
Direction
Program a sprite's direction
Turn the sprite in the direction of where the user has tapped on the canvas
Turn a sprite in the direction of another sprite
Set or change the angle of the sprite
Get the angle of the sprite
Monetization
Components that allow you to make money with your apps.
Canvas Label
Display text on your Canvas.
The Canvas Label is a piece of text that can be placed onto your .
To add a Canvas Label to your app, click on the Stage of your Canvas. This will automatically bring you to the Canvas tab. Underneath your component tree, where you would see a component menu in the Design tab, you will see your Sprite Type menu and a User Interface menu. You can find the Canvas Label in the Unser Interface menu.
You can drag and drop the Canvas Label onto your Stage.
Text: The Text being displayed on your Canvas Label
X: The X-co-ordinate of the top-left pixel of the Canvas Label
Y: The Y-co-ordinate of the top-left pixel of the Canvas Label
Font Size: The size of the font of the Canvas Label
Color: The Color of the text of the Canvas Label
Background Color:
Text to Speech
Read some text aloud in your app.
Default Language: Set component to recognize text and speak in this language. Can be changed in blocks.
Read text aloud in the specified language
Stop Speaking. Can be used with a to create a stop button.
Set default language to item from drop-down menu. Can also use block or to set language.
The best apps define an elegant sequence of events that happen without the user even noticing. A great sign in flow for example can happen in seconds but the logic and sequence behind them is a work of art that has been iterated on many times (often using Thunkable's Live Testing app).
This is where Thunkable Blocks come in.
Thunkable Blocks are the building blocks of a great experience for your app users. Every component has its own set of blocks to start or trigger an event and set and change properties.
They can be connected to a commonly used set of blocks that range from opening screens, setting up logic, reformatting data or simplifying code.
Possibly the most common style of navigation in mobile apps is tab-based navigation.
The Top Tab Navigator is positioned at the top of your app, and allows users to switch between different screens by clicking.
Adding Navigators
To add a navigator to your app, you will need to drag the navigator component into your component tree, and then drag a screen on top of the navigator component.
Tab Navigator Properties
You have many options for styling your Top Tab Navigator, such as changing the background color or tint color. Here are the different options for customization:
Simple Properties
SwipeEnabled: Allow the user to swipe between screens.
AnimationEnabled: Select whether to animate the transitions between screens.
Lazy: If true, tabs are only loaded once the tab is opened. If false, all tabs are loaded when the Tab Navigator is first opened.
Background Color: Select a color for the top tab navigator.
Tab Indicator Color: An underline will appear underneath the tab you select. You can select a color for the underline.
Active Tint Color: Select a font color for the tab currently in use.
Inactive Tint Color: Select a color for the text of the tabs that are not in use.
ShowIcon: Toggle whether to show icons in the Tab Navigator.
ShowLabel: Toggle whether to show tab labels in the Tab Navigator.
Upper Case Label: Make the text for all the tabs upper case.
PressColor: Color of material ripple as a tab is pressed
PressOpacity: Opacity of material ripple as a tab is pressed
When designing a tab, you can use words or images to guide users to different screens.
Step 1. Add screens to a Navigator by dragging and dropping them on top of a Navigator.
Step 2. Select the Top Tab Navigator. Decide if you would like to display icons or labels by clicking on these switches:
Step 3. Depending on if you are adding icons or labels, select the screen you would like to style and upload an image or add content:
Additional descriptions are below:
Tab Bar Label -- The name of your tab label
Active Tab Icon -- Icon that appears when tab is selected; You can upload an image for this icon.
Inactive Tab Icon -- Icon that appears when tab is not selected; You can upload an image for this icon.
Swiping is a popular way to move through screens and is enabled by the Tab Navigator. You can enable the swipe feature by clicking the "SwipeEnabled' switch.
Row
A row is horizontal container that allows you to position components side by side.
Video Tutorial
Set the Size of a Row
For more information on sizing in your app, please see our introduction here
Property
Description
Height
The Horizontal Alignment property allows you to space elements in a Row horizontally
The Vertical Alignment property allows you to space elements in a Row vertically
Background Picture Resize Mode
Cover: Fills the entire screen without changing the height and width ratio of the image
Contain: The entire image will be scaled down to fit inside the screen, without changing the height and width ratio of the image
Stretch: The image's height will change to fill the screen length-wise
Video Recorder
Record videos to play in your app or save to the cloud.
Record a Video
You can record a timed video, where the app records for a set amount of time, or an untimed video, where the user can choose how long to film for.
You can display the videos you record with the Video component. You can also save you recorded videos to the cloud with our Media DB component. Once you have saved a video to the cloud, you can store the URL as a cloud variable or in an Airtable DB to make it accessible through the app on other devices.
Functions
Timed Video Recording
Input
Select a camera to film with. You can record with the front or back camera of your device.
Returns the camera currently being used to record. Will return front or back.
Canvas Label
Text
Set Text
Set the text being displayed in the Canvas Label.
Get Text
Get the text of the Canvas Label.
Position
X Co-ordinate
Set X
Set the X Co-ordinate of the top-left pixel of the Canvas Label.
Get X
Get the X Co-ordinate of the top-left pixel of the Canvas Label.
Y Co-ordinate
Set Y
Set the Y Co-ordinate of the top-left pixel of the Canvas Label.
Get the Y Co-ordinate of the top-left pixel of the Canvas Label.
Set the font size of the text of the Canvas Label.
Get the font size of the text of the Canvas Label.
Set the color of the text of the Canvas Label.
Get the color of the text of the Canvas Label.
Set the color of the background of the Canvas Label.
Get the color of the background of the Canvas Label.
Move the Canvas Label to the named Stage.
Speech Recognizer
Properties
Default Language: Set component to recognize text and speak in this language. Can be changed in blocks.
Blocks
Functions
Listen
Outputs
Name
Data Type
Outputs
Set default language to item from drop-down menu. Can also use block or to set language.
Get current language of Speech Recognizer component.
Canvas
Create interactive gaming apps with the canvas component.
The canvas component is a touch-sensitive panel that enables the movement of items.
You can use this component to create a variety of games and experiences that involve different methods of touching a 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.
Translator
Translate text. Powered by Google.
Properties
Source Language: Language of text that is to be translated. Can be changed in blocks.
Target Language: Language to translate text to. Can be changed in blocks.
Google Cloud Translation API Key: If you have your own Google API key, enter it here. Uses Thunkable's default key by default.
Blocks
Functions
Translate
Translates a given piece of text from Source Language to Target Language. Returns result.
Properties
Set/Get Source Language
Set source language using drop-down menu. Can also be set with Text blocks or variables. Any language code from this list can be used.
Get source language.
Set target language using drop-down menu. Can also be set with blocks or . Any language code from can be used.
Get target language.
Set Google Cloud Translation API Key.
Get Google Cloud Translation API Key.
Video
The video component lets you play videos in your app.
Video Overview
Please note that video files can be quite large and might exceed the 50 MB for your project.
The Video component lets you play videos in your app that are stored in the cloud or in your app. App users can easily pause, rewind or fast-forward the video with the built in player.
Set Video
There are a few ways you can set a video source in your app:
Upload a video to your app. Be careful of the Thunkable 50 MB app size limit
Provide a link to the video. The link has to end in .mp4, .mov, …so videos uploaded to YouTube and other video sharing sites may not work.
Please note that the Video component is not recommended for streaming live video content.
You can set how tall the Video is using the height property and set how wide it is using the width property.
Height
Fill container (default)- The Video fills the entire screen vertically
Fit contents - The Video’s height changes to fit the contents it contains
Relative size - The Video fills the specified percentage of the screen
Width
Fill container (default) - The Video fills the entire screen horizontally
Fit contents - The Video’s width changes to fit the contents it contains
Relative size - The Video fills the specified percentage of the screen
To set a video to play automatically, just toggle the Play property to true
See what video is currently set as the Video component's source
Sensing
Distance Between Sprite and Sprite
Get the distance between two sprites
Distance Between Sprite and Coordinate
Get the distance between a sprite and a point
Angle From Sprite to Sprite
Get angle between sprites
Closest Instance of Sprite Type to Sprite
Gets the closest instance of the provided sprite type to the given sprite
Logic
Comparison Blocks
If then, do that blocks are often paired with statement blocks that test whether a condition is met
The comparison blocks will compare two values and return true or false based on whether the condition is met.
And/Or blocks
You can compare multiple conditions at once.
The and block will return true if both statements are true, false otherwise.
The or block will return true if either statement is true, and false if neither statement is true.
Inverts the value of a true/false statement. Not true = false, not false = true.
Value blocks can be used to set the value of a variable. They can be used in conjunction with any of the above blocks.
Switch
Think of a Light Switch. It has two settings, On and Off. That is exactly what the switch component is like.
A switch is a component that has two settings, true and false. You can get your app to do specific tasks only if the switch is set to true.
Each time the switch is clicked the value will change. The value returned will only ever be true or false. To test this for yourself you can use the following blocks.
In the following example, the user can only advance to Screen2 if the acknowledge they have accepted the terms and conditions by clicking on the switch.
Alert
Alerts are useful components for displaying important messages while users are in the app itself
A one button alert, also known as a notification, displays a message and one button to confirm user has viewed the message
To set up an alert, simply fill in the following simple properties. The Cancel Button Text only needs to be filled out for a two-button alert. You can use blocks to start an event when
Rating
The Rating component is a visible component which can be used to display the rating of a product or content in your app, and allow the user to leave their own rating.
A Rating component is made up of 5-10 icons. An icon can be filled, partially filled, or empty, as seen below:
This block fires when a user enters a rating in the Rating component.
Maximum rating that can be given. Can be an integer between 5 and 10, selected from a drop-down menu.
Column
A column is a vertical container that allows you to stack components.
For more information on sizing in your app, please see our
In-App Purchase
The IAP component works on the Android platform and iOS platform.
Currently, there is no support for IAP on web apps
The IAP component doesn’t work on the Thunkable live apps (Android/iOS)
Project Assets and Sizes
It's best to keep app sizes as small as possible to preserve space on people's devices. All app projects have a 50MB limit, and free Thunkable accounts have a 100 MB total storage limit. If you need more storage for your account, you can upgrade to our plan to get 1 GB of space for your projects or to to get unlimited space.
Element
Limit
Sprites
Create interactive gaming apps with sprites.
Sprites are images that can be placed on the Stage in the Canvas.
They can react to being touched or dragged across the screen, or colliding with other sprites or the edge of the screen.
A Sprite Type is a category of Sprites that you can add to your app. For example, in a video game you might have a Main Character Sprite Type and Obstacle Sprite Types.
A Sprite is a single instance of a Sprite Type. In the video game example, you could have a single Obstacle Sprite Type, but multiple Obstacle Sprites in your app. They would be multiple Sprites of the same Sprite Type.
To add a Sprite Type to your app, click on the Stage of your Canvas. This will automatically bring you to the Canvas tab. Underneath your component tree, where you would see a component menu in the Design tab, you will see your Sprite Type menu.
Audio Recorder
Records for a set amount of time in seconds. Can type number of seconds into ghost block. Can also use blocks or to set this time.
Looks
Program a sprite's image, size, and visibility
Show the selected sprite or hide the selected sprite on the canvas.
Returns true if the sprite is visible, and false if it is hidden
Set the sprite's image to the next or previous image in the sprite type's .
Text
The most basic but most often used text block is below. You can type into this text block, or leave it empty.
Often, you'll want to join text values together with the join block:
You can use the newline block to add a line break in a piece of text.
Use these blocks to change the content or formatting of your text. These blocks will return the reformatted text.
Animation by Lottie
The Animation component powered by 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.
Share
Opens your phone app with the given number ready to call. This block will not place a phone call without the app user's knowledge.
Opens your default text messaging app with the given text ready to be sent to the given number. This block will not send a text message without the app user's knowledge.
Opens your default email app with an email with the given subject and body ready to be sent to the given email address. This block will not send an email without the app user's knowledge.
By default, the switch newValue will be set to false. If turned on, the newValue will be set to true
Value
If on, value is set to true; if off, false
You can customize the switch with the following properties:
Tint Color: Color of the switch track when switch is set to off
On Tint Color: Color of the switch track when switch set to on
Thumb Tint Color: Color of the switch thumb
This event fires every time the switch is clicked.
The disabled property is used to set whether or not the button is "clickable". Expected values for this property are:
True
False
The set and get height blocks work with the Height property of the switch component.
Change the "active" color of the switch.
Change the color of the switch
Change the "inactive" color of the switch
Change the state (on or off) of the switch
Show or hide the switch on the screen.
The set and get height blocks work with the Width property of the switch component.
Switch Overview
Getting Started
Style the Switch
Events
On Value Change
Properties
Disabled
Height
On Tint Color
Thumb Tint Color
Tint Color
Value
Visible
Width
X
Y
Property
Description
Title
The title of the alert
Message
The subtitle of the alert
Confirm Button Text
The text of the button
Cancel Button Text
LEAVE BLANK
Two button alerts have two buttons, one that dismisses the notification and one that can be programmed to start an event
To set one up, simply add the following simple properties
Property
Description
Title
The title of the alert
Message
The subtitle of the alert
If you want to start an event from a confirm button, you will want to add the blocks below:
It is possible to add buttons to an alert for more sophisticated use cases.
This can be done using the set Button List to block by creating a list of objects.
You can set the Text of the Alert. You can set the Style of the Alert to ok, destructive or cancel.
On iOS, the Alert can show more than 3 Buttons.
On Android, the Alert can show up to 3 buttons. If more than 3 buttons are specified, the first 3 will be shown.
A three button alert displayed on Android and iOS devices
Property
Description
Title
The title of the alert
Message
The subtitle of the alert
The 'showButtonList' block will return an output called 'buttonPressed'.
This will return the position of the Button in your Button List.
You can take some action based on which button was pressed.
Note: the Buttons may appear in a different order when testing the app on a device.
The number that ‘buttonPressed’ returns is the order that the Buttons are added in the app project.
One Button Alert
Demonstration of how an Alert looks on Android, iOS and Web
Two button alert
Button List: Alert with three or more buttons
Select how the Rating component is displayed: as a
row
(left-right),
row-reverse
(right-left),
column
(top-bottom), or
column-reverse
(bottom-top).
Change the size of the icons that make up the Rating component.
Set or get the height of the rating component in pixels.
Get or change the size of the margin between the icons of the Rating component.
You can select an image from the list available. All of the image options are suitable for any platform. You can preview the image options here.
You can upload your own images to be displayed for filled and empty icons.
Toggle whether the user can edit the value displayed on the Rating component. If read-only is true, the value cannot be edited. If read-only is false, the value can be edited.
Select the color of an unfilled icon.
Select the color of a filled icon.
Initial value displayed on the Rating component. Can be any number between 0 and the maximum value, including decimals.
Toggle whether your Rating component is visible.
Set or get the width of the rating component. Given in Pixels.
Set or get the horizontal position of the rating component on the screen.
Set or get the vertical position of the rating component on the screen.
Rating Overview
Event Blocks
On Rate
Properties
Count
Direction
A Rating component displaying a rating of 3.5/5
Font Size
Height
Icon Margin
Icon
Read Only
Rating Background Color
Rating Color
Value
Visible
Width
X
Y
Width
Fill container - The column fills the entire screen horizontally
Fit contents - The column’s width changes to fit the components it contains
Relative size - The column fills the specified percentage of the screen
The Vertical Alignment property allows you to space elements in a Column vertically
The Horizontal Alignment property allows you to space elements in a Column horizontally
Property
Description
Background Color
Default (none). Select any color using the color picker, RGBA or HEX value
Background Picture
You can upload a background image to your app or reference an image url e.g.beaver-yellow.png
This determines how to resize the image when the frame doesn't match the raw image dimensions.
Cover: Fills the entire screen without changing the height and width ratio of the image
Contain: The entire image will be scaled down to fit inside the screen, without changing the height and width ratio of the image
Stretch: The image's height will change to fill the screen length-wise
Repeat: Repeat the image to cover the screen. The image's height and width ratio
will not change
Center: Positions the image in the middle of the frame
Property
Description
Scrollable
Default (false). Indicates whether the column is scrollable. For scrollable to work, you must also set your screen height to fit contents and the components in your column must have heights set in absolute pixels
Fill container - The column fills the entire screen vertically
Fit contents - The column’s height changes to fit the components it contains
Relative size - The column fills the specified percentage of the screen
Space the elements vertically
Space the elements horizontally
Add a background color or picture
Background Picture Resize Mode
Enable scrolling
Before you set up your IAP blocks in Thunkable, you need to establish a set of product IDs. Each product ID is associated with the item being paid for.
If you are developing for both Android & iOS, we suggest you use the same product ID for similar items in both stores.
Product IDs need to start with a number or lower case letter, and be 148 characters or less. They can contain any of the following characters: numbers (0-9), lowercase letters (a-z), underscores (_), and periods (.)
Before you can create your In-App Purchases, you are required by Apple to request and fill out their Paid Applications contract.
To do so, log into your App Store Connect account, and go to the Agreements, Tax, and Banking section. In this section, you will see the ability to request the Paid Applications contract towards the top of the page.
After this is complete, you will now be able to add your In-App Purchases.
Consumable - a one-off purchase which can be repeated and keeps no history
Non-Consumable - a product that can only be purchased once and keeps history in your apple account. If you try and buy a second time, it reports you have already purchased and offers a free download
To add IAP to your project, navigate to Add Components and enter “IAP” into the search bar. Drag the In-App Purchase component to the Invisible Components section above.
Next, you will need to add the product IDs on the Properties panel on the right. These strings must match what you have in the App Store or Play Store. Make sure you double-check that you add Items as Items, and Subscriptions as Subscriptions.
If you need to pull the product/subscription info from the Play Store or App Store, you can use the following block. For the fields in the return object, you can reference them here.
You can use the following blocks to start the one-time purchase or subscription. For the fields in the return object, you can reference them here.
You can use the following block to get the purchase history and you can verify the purchase from the return list. This block is helpful when you need to restore an existing purchase either on a new device or a new app installation. For the fields in the return object, you can reference them here.
To test the IAP component, you have to publish it to the Google Play Store or App Store. You will not be able to test IAP with the Thunkable Live App or through Web Preview.
On iOS you need to submit to the App Store via Testflight to test the features.
Testflight sets up a sandbox environment automatically. When you send your update to the app store, you are able to test without having it go to the live version.
On Android publish to the Play Store via internal beta testing. You can read more about internal beta testing in the Play Store here.
You have to upload the APK or AAB file to the Play Store console before you can add any In-App Purchases.
There are two ways you can test how a pre-release app functions on the Google Play store: You can publish an app to the alpha or beta distribution channels. This makes the app available on the Google Play store, but only to the testers you put on a "whitelist."
In a few cases, you can test Google Play functionality with an unpublished app. For example, you can test an unpublished app's in-app billing support by using static responses, special reserved product IDs that always return a specific result (like "purchased" or "refunded").
The In-App Purchase blocks don't work on Snap to Place.
You should use Drag and Drop which has the new IAP blocks with RevenueCat.
This feature may only be available for Creators on certain Thunkable plans. Please refer to our pricing page for more information: Thunkable pricing.
Compatibility
Initial Setup
Google Play Store (Monetize → Products)
Apple App Store (In-App Purchase → Manage)
Properties
Blocks
For Sale
Purchasing
Purchase History
The "Get Most Recent Active Purchase" block may crash your iOS app.
Testing
Be mindful to leave extra time for testing in your app development cycle to allow time for each respective store to review your apps. Depending on your stage of app development, a review could take anywhere from an hour to 4 days.
App Store (iOS):
Play Store (Android):
Account size limit
100 MB for Free, 1 GB for Builder and Unlimited for Advanced
You can view a project's app size on the project's details page:
The main contributor to an app's size are files (also known as assets). To add or delete files, click on the Assets button in the side bar. Then click the "+" icon to manage all the files in your project.
Thunkable recommends and actively supports mobile operating systems that receive security updates.
This includes iOS 16+ and Android 12+.
Thunkable apps are often compatible with older OS, but this is not guaranteed.
You can view your total account storage size in your account settings.
Free Thunkable accounts have 100MB of storage.
Builder Thunkable accounts have 1GB of storage. Advanced Thunkable accounts have unlimited storage.
If you are near the limit, you may be able to create additional storage by removing projects that you no longer need like an old version or copy of a project.
We recommend that each of your asset files not exceed 50KB -100KB. Using smaller file sizes in your project will result in faster loading times for your users.
Thunkable recommends using file names that do not contain whitespace characters.
Here are two naming methods we recommend:
Snake Case - each space is replaced by an underscore (_) character, and the first letter of each word written in lowercase.
example_one.png
here_is_another_example.html
Camel Case - writing phrases without spaces or punctuation, indicating the separation of words with a single capitalized letter, and the first word starting with either case.
exampleOne.png
hereIsAnotherExample.html
App size
50 MB
Please refer to our pricing page for more information: Thunkable pricing
You can click on 'Add Sprite Type' to add a new Sprite Type to your app.
Just like the components menu in the Design tab, you can click and drag Sprites from their Sprite Type category into your app.
In the below GIF, there is a canvas with a Sprite, called Sprite1. There is also a Sprite Type in the Sprite Type menu called Sprite_Type1. When a Sprite is dragged from Sprite_Type1 and dropped onto the Canvas, we see a new Sprite, called Sprite_2.
Picture List: You can upload multiple images to a Sprite Type's Picture List. This allows you to change the appearance of the sprite when some event happens.
In the GIF below, we see that when one Sprite (the Thunkable Beaver) collides with another Sprite (the tree trunk), the appearance of the Tree Sprite changes.
The Picture List of Sprite_Type2
Demonstration of cycling through Image List
Angle: Change the angle of the sprite. The angle is measured in a clockwise direction and is measured in degrees, eg. setting angle to 30 will rotate your sprite 30 degrees clockwise.
Opacity: Change the opacity of the Sprite.
Bounce: When a sprite hits a surface or another sprite, this is the percentage of the speed that sprite with bounce back with. A bounce of 100 means that the sprite will bounce back at the same speed it had in its collision. A bounce of 200 will cause the sprite to bounce off with twice its speed. This is demonstrated in the GIF above under Picture List, where the beaver has a bounce of 50, or half its initial speed.
Is Draggable: When true, the player can drag the sprite
Passes Through: When true, all sprites will pass under or above the sprite. When false, the sprites will collide using the physics engine. This is demonstrated in the GIF above under Picture List.
Is Static: When a sprite is static, it acts like a wall. No forces can move it.
Ignore Gravity: Toggle whether of not the sprite is affected by the Stage's gravity. You can read more about the Stage's gravity properties here.
FixedRotation: When fixed rotation is false, the sprite can rotate in any direction. When fixed rotation is true, the sprite will remain at its current angle.
Drawing: Toggle whether the sprite will draw a line when it is dragged around the Screen. You can set the Drawing Color and Drawing Width of the line that is drawn.
Angle, Opacity, Bounce, Is Draggable, Passes Through, Is Static, Ignore Gravity, Fixed Rotation, and Drawing are all Sprite Type properties as well as Sprite properties. These are described in the previous section.
Picture Selection: Select an image from the Picture List defined in the Sprite Type to display on the Sprite.
X, Y: Location of the top left pixel of the Sprite on the X-axis and Y-axis of the Stage. You can also click and drag the Sprite to your desired initial position.
Z: Where the Sprite is in the Depth of the Canvas. A Sprite with a higher Z-value will appear in front of a Sprite with a lower Z-value. This is demonstrated in the GIF above under the 'Picture List' section of Sprite Type Properties: the beaver has a higher Z-value than the tree, so it is in front when it passes the tree.
Groups of sprites that have the same behavior should belong to the same sprite type. In the example below, WallType is a Sprite Type, and there are multiple Sprites of this type in the app (ie. the walls).
Whenever the ball touches any of the WallType Sprites, the ball goes back to its starting location.
Looking for some images to use as sprites in your project? Check out our new Sprite Gallery!
Sprites vs Sprite Types
Adding Sprites Types to your app
Screenshot of 'Add Sprite Type' section of your app
Trim blank spaces from the left side, the right side, or both sides of a string of text:
Find and replace all occurrences of a substring within a string.
The block below tests whether the text value is empty. Returns true or false
Returns the character at the specified position, where 1 is the first letter of the string.
Returns the empty string if the length of text given is less than the position specified.
Returns the substring at the specified start and end position, where 1 is the first letter of the string.
Returns the empty string if the length of text given is less than the starting position specified.
Returns the starting position of a substring within a string, where 1 is the first letter of the string.
Returns 0 if the string does not contain the substring.
Checks if a string contains a substring. Returns true or false.
Returns length of a given string
Text Value
String
Join
Newline
Reformat Text
Set case
Trim Spaces
Replace all
Analyze Text
Is Empty
Get letter
Get substring
Find first/last occurrence
Does string contain
Get length of string
Description
Animation
Please upload and reference your After Effects .json animations to your app project. You can create your own or find a library of open sourced ones from
Loop
If true, animation will run as a loop
For more information on sizing in your app, please see our introduction here
Property
Description
Height
Fit contents Container is just as large as the animation; Fill container Container is as large as it can be on the Screen; Relative size Size in percent of the Screen; Absolute size Size in pixels
Width
Fit contents Container is just as large as the animation; Fill container Container is as large as it can be on the Screen; Relative size Size in percent of the Screen; Absolute size Size in pixels
You can trigger some action to happen when the animation is clicked using the 'when Animation Click' event.
Design a custom layout for displaying your data in a Data Viewer
Overview
While the Data Viewer List and Data Viewer Grid have different layout options, you may want to design a custom layout for your data. This can be achieved with Row and Column components.
Video Tutorial
How To Use a Custom Layout in Your App
Design your Custom Layout
Use a Row or Column to create the custom layout you want. We will refer to this as the 'Parent Row/Column' for the rest of this doc.
This layout is a Row that contains two Columns. The first Column contains 3 Labels: TitleLabel, DescriptionLabel, and PriceLabel. The second Column contains an Image, ProductImage, and a Rating, called ProductRating. These components will be referenced in subsequent screenshots in this document.
If you want to set the height or width of your parent row/column to fill the container, we recommend setting it to Relative Size - 100% for best results.
Save your Custom Layout
Select your Parent Row/Column and click the 'Save as Data Viewer Layout' button.
When you click Save as Data Viewer Layout, you will see the following dialog:
To save a basic Data Viewer Layout:
Enter a Layout Name
Select if your Layout Type is List or Grid
Let Advanced Binding be set to false
Click OK
To save an advanced Data Viewer Layout:
Enter a Layout Name
Select if your Layout Type is List or Grid
Set Advanced Binding to true
You can now select which properties of the components in your Parents Row/Column you want to bind to the values in your Data Source.
Once you have selected all of the properties that you want bound to the values in your Data Source, click OK to save your custom Data Viewer layout.
Once you have saved your custom layout, you can select it as a layout for your Data Viewer. If your layout was saved with the Layout Type List, it can be used with the . If it was saved with the Layout Type Grid, it can be used with the .
You can bind the properties of your data to a .
With Basic Data Binding, Thunkable will automatically select basic properties of your components to bind to values in your data source.
With Advanced Data Binding, Thunkable will allow you to bind the properties that you specified to your data source:
You can manage your custom data layouts by going to your Thunkable homepage at and clicking on the Data Viewer Layouts tab at the left of the page. From here, you can edit and delete your custom data layouts.
Realtime DB by Firebase
Realtime DB Overview
You should now use instead of adding a Realtime DB component. This will work the same way in the background but will save you a lot of blocks.
We highly recommend you use your own Firebase account with your app. With the increased focus on user privacy, we strongly advise that you use own Firebase account both to ensure the privacy of your user data and to give you visibility into the database itself. We provide our database for your convenience but we may also clean out our shared account periodically
This storage option is useful for anything from saving game high scores to tracking work credit, powered by Firebase.
Set up Your Own Firebase account
Thunkable provides a default Firebase account for testing purposes. When your app is ready to be distributed, we strongly advise connecting your app to your personal Firebase instance.
Firebase Realtime Database also pairs well with Sign in and you can use a single Firebase project for both services.
Create your free project and account
Edit Database Rules
If you are using Sign In powered by Firebase in your app, you do not need to edit the default database rules which permit reading and writing to the database for authorized users.
Otherwise, you will need to set your Read and Write rules to true
To connect your Firebase project with Thunkable, you'll have to add an API key and Database URL to the Firebase Settings in the App Settings, which you can find by clicking on your app icon
One way to retrieve the API key and Database URL from Firebase is to click on the Add Firebase to your web app option
Once your project is connected to your Thunkable app, we recommend that you do a simple test and save a value into your database. It should appear in your data tab in your Firebase console.
You might want to split your database into smaller spaces, also known as project buckets. To do this, you would need to save your value as an object and use the create object block to create your project bucket. More details in .
Local DB
Local DB Overview
Many apps require a simple table of data to perform a number of essential tasks. One way to add this data is through a Local DB, short for database.
Add a Table of Data to Your App
The first thing you want to do after you add the component is to edit the data table.
Get data from your table
Get Cell block used to return the name of a month as it corresponds to the numerical month
Event
Description
You may want to update the data in your Local DB from the app itself. At the moment, you can only update a specific cell. We are hoping to add the ability to add and delete an entire row. Any updates you make to the table from the app will only be seen by the specific user of the app. To make changes that will be reflected across all apps, we suggest you use the component where data is stored n the cloud.
At present, changes made to your Local DB data will not be stored across app sessions. If you want the changes to your data to be stored across app sessions, you can use an Airtable component, whose data is stored in the cloud, or use to store data locally, either as strings of text or as with multiple properties. Date stored with the component is also persistent across app sessions.
🎮Gaming
Learn how to build awesome gaming apps on Thunkable.
With Thunkable's gaming components, you can build games and touch interface experiences.
Canvas
The Canvas contains the Stage where your Sprites are displayed.
Read more in the Canvas docs.
Sprites
Sprites are the elements on your stage that represent characters, obstacles, and more.
Read more in the Sprites docs.
Canvas Label
Use the Canvas Label to display text on your Canvas.
Read more in the Canvas Label docs.
Gaming Blocks
You can use blocks to change the appearance and behavior of your Stage and Sprites.
Read more in the Gaming Blocks docs.
Example Games
Accelerometer
The accelerometer sensor is used to measure the force of acceleration acting on the phone. The sensor reports this force for each of the three principal axes, the x axis, y axis and, the z axis. The values obtained from the sensor are in metres per second squared, .
There may be some instances where you want to start an event by shaking your mobile device or when the mobile device is shook. There is a Shaking event that you can add to your blocks that has sensitivity levels of high, medium and low
Timer
You can set:
The Name of the Timer
The Interval of the Timer, in seconds or milliseconds
Gyroscope
The gyroscope is capable of measuring how quickly the phone is being turned. It measures the rate of rotation of the phone and returns values in radians per second about the x axis, the y axis and the z axis. This rate of rotation is also known as the Angular Velocity, so the gyroscope can tell us the speed of rotation of the phone. By extension, if the speed of rotation is any number greater than 0, we can infer that the phone is being turned.
Whenever the phone is turned, or rotated, the Changes event will fire.
By default the gyroscope sensor is turned on, but the enabled
Stage
Select which Stage to display in the Canvas.
Sets the background color of the specified Stage.
Returns the hexadecimal value of the background color for the specified Stage.
Sets the color of the Frame for the specified Stage.
Motion
Program a sprite's speed and location
Set the X or Y value for the sprite's speed to a particular value.
Change the X or Y value for the sprite's speed by a specific amount.
Get the X or Y value for the sprite's speed.
Set or change the sprite's velocity, by a given amount, in the pointing or moving direction.
Ask Firebase to stop listening to a specifickeyfor changes in the database
Event
Description
Save (key, value)
Asks Firebase to save a given value under the given key
Event
Description
Get (key,value)
Asks Firebase to get thevaluestored under the givenkey
Event
Description
Add Listener (key)
Asks Firebase to listen to a specifickeyfor changes in the database. Required for Data Changed block.
Data Changed (key,value)
Asks Firebase for updates tovaluefor specifiedkey. Requires an Add Listener block.
Absolute size - Sizes the column to a specified number of pixels
Absolute - Sizes the column to a specified number of pixels
When the accelerometer sensor detects a change in the force acting on the phone the Changes event will be fired. Each time the event fires the four associated parameters will be updated.
Parameter
Type
Returns
xAcceleration
Number
Change in speed of the phone, along the x axis, in
yAcceleration
You can get the values for xAcceleration, yAcceleration and zAcceleration at any time with the following blocks.
By default the accelerometer sensor will be turned on, but you can use the Enabled property to read its current state and to change its state, i.e turn the sensor on and off.
Property
Type
Default
set Enabled
Bool
True
get Enabled
You can use the Sensitivity blocks to set the sensitivity of the Accelerometer and get its current level of sensitivity.
Property
Type
Default
set Sensitivity
one of [low, medium, high]
low
get Sensitivity
m/s2
Getting Started
Blocks
Events
Shaking
The x, y and z axes of a standard smartphone
Changes
Functions
Get Acceleration on X, Y, Z axes
Properties
Enabled
Sensitivity
Whether or not the Timer should Count Up
Whether the Timer should Loop, ie. if the Timer should reset itself once it fires
Whether the Timer is Enabled (this can be changed with blocks)
Set something to happen when the Timer fires.
Starts the Timer.
Stops the Timer.
If Count Up is false, returns remaining time from the Timer's interval in seconds.
If Count Up is true, returns elapsed time from the Timer's interval in seconds.
If Count Up is false, returns remaining time from the Timer's interval in milliseconds.
If Count Up is true, returns elapsed time from the Timer's interval in milliseconds.
Set interval of Timer in milliseconds.
Returns interval of Timer in milliseconds.
Set whether Count Upis enabled for this Timer.
Returns true or false value for whether Count Up is enabled for this Timer.
If Loops = true, the timer will reset itself after it fires. If your interval is 10 seconds, the Timer will fire every 10 seconds.
If Loops = false, the timer will finish its current interval if it is in the middle of one, and will no longer fire. If your interval is 10s, the timer will finish its current 10 second interval, fire, and then stop.
Returns true or false value for whether Loops is enabled for this Timer.
Set whether the Timer is enabled.
Returns true or false value for whether this Timer is enabled.
Start by creating a variable and set its value to 0 (this will keep track of the time).
Add a timer to your project.
Add a button that will start and pause the stopwatch.
Inside the "when button click" block, add a condition: if the timer is running, pause the stopwatch; if it's not, start it.
Set the timer interval to 1 second/1000 Milliseconds and enable looping so it keeps running.
Add a label to display the elapsed time in seconds.
Use the "when timer fires" block to increase the variable by 1 every second and update the label with the new value.
Start by creating a variable and set its value to 5000 to count five minutes.
Add a timer to your project.
Add a button that will start and pause the Timer.
Inside the "when button click" block, add a condition: if the timer is running, pause the Timer; if it's not, start it.
Set the timer interval to 1 second/1000 Milliseconds and enable looping so it keeps running.
Add a label to display the running time in seconds.
Use the "when timer fires" block to decrease the variable by 1 every second and update the label with the new value if the variable is greater than zero.
Properties
Event Blocks
When Timer Fires
Function Blocks
Start Timer
Stop Timer
Properties Blocks
Get Time
Get time in seconds
Get time in milliseconds
Interval
Set Interval
Get Interval of Timer
Count Up
Set Count Up
Get Count Up
Loops
Set Loops
Get Loops
Enabled
Set Enabled
Get Enabled
Example 1: How to Build a Stopwatch
Example 2: How to Build a Timer
property can be used to read and write new values to the gyroscope, thus allowing you to turn it on or off.
Property
Type
Default
set Enabled
Bool
true
get Enabled
Property
Type
Description
Alpha
Number
Rotation about the y-axis
Beta
Property
Type
Description
X
Number
Angular velocity about the X axis
Y
Description
Blocks
Events
when Gyroscope Changes
Properties
The x, y and z axes of a standard smartphone
Returns the hexadecimal value of the Frame Color for the specified Stage.
Set the background image of the stage to the specified item in the list.
Please refer to the Canvas docs to see some animated examples of the gravity properties.
Sets the Stage gravity in the vertical direction.
Returns the value of the Stage gravity, in the vertical direction.
Sets the Stage gravity in the horizontal direction.
Returns the value of the Stage Gravity, in the horizontal direction.
Enable drawing on the stage if set to true.
Disable drawing on the stage if set to false.
Return true or false, depending on whether or not drawing is enabled on the Stage.
Set the Drawing Color, or Line Color, for the stage.
Returns the hexadecimal value of the Drawing Color for the specified Stage.
Set the Drawing Width, or Line Width, for the stage.
Returns the numeric value for line width on the Stage.
Current Stage
Stage Appearance
Set Background Color
Get Background Color
Set Frame Color
Get Frame Color
Set Image Number to
Stage Gravity
Set Y Gravity
Get Y Gravity
Set X Gravity
Get X Gravity
Drawing
Set Touch Drawing
Get Touch Drawing
Set Drawing Color
Get Drawing Color
Set Drawing Width
Get Drawing Width
Move the sprite to the x and y location specified in the block
Set the sprite's X, Y, Z or Angle value to a specific position.
Change the sprites X, Y, Z or Angle value by a given amount.
Note: Sprite angle is measured in degrees, so should be a value between 0 and 360.
Get the sprite's current X, Y, Z or Angle value.
Note: Sprite angle is measured in degrees, so should be a value between 0 and 360
Get the X, Y, or Angle of the where the user tapped on the canvas
On the canvas, it's possible to make a sprite either draggable or to have it fixed in position.
Similarly, it's possible for other sprites to pass through a sprite, or it can be made impassable.
Finally, if a sprite is moving, it's possible to programatically cause it to stop moving.
Set the draggability or passability of the sprit
Get draggability of the sprite
Stop all sprites that are moving.
When the user clicks on the canvas these blocks will move the Sprite1 to the location that was touched.
Speed
Set Speed To
Change Speed By
Get Speed
Set Velocity
Position
Move Sprite To
Set Sprite Position
Get Sprite Position
Pointer
Get Pointer Value
Behavior
Set Draggable or Passable
Get Draggable or Passable
Stop All Sprites
Examples
Move Sprite to Pointer
Disabled
If set to true, switch will be disabled
Confirm Button Text
The text of the right confirm button; If the danger switch is turned on, the text will be in red (iOS only)
Cancel Button Text
The text of the left cancel button
Text Advanced
The text of the button
Style Advanced
The style of the button; ok is a confirm button, cancel is a cancel button and destructive is a confirm button with text in red (iOS only)
Text
if error, returns error; else, returns null
Get Cell (column, row number)
Gets the data in a cell based on the column and row number
Get Column (column)
Gets the data in a column formatted as a list based on the column number
Get Row (row number)
Gets the data in a row formatted as a list based on the row number
Number of Rows
Gets the number of rows
Event
Description
Set Cell (column, row number, value)
Updates the data in a specified column and row with a value
To view or change your project settings, click on the ⚙ icon next to your Project name in the left-hand side bar. Your App Settings will appear on the right-hand side of the screen.
App Description
This is a description of your app and how you intend it to be used. It is not necessary to fill this out in Thunkable. If you publish your app you will need to enter this information, whether on Thunkable or the App Store or Play Store.
App Name
To put it simply, your "app name" is the name of your app. This is the name that will be displayed on the Google Play Store or App Store, and that users see when they install your app on their device. This name is also used to set the page title when you publish as a web app.
Best Practises
Since space is limited, we recommend a short one or two word app name
Avoid using the character "&" in your app name: at the moment, it prevents your app from being installed on your device
This is not your app name! This is just the name of your project on Thunkable. When you create a new project, you will be prompted to write in a project name. You can change this name at anytime from your .
A unique identifier for your app on the or .
This should follow a pattern like com.domain.creatorname.appname
Make sure none of the segments of this package name begins with a number. Make sure none of the letters in this package name has an accent (e vs ë).
Your app icon is the picture that represents your app on your mobile device. This icon will also appear on your listing in the Google Play Store or App Store, and as your project icon on Thunkable.
Please make sure that the file you upload does not have the same name as another asset that you are using for your app. This will cause an error.
For publishing to the iOS , you will also need an app icon that does not have any transparency or it may cause an error.
For publishing your app to the Play and App stores, you will need to create a separate icon with a higher resolution. For , the current requirement is 500 x 500 px. For the , it's 1024 x 1024 px.
Thunkable Creators with a paid plan have the option to set their app to Private. A private app will not be displayed in the Thunkable Public Gallery. Learn more:
When you publish to the or the , you will need to increment (increase) your version number each time. If this switch is set to true, Thunkable will automatically increment your project's version number each time you publish your app (iOS) or download your app (Android).
If this switch is set to true, the sound will keep playing even when the app is minimized.
Enter the AdMob app ID for your iOS app.
Enter the AdMob app ID for your Android app.
Enter a string to explain to the user that a personal advertising identifier may be used to show them ads relevant to their online activity. Read more about .
Default Value: "This identifier will be used to deliver personalized ads to you."
Set a for this version of your Android app.
Set a for this version of your Android app.
Import and export an Android Keystore to/from your app. Learn more about the Android Keystore .
This property enables you to remove the Safe Area View which Thunkable adds to the app automatically. If you set this property to be true, the screen background color will extend to full screen and there won’t be any white area. However, you need to manually take care of the notch in your app design, like adding extra space, in order to avoid the app element being blocked by the notch.
This property enables you to set the safe area view color. With this, you can customize the background color of the white area. Please note, this is an app level setting and you won’t be able to customize the color at the screen level.
Set a for this version of your iOS app.
When you add components that require permissions to your app, like the camera, you will need to add purposestrings to your app if you want to publish it to the App Store.
User Tracking
If your app or any external service your app interacts with are gathering any kind of identifiable information, this must be explicitly disclosed to the end user of your app using an in-app prompt. If you do not include this and your app engages in tracking, Apple will reject your submission and ask you to resubmit while including an appropriate tracking string. To learn more about when to include a tracking string,
If you use blocks for , or , or use a Firebase database to support your or , you can enter personal API keys for these components in the project settings.
Label
The label component allows you to display text in your app.
Style the Label
You can customize your label using the following properties:
Properties
Text: Text that appears on the label
Font Size: Size of the text that appears on the label
Custom Font (mobile only): Upload a TTF or OTF font file to use as your Button's font
Color: Color of the text that appears on the label
Background Color: Sets the background color of the label
Text Align
Auto - Aligns the text automatically
Left - Displays the text starting from the left of the label
Font Style
Normal: Default text display
Italic: Display the text in italics
Font Weight: Select how bold the text on the label will be
Number of Lines: set a maximum amount of lines of text that your Label will display
Background Color: set the color of your Label's background
Border Width: Enter how wide you want the border outline of the label to be
BorderRadius: Enter how round you want the edges of the border for the label to be
Border Color: Pick a color for the border of the label
Border Style: Select if you want the border of the label to be a dotted, dashed or solid line
Background Color: set the color of your Label's background
Border Width: Enter how wide you want the border outline of the label to be
BorderRadius: Enter how round you want the edges of the border for the label to be
Border Color: Pick a color for the border of the label
Border Style: Select if you want the border of the label to be a dotted, dashed or solid line
Letter Spacing (iOS and web only): increase spacing between letters of your Label
Text Decoration Line: add a line through, underline, or both with underline line-through
Text Decoration Style (iOS and web only): set your Text Decoration line to be solid, dotted, dashed, or double
This event will fire when the user clicks on the label.
The get and set background color properties work with the color of the label itself i.e. the region behind the label text. Best practice is to use one of the to set this value but HEX or RGB values may be used too.
The set and get height blocks work with the Height property of the label component. Acceptable input values are:
Number of Pixels
Percentage Height
"Fit Contents"
The get and set number of lines property is used to work with the maximum number of lines of text that should be displayed in a label before that label starts to scroll.
This property corresponds to the text that is displayed in the label component.
Text Align can be any of the following values:
Auto
Left
Right
True
False
The set and get width blocks work with the Width property of the label component.
Number of Pixels
Percentage Width
"Fit Contents"
List Viewer
The List Viewer component allows you to add, view and click on items in a list.
Add Items to a List Viewer
Short Lists
We recommend adding a short list of items within the app itself as the Screen starts. Although the list block itself can handle a large number of items, practically speaking you probably only want to use this approach if your project has tens of items.
Medium Lists
If you need longer lists of information in your app you can use delimited data. This is very similar to using something like a .csv file. You can have hundreds of items in your list viewer using this method.
Long Lists
For longer lists where you need hundreds or thousands of items in your list, we recommend using the Data Sources component. This gives you three different options for storing your data.
Local Table
Airtable
Google Sheets
Choosing Airtable or Google Sheets allows you to create dynamic list viewers. This is where the information displayed to the user changes whenever you change your cloud-based data in Airtable or Google Sheets. Either of these options are ideal for when you need to store thousands of items, or you need to work with items that change frequently.
You can customize the List Viewer with the following properties:
Text Items Color: Set color of Text Items font
Text Items Background Color: Set background color for List Viewer
Text Items Font Size: Set font size of Text Items
A List Viewer automatically fill 100% of the Screen width
You can set how tall the List Viewer is using the height property.
Height
Fill container - The List Viewer fills the entire screen vertically
Fit contents - The List Viewer’s height changes to fit the contents it contains
Relative size - The List Viewer fills the specified percentage of the screen
You change the spacing and positioning of the List Viewer with the Margin and Padding properties.
Margin
You can specify how much space you want between the border and the contents of List Viewer using either pixel or percent values.
Padding
You can specify how much space you want between the edges of the List Viewer and the screen using either pixel or percent values.
Performs an action when the user clicks on any one of the list items.
The set and get height blocks work with the Height property of the list viewer component. Acceptable input values are.
Number of Pixels
Percentage Height
"Fit Contents"
The Computed Heightblock returns the on-screen dimensions of the list viewer, after it has been rendered on-screen. The value returned is an integer, representing the size of the list viewer in pixels.
Choose whether or not the arrow is displayed next to every item in the list viewer.
Set or get the list of text items that are displayed in the List Viewer. You must use a of data here - either locally stored or stored in the cloud.
The set and get visible blocks are used to show or hide the entire list viewer component. Acceptable values are:
True
False
The Computed Widthblock returns the on-screen dimensions of the list viewer, after it has been rendered on-screen. The value returned is an integer, representing the size of the list viewer in pixels.
The list viewer doesn't currently support pixel or percentage values for the width property.
Image
The image component lets you display pictures in your app.
There are a few ways you can display an image in your app:
Upload a picture to your project Files:
Provide a link in the Image properties
Take a picture with the Camera component
The blocks above open up your phone’s camera and set the Image component to the picture that you took.
You can set how tall the Image is using the height property and set how wide it is using the width property.
Height
Fill container - The Image fills the entire screen vertically
Fit contents - The Image’s height changes to fit the contents it contains
Relative size - The Image fills the specified percentage of the screen
Width
Fill container - The Image fills the entire screen horizontally
Fit contents - The Image’s width changes to fit the contents it contains
Relative size - The Image fills the specified percentage of the screen
With the Resize Mode property, you can do the following:
Cover: Resizes the picture to its max height or width regardless without changing the image quality.
Contain: Resizes the picture to fit the area without changing its quality
Stretch: The picture’s height will change to fill the image component length-wise
You can style the image with the following properties:
Border
Width: Enter how wide you want the border outline of the image to be
Color: Pick a color for the border of the image
You can change the spacing and positioning of the Image with the Margin and Padding properties.
Margin
You can specify how much space you want between the edges of the image and the screen using either pixel or percent values.
Padding
You can specify how much space you want between the border and the contents of the image using either pixel or percent value.
This event handler is fired when the user clicks on the image.
The Computed Height and Computed Width blocks return the on screen dimensions of the image, after it has been rendered on-screen. The value returned is an integer, representing the size of the image in pixels.
The set and get height blocks work with the Height property of the image component. Acceptable input values are.
Number of Pixels
Percentage Height
"Fit Contents"
The set and get picture blocks work with picture property of the image component. Pictures can be uploaded as local assets or specified as URLs
The set and get resize mode blocks work with how the picture is scaled within the image component. Acceptable values are:
Cover
Contain
Stretch
The set and get visible blocks are used to show or hide the entire image component. Acceptable values are:
True
False
The set and get width blocks work with the Width property of the image component. Acceptable values are.
Number of Pixels
Percentage Width
"Fit Contents"
Airtable
Effective February 1, 2024, Airtable no longer supports connecting via API key. You must connect your Thunkable project to .
Video Tutorial
Airtable Overview
Airtable is a service that looks like a spreadsheet but actually acts like a database so it can do database-like things like store attachments i.e. images in your spreadsheets (and not just text) and link records between spreadsheets.
We like Airtable because set-up is relatively a breeze for a spreadsheet
Getting Started
Create your base and account
Connect Your Airtable Base with Thunkable
There are four properties that you need to retrieve from Airtable to connect it with Thunkable: API key, Base ID, Table Name and View Name
To retrieve the API key, you'll have to navigate to the Account page and generate an API Key
To retrieve the Base ID, navigate to the page and select your spreadsheet. You will see the Base ID in the 'Introduction' section of this page.
The Table Name and View Name can be retrieved by grabbing the fields from your spreadsheet as shown below. Your default Table Name should be "Table 1". Your default View Name should be "Grid View".
Sound
The sound component plays a designated sound.
Set Source
There are a few ways you can set a sound source in your app:
Upload a sound to your app. Be careful of the Thunkable 50 MB app size limit
Provide a link to the sound. The link has to end in .mp3, .wav, etc
You can set a volume for the Sound component between 0 and 100.
The available options for Android are Duck Others and Do Not Mix.
Duck Others: This is the default option. If this option is set, your sound lowers the volume ("ducks") of audio from other apps while your audio plays.
Do Not Mix: If this option is set, your sound interrupts audio from other apps.
The options for iOS are Duck Others, Mix With Others, and Do Not Mix.
Duck Others: If this option is set, your sound lowers the volume ("ducks") of audio from other apps while your selected audio plays.
Mix With Others: This is the default option. If this option is set, your sound is mixed with audio playing in background apps.
Do Not Mix: If this option is set, your selected sound interrupts audio from other apps.
If this switch is set to true, the sound is muted.
This block will be triggered when the source of a Sound component is loaded. It is recommended to use this block if changing a Sound component's source during app runtime.
If a given audio is already the source of a Sound component, and you use a block to set the same audio as the source of the Sound component, this block will not be triggered. We recommend using an to say that if the audio is already the source of the Sound component, execute the action you would take when the source is loaded.
In the following screenshot, we want this audio to play when the Button is pressed. If this audio is already the source for the Sound component, we play the sound. If not, we set the audio to be the Sound's source. Once the source is loaded, we play the audio.
This block will be triggered when a sound stops playing.
This block will be triggered if there is an error with the Sound component.
Use this block to play the selected sound from the drop-down menu.
This block plays the selected sound starting from the second you choose.
Use this block to play the selected sound from the drop-down menu as an effect.
This sound can't be stopped or paused.
Use this block to pause the selected sound from the drop-down menu.
Use this block to resume the selected sound from the drop-down menu.
A sound can only be resumed if it has been paused.
Returns true or false value for whether this sound is playing.
Returns true or false value for whether this sound is loading.
Returns the total duration of this sound in seconds.
Returns the sound's specific time in seconds.
Use this block to stop the selected sound from the drop-down menu.
Set the Sound's source using the drop-down menu or by using a block to specify a filename or a URL.
Get the name of the Sound source.
Set the Sound volume to a value between 0 and 100.
Get the Sound volume.
Set Sound Interruption Mode on Android/iOS to a value between Duck Others, Mix With Others and Do Not Mix.
Get the Interruption Mode on Android.
Get the Interruption Mode on iOS.
Mute or unmute the sound by setting the value to True or False.
Get the value (True or False) if the sound is muted.
Magnetometer
Description
The magnetometer is used to measure magnetic flux density. This is the total magnetic field passing through a given area, per metre squared, m2T⋅m2 . The sensor will returns values with units of microtesla μT for each of the three coordinate axes; x, y and, z. The magnetic flux density is quite similar to magnetic field strength.
Blocks
Events
When Magnetometer Changes
When the magnetometer detects a change in the ambient magnetic field the Changes event will fire. The event returns 4 parameters that we can work with.
Returns flux density, in the x direction, expressed in
Returns flux density, in the y direction, expressed in
Returns flux density, in the x direction, expressed in
Returns a value between 0 and 360 which denotes the user's direction relative to the Earth's geographic North Pole
The magnetometer is, by default, turned on, but the enabled property can be used to turn in on and off by setting it to true or false respectively.
Lists
Create a List
You can create a list of variable lengths with the blocks below
Empty List
Creates an empty list
List of Specific Items
Allows you to specify what items in what order you want in your list
List of item repeated X Times
Creates a list of a given item repeated a specified number of times.
Make List from Text
This block lets you create a list from text and even lets you set delimiters i.e. ","
You can also use this block to make text from a list with a given delimiter
If you are importing a list from a Spreadsheet or other data source, it may be helpful to sort it in your app. You can sort a list alphabetically or numerically, ascending or descending
The following blocks analyze a list in different ways
Returns the length of a list.
Checks if a list is empty. Returns true or false.
Returns the position of the first or last occurrence of an item, where the index of the first item is 1. Returns 0 if the item is not in the list.
Returns a sub-list of items between two positions in a longer list.
Checks if a given list contains a given item. Returns true or false.
Returns the result of the chosen operation on a list of numbers. Returns NaN if the operation cannot be performed on the given list of values.
Items in a list have an index number, the first item is 1, second is 2 and so on. Not only can you select an item from a list by number from the front but also from the back, the first, the last and also a random item. You can but remove it after you have selected it
You can change an item in your list with the blocks below
This block will either insert an item at the specified location, or set the item at the specified location to the new value.
Removes the item at the specified position from a list
Get a copy of a list with the items shuffled in a random order.
Date Input
Date Input Overview
A Date Input component is helpful when you want the user of your app to easily select a specific date using the native Android or iOS date picker
Native Android Date Picker on the left and iOS on the right
Getting Started
The Date Input component needs no set-up (Woohoo!). Just drag and drop the component into your project. As a bonus, the current date will automatically show up as a label.
When a user of your app taps on the Date Input, it will automatically launch the native Android or iOS date pickers.
Set the Date Format
You can set the format of the date by choosing an option from the Style property. Currently supported styles are:
YYYY-MM-DD
MM/DD/YYYY
M/D/YY
Month Day, Year
Mth. Day, Year
The date that a user selects will show up automatically in the Date Input label but if you want to save the date somewhere to be uploaded later, you'll need to add a block like the one below.
Email Sign In by Firebase
To use Sign In, you will need to first create your own Firebase account and project
Getting Started
Create your free account and create a new project
Enable Email / Password Sign in
In the Firebase console, navigate to Authentication and the tab "Sign-In Method". Enable Email/Password as shown below.
Connect your Firebase Account with Thunkable
There are two properties that you need to retrieve from Firebase to connect it with Thunkable which are both retrievable from the Firebase console: API key and database URL
API key and database URL
Click on the Sign In drawer of blocks to access the Sign In blocks.
The first step for users is to Sign Up with their email address and a password. They will be sent an email to verify the address that they provided.
Here is an example of using this block:
This block will sign a user in and return their user ID.
When the user's email and password have been stored locally, the following blocks can be used to sign the user in with these details automatically.
Signs the user out.
Send an email to the specified email address to reset their password
On the Firebase console, navigate to the Users tab under Authentication and you'll find a dashboard where you can reset a user's password, disable and delete their accounts.
Web Viewer
With the Web Viewer component, you can open up any website within your app to display.
In the Design panel, you can set many properties of the Web Viewer.
URL: Set initial URL to be displayed in the Web Viewer
Height: Set Height of Web Viewer
Width: Set Width of Web Viewer
Visible: Toggle whether or not the Web Viewer is visible in the app
Margin (top, bottom, left, right): Set a defined distance between the Web Viewer and its neighboring components on the Screen
Padding (top, bottom, left, right): Set a defined distance between the border of the Web Viewer and its contents
Border: Set the width, radius, color and style of a border around the perimeter of the Web Viewer
To open up a website in your app, you need to provide the Web Viewer with a URL.
Control
You can manage much of your screen navigation through our , , and navigator components but for simple screen navigation, you can use the very popular block below
In most apps, one event leads to another event if a condition is met. To specify these scenarios, the this, do that block is commonly used with blocks that define the conditions that lead one event to the next.
The if this
Time Input
A Time Input component is helpful when you want the user of your app to easily select a specific time using the native Android or iOS date picker
The Time Input component needs no set-up (Woohoo!). Just drag and drop the component into your project. As a bonus, the current time will automatically show up as a label.
When a user of your app taps on the Date Input, it will automatically launch the native Android or iOS date pickers.
You can set the format of the time by simply choosing your desired format from the Style property
Math
Use this block to specify a number you want to use in your app.
You can also round up or down a decimal figure into an integer using the round block
You can also round a number to a selected amount of decimal places
There is also a block for irrational numbers like π
Objects
The Object blocks pair well with the , and components which often send data in object format. The component also requires data to be in object format for it to upload successfully as a row
You can use the following block to create a new object. Objects can be uploaded to your as the value of a , or they can be uploaded to an as a row object.
You can click on the gear icon to add properties to your object:
Sometimes, you want to convert between JSON (JavaScript Object Notation) and Objects. If an returns a JSON value, you can convert it to an Object to use with Object blocks. Use the
Preferably .png (vs. jpg or other file types)
Property
Setting
Size
192 x 192 px (minimum)
Shape
Square (equal height and width)
Project Name
App (Bundle) ID
Icon
This feature may only be available for Creators on certain Thunkable plans. Please refer to our pricing page for more information.
Right - Displays the text starting from the right of the label
Center - Displays the text starting from the middle of the label
Justify - Aligns both the right and left side of the text equally
Text Decoration Color (iOS and web only): set the color of your Text Decoration Line
Writing Direction (iOS and web only): set the writing direction of your Label's text
Letter Spacing (iOS and web only): increase spacing between letters of your Label
Text Decoration Line: add a line through, underline, or both with underline line-through
Text Decoration Style (iOS and web only): set your Text Decoration line to be solid, dotted, dashed, or double
Text Decoration Color (iOS and web only): set the color of your Text Decoration Line
Writing Direction (iOS and web only): set the writing direction of your Label's text
"Fill Container"
Center
Justify
"Fill Container"
Using Custom Fonts may only be available for Creators on certain Thunkable plans. Please refer to our pricing page for more information: Thunkable pricing.
Day of the month from 1-31 (depending on the month)
Event
Output
Get Date
Date in whichever format you specify e.g. YYYY-MM-DD
Get Year
Year in 4 digit format e.g. 2019
Save the Date
Events
Date Picked
Functions
Get Date
Get Day
Get Month
Get Year
Launch Picker
Properties
Background Color
Color
Computed Height and Width
Font Size
Font Style
Font Weight
Style
Text Align
Visible
Get Month
Returns unique ID for each account
isEmailVerified
True/False
If email has been verified, returns true; else, returns false
Event
Description
Sign up ( email, password))
Signs up a user for a new account. Returns an error if sign up is not successful. A common error is "The email address is already in use by another account."
Name
Data Type
Data
error
Text
If error, returns error; else, returns null
userId
(Optional) Modify the email template you send to verify your users' emails
A URL is kind of like a street address - it tells the web viewer the location of the website on the internet.
URL: Enter in the link to the website or an image. The URL must include https://
Note: Can also accept .html files that have been uploaded to the app (great for offline use).
You can use blocks to navigate back through previously visited web pages. Once you have gone back, you can also use blocks to navigate forward through your visited pages again.
You can set how tall the Web Viewer is using the height property and set how wide it is using the width property.
Height
Fill container - The Web Viewer fills the entire screen vertically
Fit contents - The Web Viewer’s height changes to fit the contents it contains
Relative size - The Web Viewer fills the specified percentage of the screen
Absolute size - Sizes the Web Viewer to a specified number of pixels
Width
Fill container - The Web Viewer fills the entire screen horizontally
Fit contents - The Web Viewer’s width changes to fit the contents it contains
Relative size - The Web Viewer fills the specified percentage of the screen
Absolute - Sizes the Web Viewer to a specified number of pixels
You change the spacing and positioning of the Web Viewer with the Margin and Padding properties.
Margin
You can specify how much space you want between the border and the contents of Web Viewer using either pixel or percent values.
Padding
You can specify how much space you want between the edges of the Web Viewer and the screen using either pixel or percent values.
You can toggle whether the Web Viewer automatically requests the user's location. Some websites require access to the user's location to work. However, if you do not plan on displaying a website that needs this permission in your app, then you may not want your app to request an unnecessary permission.
To set whether or not the Web Viewer requests the user's location, go to the Design tab and click on your Web Viewer. In the panel on the right hand side of the screen, click on the Advanced tab.
Advanced tab of Web Viewer component
Scroll down until you see a switch labeled Geolocation Enabled. Use this switch to toggle whether your Web Viewer requests the user's location.
If you own the website being displayed in your Web Viewer, you can send and receive messages between your website and the Web Viewer using Javascript.
You can see examples of sending/receiving messages and get further setup instructions here.
You may also find the Web API component useful for sending/receiving information between your app and a website.
Go back to the previous page visited.
Move forward to the next page in your browser history.
Post a message.
Reload the web viewer.
Returns any message that was received after calling the Post Message function.
The set and get height blocks work with the Height property of the web viewer component. Acceptable input values are.
Number of Pixels
Percentage Height
"Fit Contents"
"Fill Container"
The Computed Heightblock returns the on-screen dimensions of the web viewer, after it has been rendered on-screen. The value returned is an integer, representing the size of the web viewer in pixels.
The set and get width blocks work with the Width property of the web viewer component. Acceptable input values are.
Number of Pixels
Percentage Width
"Fit Contents"
"Fill Container"
The Computed Widthblock returns the on-screen dimensions of the web viewer, after it has been rendered on-screen. The value returned is an integer, representing the size of the web viewer in pixels.
The set and get visible blocks are used to show or hide the entire button component. Acceptable values are:
True
False
The set URL block is used to change the web address that is displayed in the web viewer. Please note that this block need to be used in conjunction with the reload function and the web viewer only supports connections via https. If you try to use http your website will not be displayed.
The get URL block returns the "default" url in your project, i.e the value that you set in the designer. At this time it does not dynamically return the URL of the pages that is currently being displayed.
Video Tutorial
Some websites may not appear when previewing your app on the web. You may need to Live Test the app on a device, or download and install the app, to see your web page.
Properties
Simple
Set URL
Go Back/Forward
The Back block may not work when you test your app on the web, but will work when your app and in apps
Edit Web Viewer size
Add Spacing
Manage Permissions
Post Message/Receive Message
See Also
Events
Receives Message
Functions
Back
Forward
Post Message
Reload
Value from Post
Properties
Height
Width
Visible
URL
, do
that
block can be transformed to support more complex logic
The purple settings button can be used to add additional conditions for events
A truthy value is a value that is considered true when encountered in a Boolean context. All values are truthy unless they are defined as falsy. That is, all values are truthy except false, 0, "", null, undefined, and NaN.
Returns False:
Returns True:
The Test block can be used to return a value based on a given condition. If the condition is true, one value is returned. If the condition is false, a different value is returned.
Wait the specified amount of time before performing the next action.
Repeat a set of blocks for a specified amount of time
Repeat an action for an unlimited period of time
Repeat an action the specified number of times
Repeat an action for a certain amount of times, with the incrementer index i
Repeat an action over every item in a list
Repeats an action while a condition is true
Break out of an existing loop
You can prompt a user to open a page within an app installed on their phone or a URL in their browser using the block above.
Thanks to the development of universal links for iOS and Android app links, you simply need to enter the URL of the webpage for your app to automatically open to the app if it's installed or open the web browser if it is not.
The time that a user selects will show up automatically in the Time Input label but if you want to save the date somewhere to be uploaded later, you'll need to add a block like the one below.
Event Property
Output
Get Time
Date in whichever format you specify
Get Hours
Hour of the Day from 1-24
Time Input Overview
Getting Started
Set the time format
Save the time
Native Android Time Picker on the left and iOS on the right
Events
Time Picked
Functions
Get Hour
Get Minute
Get Time
Launch Picker
Properties
Background Color
Color
Computed Height and Width
Font Size
Font Style
Font Weight
Style
Text Align
Visible
Returns true or false based on whether the chosen condition applies to the number
If the given number is of a lower value than the lower bound, this block will set the given number to have the value of the lower bound.
If the given number is of a higher value than the upper bound, this block will set the given number to have the value of the upper bound.
Perhaps the most often used calculation in an app is addition but this block also supports subtraction, multiplication, division and exponential figures
Returns the remainder when a number is divided by another number.
There are also a few more advanced calculation blocks that may be helpful including trigonometric.
These blocks will return a value assuming the input is given in degrees.
For games and other apps, it may be important to introduce randomness into your app.
Returns integer between two given integers. Is inclusive of the given integers.
Similarly, you may want to convert an Object to JSON to make an API POST, or set headers or query parameters for your API call. You can do this with the generate JSON from Object block:
You can use the get property block to read the value of an object's property.
If the object does not have a property with this name, it will return undefined.
The Get Values Of block can be used to get nested values, ie. properties of properties of an object. If you are trying to get nested property b of property a of an object, you can simply get property a.b of an object, instead of using multiple get property of blocks.
You can also get a value from an Array (or list) of values. If an object property b is a 3-items list, and you want to get the second item of that list, you can get property b[2] of that object. The first item of the list is at index 1.
The blocks below demonstrate each of these methods, as well as a block that combines these methods by getting a value from an array that is a nested property of an object. The blocks are presented with the objects written in JSON format as well as created with Objects blocks, but both sets of blocks are doing exactly the same thing. In these blocks,Get nested property will return 5, Get value from array will return 6, and Get value from nested array will return 7.
You can use the get Object properties of block to return the names of the properties of an object.
This block returns a list of property names. This list can be used with list blocks.
With the set property block, you can change the value of a single property of an object.
You can use Object blocks when making calls to an API.
Often, when retrieving data from an API like Weather Underground, you will get a large data dump in JSON format like shown below.
Sum, Min, Max, Averages, Standard Deviation, Random Item
Select from a List
Modify List
Insert At/Set
Remove Item from List
Shuffle List
Slider
Slider Overview
The Slider is a great UI element to enable users easily select a value from a fixed range of values.
Getting Started
To set up a slider, you'll have to first define the minimum and maximum values, the initial value and the incremental steps of the slider
We recommend using a Label with the Slider so that users can get immediate feedback on the value being set.
Minimum Track Tint Color: Color of the slider track to the left of the thumb
Maximum Track Tint Color: Color of the slider track to the right of the thumb
Thumb Tint Color (Android only): Color of the thumb
You can set how tall the Slider is using the height property and set how wide it is using the width property.
Height
Fill container - The Slider fills the entire screen vertically
Fit contents - The Slider’s height changes to fit the contents it contains
Relative size - The Slider fills the specified percentage of the screen
Width
Fill container - The Slider fills the entire screen horizontally
Fit contents - The Slider’s width changes to fit the contents it contains
Relative size - The Slider fills the specified percentage of the screen
You change the spacing and positioning of the Slider with the Margin and Padding properties.
Margin
You can specify how much space you want between the border and the contents of Slider using either pixel or percent values.
Padding
You can specify how much space you want between the edges of the Slider and the screen using either pixel or percent values.
When the user takes their finger off the slider. The event returns the value that the slider has settled on.
Please note that the on Sliding Complete event does not work in web preview
This event fires each time the slider moves to a new position. Each time a new values is selected this event will return an updated value.
The set and get height blocks work with the Height property of the slider component. Acceptable input values are.
Number of Pixels
Percentage Height
"Fit Contents"
The Computed Heightblock returns the on-screen dimensions of the slider, after it has been rendered on-screen. The value returned is an integer, representing the size of the slider in pixels.
Set or get the color of the right side of the slider.
Set or get the biggest value of the slider
Set or get the color of the left side of the slider
Set or get the smallest value of the slider
Set or get the step-size, also known as the increment, of the slider.
Change the color of the slider itself.
The set and get value blocks are user to work with the position of the slider.
The set and get visible blocks are used to show or hide the entire Slider component. Acceptable values are:
True
False
The set and get width blocks work with the Width property of the Slider component. Acceptable input values are.
Number of Pixels
Percentage Height
"Fit Contents"
The Computed Widthblock returns the on-screen dimensions of the slider, after it has been rendered on-screen. The value returned is an integer, representing the size of the slider in pixels.
Data Viewer Grid
Create powerful, no-code, data-driven apps connected directly to Google Sheets, Airtable, or stored locally.
Video Tutorial
Sample App
Check out our Hockey teams sample app to see the Data Viewer grid in action. Click the "Copy Project" button is you'd like to reuse this open-source sample for yourself.
If you have any feedback for us about the Data Viewer components please let us know over in the .
Overview
The data viewer components allow you to create beautiful user interfaces for your data. All of this is done in just 3 steps, no blocks required!
You can add additional functionality to the Data Viewer Grid by using the included or you can work directly with your raw data by using the .
To begin using the Data Viewer you need to specify where your data are stored. Thunkable gives you three different storage options.
You can use or to store data in the cloud. Alternatively, you can . This is ideal if you want local, offline access to your data. Creating your own table is also the fastest and easiest way to get started with the data viewer.
In the Data_Viewer_List component properties, click the Add button. In the pop-up modal you can choose an existing data source. If this is your first time using the Data Viewer you can create a new one by clicking on the Create New button.
In the next modal, choose between , or as the source of your data.
Start by naming your data source.
Next, select the Data Viewer component and click on the link that says Click here to edit the data. This allows you to edit the placeholder data that was automatically generated
The data editor allows you to edit, add, and delete columns of information. To change any of the individual values simply click on the cell and type whatever you like.
In Airtable, a base in considered to be the data source. Adding an is really simple.
To start, copy your API key from your Airtable . An Airtable API key is a 14 character code that begins with the three letters "key". Paste this key into Thunkable and click the Refresh button to see a list of your Airtable bases.
Choose the base you want to use as your data source and click Create.
If you're new to Airtable you can read more about it in our documentation.
In Google Sheets, the entire document is considered to be the data source.
To connect a Google Sheet, sign in and grant permission for your Thunkable project to access your Google Drive.
Once you have allowed this, you will see a list of spreadsheets in your Google Drive. If you don't seen the sheet you are looking for you can switch to list view, sort alphabetically or search for the one you need. Click Select to return to your Thunkable project.
At this time, connecting to .xlsx files that are hosted on Google Sheets is not supported. You can convert your .xlsx file to a Google Sheet before connecting it to your Thunkable app project. Simply open your .xlsx file on Google Sheets, then click File > Save as Google Sheets.
You can also design a and save it with the Layout Type 'Grid' to use it in your Data Viewer Grid.
Finally, you need to manually specify which columns in your data source correspond with which placeholders in your chosen layout.
Each layout will have its own specific set of data bindings. Here is what your Data Bindings section will look like if your chosen Data Viewer Grid layout has an Image, Title and Subtitle field:
The Item Click event is fired when any card in the Data Viewer is clicked. It returns a row id which corresponds to the unique Thunkable Id of the card that was clicked. The row id is particularly useful when used with the the blocks.
The following blocks allow you to work with the height and width properties of the Data Viewer.
The entire Data Viewer can be completely hidden or shown by setting the Visibleproperty to false or true, respectively.
Refresh the Data Viewer Grid to sync with the Data Source.
When you connect a Data Source to your project you will also have access to a second block drawer. These Data Source blocks allow you to perform a variety of CRUD (Create, Read, Update, Delete) operations on your data.
Click on the link below to learn how to use the Data Sources blocks in your project.
Live Test your App
Preview your Thunkable project with our Thunkable live app, or on the Web
The Thunkable Live app connects the projects in your web browser directly to your mobile device. It allows you to do two things:
You can your project. Any changes you make in your browser are displayed on your device immediately.
You can any of your projects, directly on your device, without the need to be logged in to your computer.
Data Viewer List
Create powerful, no-code, data-driven apps connected directly to Google Sheets, Airtable, or stored locally.
The data viewer components allow you to create beautiful user interfaces for your data. All of this is done in just 3 steps, no blocks required!
Step
Default (0); Increments of the Slider
Border:
Width: Enter how wide you want the border outline of the Slider to be
Color: Pick a color for the border of the Slider
Style: Select if you want the border to be a dotted, dashed or solid line
Radius: Enter how round you want the edges of the border for the Slider to be
Default (none); Color of the thumb
Border
Default (none); You can add a border with customized width, color, style (solid, dotted, dashed)and borderRadius
Absolute size - Sizes the Slider to a specified number of pixels
Absolute - Sizes the Slider to a specified number of pixels
"Fill Container"
"Fill Container"
Property
Description
Minimum Value
Default (0); Minimum and leftmost value of the Slider
Maximum Value
Default (100); Maximum and rightmost value of the Slide
Value
Property
Description
Minimum Track Tint Color
Default (none); Color of the slider track to the left of the thumb
Maximum Track Tint Color
Default (none); Color of the slider track to the right of the thumb
Style the Slider
Edit the Slider size
Add spacing
Events
On Sliding Complete
On Value Change
Properties
Disabled
Height
Maximum Track Tint Color
Maximum Value
Minimum Track Tint Color
Minimum Value
Step
Thumb Tint Color
Value
Visible
Width
Default (0); Initial value of the Slider
Thumb Tint Color (Android only)
The Thunkable Live app allows you to live test your app on your device, in real-time, while you are building it. Not even hard core developers have this super power. You can also preview all your app projects from the comfort of your mobile device.
If you don't have an iOS or Android device, you can also set up an emulator on your computer that will mimic what you would see on an actual device.
With Thunkable Live installed on your device, you are now ready to live test or to live preview.
While live testing, any changes that you make to your project should be reflected in your app. Bear in mind that the Thunkable Live app doesn't check your project for errors. Some changes that you make may crash the app. If this happens simply exit out of the app and re-open it.
From any of your Thunkable projects, click on the Live Test button at the top of the screen to begin live testing.
Clicking on the Live Test button will remind you to open Thunkable Live on your device.
Sign in with the same Google account in Thunkable Live to preview your projects directly on your device.
When you click the Live Test button you will be prompted to enter a code into your computer.
To find this code, open Thunkable Live on your device and click Email sign in - Generate Test Code.
Enter this code into the first prompt and you will be able to live test your app.
For the first time, you can live preview all your app projects from the comfort of your mobile device. Simply login and you should see a list of all your projects on your Thunkable Live app.
Common issues with the Thunkable Live app
If you have a Navigator as the first item in your tree, make sure your screen is dropped within it
You have unconnected blocks
You have an event triggered by a Screen. Start which may be causing the screen to crash
Your app and desktop may not be logged into the same account
(Android only) You are trying to set the value of a Slider in your blocks
(Android only) You are trying to set the latitude and longitude of a Map in your blocks
The height or width of the image may be set to 'Fit contents'
Preview on the Web allows you to live preview your own project directly from your browser. Simply click on "Live Test" to preview your own app in a pop-up window.
You can also preview any publicapp, directly from the Project Detail Page. Here's one example, but you can find thousands of others in the public gallery.
You can test and preview your project directly within your browser. This is a great option when designing your app's user interface and building out the app's functionality with blocks.
It is important to note, however, that Web Preview does not support some app features. This is because some app features require functionality only available on a mobile device, such as push notifications, accelerometer, and Bluetooth low energy. For a full list of features that cannot be tested with Web Preview, please see here: Publish as a Web App.
Not all components are supported on the web at this time so please see the list below of components that are not supported:
You can add additional functionality to the Data Viewer List by using the included component blocks or you can work directly with your raw data by using the Data Sources blocks.
To begin using the Data Viewer you need to specify where your data are stored. Thunkable gives you three different storage options.
You can use Google Sheets or Airtable to store data in the cloud. Alternatively, you can create your own table. This is ideal if you want local, offline access to your data. Creating your own table is also the fastest and easiest way to get started with the data viewer.
In the Data_Viewer_List component properties, click the Add button. In the pop-up modal you can choose an existing data source. If this is your first time using the Data Viewer you can create a new one by clicking on the Create New button.
Next, select the Data Viewer component and click on the link that says Click here to edit the data. This allows you to edit the placeholder data that was automatically generated
The data editor allows you to edit, add, and delete columns of information. To change any of the individual values simply click on the cell and type whatever you like.
In Airtable, a base in considered to be the data source. Adding an Airtable DB is really simple.
To start, copy your API key from your Airtable account page. An Airtable API key is a 14 character code that begins with the three letters "key". Paste this key into Thunkable and click the Refresh button to see a list of your Airtable bases.
Choose the base you want to use as your data source and click Create.
In Google Sheets, the entire document is considered to be the data source.
In order to use a Google Sheet as a Data Source, the first row in your Sheet must be a header row.
To connect a Google Sheet, sign in and grant permission for your Thunkable project to access your Google Drive.
Once you have allowed this, you will see a list of spreadsheets in your Google Drive. If you don't seen the sheet you are looking for you can switch to list view, sort alphabetically or search for the one you need. Click Select to return to your Thunkable project.
At this time, connecting to .xlsx files that are hosted on Google Sheets is not supported. You can convert your .xlsx file to a Google Sheet before connecting it to your Thunkable app project. Simply open your .xlsx file on Google Sheets, then click File > Save as Google Sheets.
Once you have specified a data source you can choose your List Item Layout. There are 7 options to choose from. Depending on the raw data you have you can choose a layout that best fits your particular needs
You can also design a Custom Data Viewer Layout and save it with the Layout Type 'List' to use it in your Data Viewer List.
You can now manually specify which columns in your data source correspond with the placeholders in your chosen layout. Each layout will have its own specific set of data bindings. Two examples are included below for reference.
If you use the Title layout, you will only have one data binding, the Title property.
You can set a customizable, clickable button to appear when the list item is swiped to the left. If Left Swipe is set to true you will see additional options to customize the button text, text color and button background color.
When you test this on your phone you will see that each list item can be dragged to the left to reveal a clickable button. The Left Swipe Click event handler controls what happens when this block is clicked.
You can also set a customizable, clickable button to appear when the list item is swiped to the right.
When you test this on your phone you will see that each list item can be dragged to the right to reveal a clickable button. The Right Swipe Click event handler controls what happens when this block is clicked.
The Item Click event is fired when any list item in the Data Viewer is clicked. It returns a row id which corresponds to the unique Thunkable 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 quickly identify which row was clicked when using the Data Source blocks
The following blocks allow you to work with the height and width properties of the Data Viewer.
The entire Data Viewer can be hidden or shown by setting the Visibleproperty to false or true, respectively.
Refresh the Data Viewer List to sync with the Data Source.
When you connect a Data Source to your project you will also have access to a second block drawer. These Data Source blocks allow you to perform a variety of CRUD (Create, Read, Update, Delete) operations on your data.
Click on the link below to learn how to use the Data Sources blocks in your project.
If you have any feedback for us about the Data Viewer components please let us know over in the Thunkable Community.
Some users have reported issues connecting to Google Sheets if they are using G Suite for Education accounts. The quickest way around this, for now, is to user a personal Gmail account. If you need a large group or class to use this feature then you may need to contact your G Suite administrator to review your security settings.
In order to use Google Sheets, the first row in your Sheet must be a header row.
Please note that some users have reported issues connecting to Google Sheets if they are using G Suite for Education accounts. The quickest way around this, for now, is to user a personal Gmail account. If you need a large group or class to use this feature then you may need to contact your G Suite administrator to review your security settings.
When you tap on the play icon to hear your favourite music, you are using a button.
Video Tutorial
A button is just something you can click on to perform an action. This action can be anything from navigating to a different screen, saving information to a database, or playing a sound.
Changing the text on the button
Navigate to a different screen
Style the Button
You have many options for styling your button, such as changing the background color or text color. Here are the different options for customization:
Text: Text that appears on the button
Text Color: Color of the text that appears on the button
Background Color: Sets the background color of the button
Font Size: Size of the text that appears on the button
Custom Font (mobile only): Upload a TTF or OTF font file to use as your Button's font
Background Picture: Upload a picture that appears on the button.
Background Picture Resize Mode
Cover: Fills the entire button without changing the height and width ratio of the image
You can set how tall the button is using the height property and set how wide the button is using the width property.
Height
Fill container - The button fills the entire screen vertically
Fit contents - The button’s height changes to be the size of the contents it contains
Relative size - The button fills the specified percentage of the screen
Width
Fill container - The button fills the entire screen horizontally
Fit contents - The button’s width changes to be the size of the contents it contains
Relative size - The button fills the specified percentage of the screen
You change the spacing and positioning of the button with the Margin and Padding properties.
Margin
You can specify how much space you want between the edges of the button and the screen using either pixel or percent values.
Padding
You can specify how much space you want between the border and contents of the button using either pixel or percent values.
You can use the following blocks to listen for when a specific event occurs
Performs an action when the user taps the button.
Performs an action when the user holds down the button.
Performs an action when a user pressed down on the button
Performs an action after the user releases the button
The get and set background color properties work with the color of the button itself i.e. the region behind the button text. Best practice is to use one of the built to set this value, but you can use HEX and RGB values too.
The set and get resize mode blocks work with how the background picture is scaled within the button component. Acceptable values are:
Cover
Contain
Stretch
The disabled property is used to set whether or not the button is "clickable". Expected values for this property are:
True
False
The font style properties of the button text can be "Bold", "Italic", or Raised. Expected values for each property are:
True
False
The get and set font size blocks are used to work with the size of the text that is displayed in the button. This value must be a number.
The set and get height blocks work with the Height property of the button component. Acceptable input values are.
Number of Pixels
Percentage Height
"Fit Contents"
The Computed Heightblock returns the on-screen dimensions of the button, after it has been rendered on-screen. The value returned is an integer, representing the size of the button in pixels.
This property corresponds to the text that is displayed in the button component.
The get and set text color properties can be used to work with the color of the text displayed on the button. Best practice is to use one of the to set this value but you can use HEX and RGB values too.
The set and get visible blocks are used to show or hide the entire button component. Acceptable values are:
True
False
The set and get width blocks work with the Width property of the button component. Acceptable input values are.
Number of Pixels
Percentage Width
"Fit Contents"
The Computed Widthblock returns the on-screen dimensions of the button, after it has been rendered on-screen. The value returned is an integer, representing the size of the button in pixels.
Thunkable Sample Projects
Thunkable is building the world's largest gallery of open sourced apps to help inspire you and save you time.
Below are a few of our favorites with more to come. Feel free to customize them for your own use and share them with #MadewithThunkable
Sign In Screens
These Sign In templates can be easily remixed. Click to download!
Since mobile apps are radically easier to make with Thunkable, why not make apps just for the most important people in your life? We've started experimenting with some ways that apps have actually helped us feel closer to the ones we love.
For anyone who has a pet (or child) whose care is managed by multiple people, this app helps to coordinate regular meals, treats, walks and poops. This app is powered by a that syncs data quickly across devices. This app resets itself every day.
#cloudvariables#firebase#share
Social media was originally invented for people to share things with people they trust. With the evolution of popular platforms today, it's increasingly hard to simply keep our channels private enough so our conversations and photos are less filtered and bringing us all joy (instead of FOMO).
This app is kind of like an Instagram and Snapchat hybrid and we've created a private version of this app that we are using daily at the Thunk Tank to help our global team feel more connected. To make your app private, simply create a to keep your images within your sights and a to host the links to those images. You won't believe what people will share with a little bit of privacy!
This is a Slack-like chat app where users pick their own chat bubble colors. You can make the backend private by connecting it to your own . This app features the clone and device time blocks.
Cities are an increasingly popular place to live and work but navigating them can be a challenge. Here are a few apps that aspire to make that simpler.
Designed for your work and holiday travel, translator is an app that translates English text and speaks it aloud into 93 languages in the world.
The highest performing teams are said to be ones full of trust, empathy and psychological safety. Here are a few apps that may help your favorite teams build these important qualities.
Designed for teams that are spread out across different parts of the world, this simple app helps you quickly keep track of the external conditions that may be affecting your colleague's work and mood. At the very least, it may enable you to avoid talking about the weather and onto more important things. Customize for your team by editing the information in the OfficeDB component. The app pulls the latest temperature from the Open Weather Map API and as a bonus the latest traffic from Google Maps. There is a limit of 60 calls per minute in the free tier of the Open Weather Map API.
Work Credit is a team counting app for thankless tasks. The app shares data for the team in a private Firebase realtime database account so Thunkers looking to create one for their team will need to set one up. Work Credit has really transformed how our office works at Thunkable -- no longer are thankless tasks thankless. The winner each week gets to pick out our lunch destination on Friday (which is quite an honor)
#cloudvariables#firebase
For managers out there, here's a helpful set of questions to guide your next 1:1 meeting from Mark, the beloved VP of engineering at Thunkable. For our team, this app is a great way for best practices to quickly spread throughout an organization. You can easily customize the questions by simply editing the question in the local database.
#localdb#accelerometer
Starting your own business is a gratifying endeavor but most new business don't make it for the long haul. Here are a few apps that can help support the businesses that you love
Simple website wrapper app with a multi-image branding screen, a social media bar that opens a deep link to a user's installed apps that works across platforms. If you are a PRO member, you can add push notifications to notify app users of ongoing sales. Check out our free tutorial in the to make one for the business that you love.#webviewer#timer#push notifications
Mobile games and puzzle apps are not just a great form of entertainment in those in between moments but they also great mediums for monetizing your app with ads.
Beaver Bingo is a simple puzzle app that we think is great for parties. Party goers take photos of the items in the nine boxes, which together reveals a hidden message. The app features the Image Recognizer component from Microsoft. No goats were harmed in the making of this app.
#imagerecognizer#microsoft#camera#sound#timer
If you've ever played a board game or an RPG then you know what dice are. You also probably know easy they are to lose or misplace. With this app you can create and customize as many dice and sound effects as you like so that they're never more than a click away. There's a free tutorial in the all about how this app was made. This app also shows an Interstitial every time the dice shows 5.
#accelerometer#admob
Contain: The entire image will be scaled down to fit inside the button, without changing the height and width ratio of the image
Stretch: The image's height will change to fill the button length-wise
Repeat: Repeat the image to cover the button. The image's height and width ratio will not change
Center: Positions the image in the middle of the button
Visible: To see the button in your app, set the switch to true
Border
Width: Enter how wide you want the border outline of the button to be
Color: Pick a color for the border of the button
Style: Select if you want the border to be a dotted, dashed or solid line
Radius: Enter how round you want the edges of the border for the button to be
Font Bold: To make the text on the button bold, set the switch to true
Font Italic: To make the text on the button italic, set the switch to true
Raised: To cast a shadow around the button, set the switch to true
Disabled: To prevent the button from performing an option when it is clicked, set the switch to true
Absolute size - Sizes the button to a specified number of pixels
Absolute - Sizes the button to a specified number of pixels
Repeat
Center
"Fill Container"
"Fill Container"
Uploading a custom font file is available to accounts with Business and Enterprise plans.
Check out our pricing page for more information about these plans
The app welcome screen is inspired by the Japanese artist Yayoi Kusama
Its's not always raining in Dublin
Give your favorite Thunkable some work credit!
This guide is a really good baseline for your next 1:1 conversation
Notify your most loyal customers of sales with push notifications
We played this game at our office Open House and it was interactive!
If you don't have a dice handy, this app is basically the same thing, down to the motion
Data Sources
The Data Sources blocks allow you work with the information that you have stored in your connected Airtable Bases, Google Sheets or Local Tables.
The Data Sources blocks allow you to perform a variety of CRUD (Create, Read, Update, Delete) operations on records that you have stored in Airtable, Google Sheets or Local Tables.
Add a Data Source to your App
To access the Data Sources blocks you need to add a Data Source to your app. There are two ways to do this:
Click on the ⊕ icon in the Data Sources section of your component tree:
In the modal that appears, you can choose a previously connected Data Source, or add a new Data Source.
When adding a new Data Source, you can choose between , or as the source of your data.
Open a data source.
Click Add Filter View.
Add one or more filter rules.
Click Create Filter View.
Select the Filter View in a data viewer's properties panel.
Open a data source.
Click on a Filter View.
ClickSort icon.
Select column.
Select Ascending or Descending.
Start by naming your data source.
You can now see this Data Source from your Data Sources section. Click on the Data Source name to edit it.
The data editor allows you to edit, add, and delete columns of information. To change any of the individual values simply click on the cell and type whatever you like.
Connect Your App to Airtable by OAuth
Click Connect to Airtable.
In Thunkable, click the data icon in the left side panel to access your data source library.
Click the plus sign at the top of the panel.
Click Grant access.
Select the correct base from the dropdown menu.
Indicate if you'd like to use a custom view. Learn more here: .
Click Create.
If your app uses web API blocks to communicate with Airtable, you must also incorporate the "authorization header for" block into your app. This block retrieves a valid token that can be used as the authorization header in web API blocks.
To use the "authorization header for" block:
Ensure your project is connected to an Airtable data source by OAuth.
Navigate to your project's blocks tab.
Under the App Features heading, click Data Sources.
In Google Sheets, the entire document is considered to be the data source.
In order to use a Google Sheet as a Data Source, the first row in your Sheet must be a header row.
Your Google Sheet must be for Thunkable to access its data.
To connect a Google Sheet, sign in and grant permission for your Thunkable project to access your Google Drive.
Once you have allowed this, you will see a list of spreadsheets in your Google Drive. If you don't seen the sheet you are looking for you can switch to list view, sort alphabetically or search for the one you need. Click Select to return to your Thunkable project.
At this time, connecting to .xlsx files that are hosted on Google Sheets is not supported. You can convert your .xlsx file to a Google Sheet before connecting it to your Thunkable app project. Simply open your .xlsx file on Google Sheets, then click File > Save as Google Sheets.
The create row inblock allows you to append new rows to the end of your data tables.
The inputs are dynamic so if you change the name of Column 1 or Column 2 in the designer these changes will be reflected in the block too.
There is a second create row in block which allows you to add a row in your data source using an object. The field is the column name and the cell info is the value you would like to set.
The get value from blocks allows you get read one value from a specific cell in your data table. You can specify the column name and the view in the block itself and pass the unique row id as an input.
Get row object will return the row object of the specified row ID. The row object can be used with
The get row object from block returns the row object of the first row that meets the specified condition. You can specify the column name and condition in the block itself and pass the value as an input. The row object can be used with
The list of values in block allows you to read an entire column of data from a table and returns it as a list that you can then manipulate with the built-in .
The number of rows in block returns an integer corresponding to how many rows are in a given table.
The columns in block returns the column names of a data source.
The update value in block allows you to modify or update an existing cell in your data source. The column name and view are specified in the block itself. The row id and new value are passed as inputs.
There is a second update row in block which allows you to update a row in your data source using an object. The field is the column name and the cell info is the value you would like to set.
You can use the Delete Row block to delete a row of data from your Data source.
The row id is passed as an input.
If there is an error, the error message is passed as an output.
You can use the delete all rowsblock to delete all rows in your data source.
If there is an error, the error message is passed as an output.
The update filter forblock allows you to edit the value for each condition within a specific view of your data source.
Screen
When building apps on Thunkable, Screens function like blank pages in a book. They allow you to display different components and information.
Video Tutorials
Appearance and Layout
Space Elements Horizontally
The Horizontal Alignment property allows you to space elements in a Screen horizontally
Space Elements Vertically
The Vertical Alignment property allows you to space elements in a Screen vertically
This determines how to resize the image when the frame doesn't match the raw image dimensions.
Cover: Fills the entire screen without changing the height and width ratio of the image
Contain: The entire image will be scaled down to fit inside the screen, without changing the height and width ratio of the image
Stretch: The image's height will change to fill the screen length-wise
Thunkable allows you to reuse a screen, and its associated blocks, in multiple projects with the "Save to My Screens" feature. You can find the save screen button at the top of the properties for every screen component in your app.
It's important that when you save your screen you use a descriptive and memorable name that describes what your screen does. The example below is for a sign in screen, which is something that often get reused across multiple projects.
Once you've saved a screen, any time you click the + button to add a new screen you will be given the option to add a blank screen or to "Copy from My Screens".
Simply choose the screen that you want to add in and click the "Copy" button to proceed.
Image Recognizer
Upload image to Microsoft Image Recognizer and get a result
This component is powered by Microsoft Azure. You can get your own server URL and subscription key for Microsoft Azure here. You can add these details to your app in the Project Settings panel, which you can access by clicking on your app icon.
Blocks
Upload
Inputs
Name
Data Type
You can select from previously added data sources or add a new data source. Click Create New.
Select Airtable.
Click the OAuth tab.
An Airtable authorization screen opens.
Click + Add a base.
Select the bases you want to authorize access to.
Refresh your page to ensure the data is reflected in web preview or via the Thunkable Live app.
Drag and drop the "authorization header for" block into your workspace.
Use the block's dropdown menu to ensure the correct data source is selected.
Adding a New Data Source
Add Filter View
Sort
Create your Own Table
Airtable
Select all the bases you want your Thunkable projects to have access to. This includes any bases you've previously connected by API key, as well as any new bases you want to connect to Thunkable.
If you are connecting by OAuth for the sole purpose of migrating your connection from API Key and are not creating a new data source, you are done. The following steps only apply when creating a new data source.
Authorization Header For Block
This block is only necessary for Creators who use web API blocks to communicate with Airtable.
Google Sheets
Some users have reported issues connecting to Google Sheets if they are using G Suite for Education accounts. You may need to contact your G Suite administrator to review your security settings.
Looking to reset your Google Sheets connection? for instructions
Data Source blocks
Create
Read
The valid id types are index and unique id. The index refers to the row by its integer position (1 for the first row, 2 for the second row, etc.) and must be greater than zero.
Repeat: Repeat the image to cover the screen. The image's height and width ratio
will not change
Center: Positions the image in the middle of the frame
Property
Description
Background Color
Default (none). Select any color using the color picker, RGBA or HEX value
Background Picture
You can upload a background image to your app or reference an image url e.g.beaver-yellow.png
Property
Description
Scrollable
Default (false). Indicates whether the screen is scrollable. For scrollable to work, the components in your screen must have heights either set in absolute pixels or set to fit contents
Property
Description
Screen Orientation
Default (all). You can fix the screen orientation to portrait and landscape
Property
Description
Show StatusBar
Default (true). If set to false, hides the top status bar
Property
Description
StatusBar Style
Choose between default , light-content or dark-content to set the theme or style of the status bar
Property
Description
Translucent StatusBar
Default (false). Set to true to make the Status Bar translucent. Android-only.
Property
Description
StatusBar Color
Default (0,0,0,0.53). Select any color using the color picker, RGBA or HEX value. Android-only.
Event
Description
Starts
Fires when the Screen is first opened
Event
Description
Opens
Fires anytime the Screen is opened
Event
Description
Closes
Fires anytime the Screen closes
Event
Description
BackButtonPressed
Fires when the physical or on-screen back button is pressed. (Android only)
Function
Description
ToggleDrawerMenu
Opens or Closes the drawer menu, if available. Must be used in conjunction with the
Add a Background Color or Picture
Background Picture Resize Mode
Enable Scrolling
Set Orientation
Status Bar
Hide (or show) Status Bar
Status Bar Theme
Status Bar Opacity
Please Note: The Translucent StatusBar property will only work on Android devices at this time.
Status Bar Color
Please Note: The StatusBar Colorproperty will only work on Android devices at this time.
Save Screen
Name Your Screen
Add a New Screen
Choose a Saved Screen
Screen Blocks
when Screen1 Starts
when Screen1 Opens
when Screen1 Closes
when Screen1 BackButtonPressed
in Screen1 call ToggleDrawerMenu
image
Image
Name
Data Type
Data
tags
List
Tags used to categorize the image
description
Outputs
Text
Description of the image
confidenceLevel
Decimal
Value between 0 and 1 describing confidence that the description and tags are correct
AdMob is the most popular ad network for monetizing mobile apps today. Apps with large audiences can use AdMob to not only generate revenue for the creator but in some cases (like with AdMob Rewarded Video), create better user experiences than the alternative (e.g. in-app purchases to play a new game level).
We highly recommend that you only add ads to your app after you have a large audience of users (otherwise, you won't generate much revenue anyway).
AdMob may only be available for Creators on certain Thunkable plans. Please refer to our pricing page for more information: .While all Thunkers can add AdMob to their app projects and live test the ads in their apps, only Builder or Advanced Thunkers can download and publish apps with AdMob.
All apps must be approved by Thunkable subject to our . If you are a Builder or Advanced Thunker, you can . Once approved, apps can be downloaded and published without further review.
Thunkable reserves the right to change an app's approval status subject to any violation of our guidelines.
Getting Started
You need an AdMob account to show ads in your project.
Default value: "This identifier will be used to deliver personalized ads to you."
Thunkable has partnered with AdMob to ensure that apps created on our cross-platform use ads to monetize apps in a way that both provides high quality traffic to advertisers and a high quality user experience for end users of apps.
All apps with AdMob must be first approved by Thunkable before they can be downloaded or published. AdMob has its that an app must comply with including but not limited to:
Inappropriate content that advertisers do not want to be associated with e.g. copyrighted, adult
Invalid activity that lowers the quality of traffic to advertisers e.g. ad placements that encourage clicks
Thunkable will review apps for compliance with AdMob policies but will specifically reject apps that are:
Incomplete apps - apps that are still in their early stages and won't show how ads will be used in the app
Earning apps - apps that encourage users to clicks ads in exchange for some form of payment
Auto-impression apps - apps that repeatedly load banner ads in the background of apps
Once approved, apps can be downloaded and published without further review.
Thunkable reserves the right to change an app's approval status subject to any violation of our guidelines.
AdMob banner ads are the simplest ad format to implement and are recommended for beginners.
That's it. There's no blocks needed.
The first banner ad will load when ready and will reload a new ad every minute.
Interstitial ads are recommended after a user has completed a task in your app. We don't recommend showing an interstitial ad right after the app opens and the user has not spent any time in your app.
To show an interstitial app, you need to first add the component and then add the Show Ad block after the appropriate event in your app.
You can set the following as properties of your Interstitial ad:
The Name of the AdMob component
The Ad Unit ID (Android)
The Ad Unit ID (iOS)
Use the when Ad Open and when Ad Close blocks to trigger events to happen when the interstitial ad opens or closes.
Use the Show Ad block to show an interstitial ad in your app. If there is an error, the error block will catch and return it.
Use these blocks to set and get the Android Ad Unit ID of your interstitial ad.
Use these blocks to set and get the iOS Ad Unit ID of your interstitial ad.
Use these blocks to set and get the Test Mode status of your interstitial ad.
Rewarded video ads are recommended after a user has completed a heavy task in your app and would be willing to watch a long video to continue.
To show a rewarded video app, you need to first add the component and then add the Show Ad block after the appropriate event in your app. You'll then want to add a Reward User event to reward your user in the app.
You can set the following as properties of your Rewarded Video ad:
The Name of the AdMob component
The Ad Unit ID (Android)
The Ad Unit ID (iOS)
Use the when Ad Close block to trigger events to happen when the interstitial ad closes.
Use the Show Ad block to show the ad video, and the Reward User block to reward the user after displaying the video.
Use these blocks to set and get the Android Ad Unit ID of your Rewarded Video Ad.
Use these blocks to set and get the iOS Ad Unit ID of your Rewarded Video Ad.
Use these blocks to set and get the Test Mode status of your Rewarded Video Ad.
For your convenience, we have provided a test Ad Unit ID for you to see how a particular ad format may appear in your app.
During live test, all AdMob ads will be set to test mode = true, which means clicks and impressions will not be counted. This is true even if you add your own Ad Unit ID and set test mode = false.
All apps with AdMob must be approved by the team at Thunkable ().
Once approved, apps can be downloaded and published without further review.
Thunkable reserves the right to change an app's approval status subject to any violation of our guidelines.
To set your ads live, you'll need to first. Once you have created your account, you'll need to set up an app and create an Ad Unit ID. (It may take up to an hour for Ad Unit ID to be activated and start showing ads)
Below is a visual walkthrough of the steps after you have created your AdMob account:
To protect the integrity of your account, we have by default set test mode = true.
When you are ready activate your ads when you download or publish, you'll simply need to set test mode = false.
With iOS 14.5, your app users will be asked if they consent to an advertising identifier being used to show them personalized ads. This is what the dialog looks like:
You can set a personalized Tracking Usage Description in your .
If this permission is declined, your app will still show ads. These will be more generic ads and won't be targeted at the user.
If the user has turned off the Allow Apps to Request to Track property in their device settings, this permission will be declined by default and they will not see this dialog.
If you are not seeing ads appear in your app, it may be due to the following reasons:
Your AdMob account has been disabled due to a policy violation. Please sign in to your AdMob account
Your AdMob component property test mode = true. To activate, you'll need to flip the switch to test mode = false
Your
Push Notifications by One Signal
Overview
Push notifications are one of the biggest advantages of mobile apps over mobile websites since they can send messages to users without the app being open.
When a user first opens an app with push notifications enabled they receive an alert prompting them to enable push notifications. Once they accept they are a subscriber of your app's push notifications.
Thunkable + OneSignal
Thunkable utilizes the services of OneSignal to facilitate push notifications from your app. OneSignal is a free service that supports unlimited devices and notifications. You can learn more about their features here: OneSignal pricing page.
One Signal is the world leader in push notifications and they offer their service for free.
To send push notifications to your app's users, you must link your Thunkable app to your OneSignal apps (iOS and/or Android). Once you've added your OneSignal App IDs into Thunkable, the work in Thunkable is done, and the remainder of the management takes place in third-party platforms (OneSignal, Apple Developer, and Firebase, depending on the platform).
This feature may only be available for Creators on certain Thunkable plans. Please refer to our pricing page for more information: .
Push notifications are one of the biggest advantages that mobile apps have over mobile websites, since they can send messages to users without the app being open.
However, annoying notifications---those that are irrelevant and too frequent---can be dismissed or blocked easily. We highly recommend sending notifications only when the content is relevant to the user. Examples of this include an e-commerce app notifying users of a sale, or a game notifying users of new levels and features.
To add Push Notifications to your app :
Drag and drop the component onto any screen.
That's it. There are no blocks needed.
Click Push Notification at the bottom of the screen
The Push Notification settings modal opens. This is where you will enter your OneSignal Android App ID and OneSignal iOS App ID to configure the connection between OneSignal and your Thunkable project.
Property
Description
Data Type
OneSignal allows you to push messages to users in certain locations. You will need permission from your end users to register their location to use this feature.
You can toggle whether you request geolocation permissions from your end users in the Push Notifications settings panel.
The remainder of this document will assist you with:
Go to.
Click Sign Up.
Create your account and complete the OneSignal onboarding.
If you didn't create an app as part of the OneSignal onboarding, navigate to your OneSignal dashboard and click + New App/Website.
Enter your app name. We recommend including the platform in your app name, for example, Employee Directory - Android or Employee Directory - iOS.
Select Apple iOS (APNs) or Google Android (FCM).
Click Next: Configure Your Platform.
Follow the platform-specific configuration instructions below:
A Google Service Account is a special type of account from Google that applications use to make authorized calls to a variety of APIs, including Firebase Cloud Messaging APIs. For more details, see Google's own . In order to send push notifications to Android devices, you will need a Service Account to generate a private key for OneSignal to utilize.
If you don't already have one, create aaccount. Instructions for getting started with Firebase are available here: .
Follow OneSignal's instructions to generate Firebase Cloud Messaging API Credentials for sending Android App Notifications here: .
Select Native Android as your target SDK.
Copy Your App ID.
In the Android App ID field, paste Your App ID that you copied from OneSignal in step 3.
Click the Live Test on Device icon and open the Thunkable Live app on your device.
Return to your OneSignal tab.
Click Check Subscribed Users.
If the configuration is successful, you will see a congratulations message.
Click Done.
To test Android push notifications, download the app to your Android device and send a test message through OneSignal to see the push notification in action.
OneSignal is a powerful choice of push provider. With their platform, you can setup for your users to be pushed notifications . This is optional, however. This also means you need to make a conscious decision as to whether or not to track your Android users geographical locations. These tracking data can be accessed via the OneSignal dashboard.
This feature can be toggled on and off in the Push Notifications settings by clicking on the icon at the bottom of your design screen.
Follow OneSignal's instructions to generate a p8 certificate: .
When you get to the section titled "Provisioning Profiles," return to these instructions.
In your Apple Developer account, select Identifiers under the Certificates, IDs & Profiles heading.
Select your app from the list of Identifiers.
Scroll down the list of app capabilities, and place a checkmark next to Push Notifications.
Access your Apple Developer account’s .
Select your app from the list of Profiles.
Click Edit.
In OneSignal, select Native iOS as your target SDK.
Click Save & Continue.
Copy Your App ID.
Return to the Blocks tab of your Thunkable project. Do not close the OneSignal tab.
Click on the icon at the bottom of your design screen to open the Push Notifications dialog and paste this ID into the iOS App ID field.
You require a new provisioning profile with push notifications enabled to publish to the App Store. See OneSignal's instructions here: .
To test iOS push notifications, you have to publish to TestFlight. This requires the provisioning profile with push notifications enabled.
Once you have your platforms configured in OneSignal you can create and sent push notifications to your app's users. Follow OneSignal's instructions here: .
The first time your app is opened on a new device, it is automatically assigned a unique push notification user ID. This block returns the user's push notification user ID that can be used to send a notification to a specific user with a web API call.
Recommended for
Single-screen apps
Multi-screen apps
Multi-level games
Limit
1 per screen
1 per app
1 per app
Whether Test Mode is enabled for this ad component
Whether Test Mode is enabled for this ad component
Ad Unit ID
has not yet been activated. This may take up to a few hours
You have entered the App ID or the Publisher ID instead of the Ad Unit ID which begins with ca-app-pub-xxx
Please check the mobile device internet connectivity or disable ad blockers on the mobile device
Your setup is correct. The issue is that AdMob does not always have an ad to return for every request. This may happen particularly if you have just registered your AdMob publisher ID, as it takes some time and multiple requests before the new ID starts returning ads
Banner ads are rectangular image or text ads that occupy a spot within an app's layout. They stay on screen while users are interacting with the app, and can refresh automatically after a certain period of time. If you're new to mobile advertising, they're a great place to start.
Interstitial ads are full-screen ads that cover the interface of their host app. They're typically displayed at natural transition points in the flow of an app, such as between activities or during the pause between levels in a game. When an app shows an interstitial ad, the user has the choice to either tap on the ad and continue to its destination or close it and return to the app.
Drag and drop the component onto any screen. You may need to re-position banner ad to the bottom or top of the screen using the Vertical Alignment property of the Screen.
Enter your Ad Unit ID into the properties panel of your AdMob component. Make sure you enter the right Ad Unit ID for the appropriate ad format
Geolocation Enable (Android Only)
Toggle whether your end user is asked for permission to share their location
Select your app from the list of Identifiers again.
Scroll down the list of app capabilities, until you get to Push Notifications again.
Click the associated Configure button.
Under Production SSL Certificate, click Create Certificate.
Under Upload a Certificate Signing Request, click Choose File.
Select the Certificate Signing Request (CSR) you downloaded from Thunkable as part of the publishing process.
Click Continue.
Click Download to download your iOS certificate.
Click Save.
Click Download
Android App ID
App ID for Android from OneSignal
Text
iOS App ID
App ID for iOS from OneSignal
Push Notifications cannot be tested with the Thunkable Live app on iOS
You can test Push Notifications on iOS by publishing your app to TestFlight and downloading it from there.
Add Push Notifications to your app
Properties
Geolocation Permissions
Create a OneSignal Account
Create a OneSignal App
If you intend to send push notifications to your app's users on Android and iOS you will need to create a new app in OneSignal for each, Android and iOS.
Android Configuration
To continue sending messages in 2024, you need to provide updated authentication credentials from Firebase for all apps created in OneSignal before September 1, 2023:
In your Firebase project, go to Project settings and the Service accounts tab to download your private key JSON.
In your OneSignal App Settings, upload the private key file you just downloaded
More information on these steps is available here: .
Android Testing
Toggle Location Permission (Android Only)
If you enable Geolocation Permissions, when you publish your app, ensure that you indicate that you're tracking location when you publish your app.
Great data is an essential part of many apps built today and the Web API component enables apps to retrieve data from any public or private API (application programming interface) service on the web. For more advanced developers who have write access to a private API, this component also enables you to upload and delete data.
For most public APIs, you'll likely have to first create an account to get your own unique API key. This is usually to prevent individuals from making too many requests or to charge developers when they exceed certain free limits.
Properties
Once you have the API key, you'll need to enter the unique URL into the property field of the Web API component
URL, Query parameters, Body, and Headers can be set in the blocks editor.
Set the URL to the selected API. You can also connect a Text block or variable to set the URL.
Returns the URL of the selected API.
You can add any property: value pair you want. You can add as many parameters to your API properties as you need, but each parameter has to be added one at a time.
In the blocks editor, it is possible to use the create object block to add multiple property: value pairs simultaneously.
In addition to creating your own objects, it is also possible to use JSON to specify the property: value pairs for your query parameters or headers.
Returns the Query Parameters of the selected API.
Set the Body of the selected API. You can connect a generate JSON from object block or a Text block.
Returns the Body of the selected API.
Set the Headers of the selected API. You can connect a create object block.
Returns the Header of the selected API.Comment
To retrieve data from an API, you simply need to use the Get block.
Most APIs will return data in JSON format, so we'll take a few moments to walk through a few examples of how to parse this data using our blocks
You can find a working example of this in the sample app, .
One of the most common output formats for APIs is JSON, short for Javascript Object Notation. The Open Weather Map API returns a JSON file like the one below.
In your JSON response, objects can be found within the " quotes " followed by a colon :. The properties of the object is follows the colon : but is within the { curly brackets}.
In the example above, "base", "dt", "id", "name" and "cod" are simple properties of the JSON response. "coord" , "main" , "wind", "clouds" and "sys" are properties of the overall response, but each of these properties is also an object with properties of its own, or contained within the {
The first step in parsing this response is converting the JSON response to an . Objects have properties (like name) that we can retrieve and display in our app. Objects can be embedded within another object.
Once you have converted the JSON into objects, you can then specify the objects and property that you are interested in. To get the name of the city we are viewing weather data for ("name": in line 22), we'll want to get the property name of the response:
If we wanted to get the temperature in Dhaka from the Open Weather API above, we would need to do the following:
Convert the JSON response to an object
Get the property main of the response object
Get the property temp of main
We can write this as getting the property main.temp of the response object:
You can read about getting nested values from Objects .
You can read about getting nested values and values from lists in Objects . Let's work through an example.
You can find a working example of this in the sample app, .
The JSON output of the Google Maps Distance Matrix API seems similar to the Open Weather Map API with one notable exception: it includes multi-item lists. Lists are items bounded by [ square brackets ].
If you want to retrieve the "text" property in line 13, you'll have to:
convert the JSON to an object
select the "rows" property of the object
select the first item in the list
You can see the example below for how this would look using the and blocks
This can also be written as the property rows[1].elements[1].duration.text of the response:
Uploading and deleting data is usually reserved for a private API that you or your organization owns
You can also post and receive messages between a web page and a using the Post Message function. Read more about that .
Bluetooth Low Energy
Bluetooth Low Energy, or BLE, is used to wirelessly connect two devices to one another. The BLE component allows you to find and connect to BLE devices and to communicate directly with them.
This function is used to scan for nearby BLE or Bluetooth enabled devices. Scanning happens for 10 seconds. Once scanning has successfully completed then a list of the available device ids and a list of available names will be returned. If the scanning function can not be completed then an error will be returned.
Text Input
The text input allows the person using your app to type in anything that they want such as words, passwords or numbers.
You can choose from the following types of keyboards:
Default keyboard: Displays your device’s default keyboard
Email Address:
curly brackets
}
.
"weather"
is a one-item list which also contains an object.
select the "elements" property of the rows object
select the first item in the list
select the "duration" property of the elements object
select the "text" property of the duration object
Performs an HTTP PATCH request using the Url property and retrieves the response. Reports status of request and if request does not go through, will report an error
The url for the web request which usually contains an API key
Required
Query Parameter
Specifies some parameters of the data
Optional
Body
Body of your API call
Optional
Headers
Specifies some meta-data, eg: usernames and passwords
Optional
Event
Description
Get (response, status,error)
Performs an HTTP GET request using the Url property and retrieves the response. Reports status of request and if request does not go through, will report an error
Performs an HTTP PUT request using the Url property and retrieves the response. Reports status of request and if request does not go through, will report an error
Post (response, status,error)
Performs an HTTP POST request using the Url property and retrieves the response. Reports status of request and if request does not go through, will report an error
Event
Description
Delete (response, status,error)
Performs an HTTP DELETE request using the Url property and retrieves the response. Reports status of request and if request does not go through, will report an error
Returns a list of the IDs of the available devices
Device Names
List
Returns a list of the names of the available devices
Device RSSIs
List
Returns a list of the signal strengths (in dBm) for the available devices, measured relative to 1 milliwatt
error
String
Returns an error message from the function
Example
The Location Sensor returns a list of names of the available BLE devices which can be connected to a Simple List.
The Connect to Device Id function allows your app to connect to a BLE enabled device based in the Id of that device.
Parameter
Type
Description
Device Id
String
Expects a text string with the device id you want to connect to
Device Name
When you know the name of the BLE device that you want to connect to you can use the Connect to Device Name block to connect directly to it. Please note that device names are not unique and it is relatively easy to change the name of a BLE device.
Parameter
Type
Description
Device Name
String
Expects a text block with the name of the device to connect to
Device Id
Example
Present the list of names of the available BLE devices in a simple list allowing users to connect on the device they click using the Connect to Device Name block and connect it to the item block.
Input Name
Data Type
Description
characteristic UUID
Text
Expects a text block with a 32-bit UUID for the BLE type, service or profile required
data
array () of bytes
Output Name
Data Type
Description
error
Text
If an error message is returned, returns the error. Else returns null
Output Name
Type
Description
data (string)
Text
Returnsa string containing the information received from the BLE device
data (byte array)
array () of bytes
To receive data from a BLE device, capable of sending data to another device as notifications, you need to use the Subscribe To Characteristics function in your app. This function allows you to listen to updates from the peripheral device by subscribing to its characteristics and receiving data through the "notify" method.
To use this functionality, ensure your app is already connected to the desired Bluetooth device.
Input Name
Data Type
Description
characteristic UUID
Text
Expects a text block with a 32-bit UUID for the BLE type, service or profile required
Output Name
Type
Description
error
Text
If an error message is returned, returns the error. Else returns null
If you are connected to a BLE device that is capable of sending data to another device using the "notify" method and you have already subscribed to a characteristic then you need to use the Characteristic Change function in your app. This block alerts you whenever the characteristic value changes on the peripheral (server) device. Data from the BLE device may be received in either String or Byte format.
Ensure that you have subscribed to the characteristic to use this block.
Set something to happen when the Characteristics Change.
Output Name
Type
Description
data (string)
Text
Returnsa string containing the information received from the BLE device
data (byte array)
array () of bytes
Example
Connect to a specific device using Device ID. Subscribe to a characteristic using characteristic UUID and set the new data to labels when the characteristics change.
If connected to another Bluetooth device, this block will disconnect your app from the device.
If you have a BLE device that is capable of sending data to another device then you will need to use the Receive String function in your app in order to listen to, or receive, data coming from the BLE device in String format.
You need to be connected to another Bluetooth device in order to use this block.
Input Name
Data Type
Description
characteristic UUID
Text
Expects a text block with a 32-bit UUID for the BLE type, service or profile required
Output Name
Type
Description
data (string)
Text
Returnsa string containing the information received from the BLE device
error
Text
If you have a BLE device that is capable of sending data to another device then you will need to use the Receive Byte Array function in your app in order to listen to, or receive, data coming from the BLE device in Byte Array format.
You need to be connected to another Bluetooth device in order to use this block.
Input Name
Data Type
Description
characteristic UUID
Text
Expects a text block with a 32-bit UUID for the BLE type, service or profile required
Output Name
Data Type
Description
data (byte array)
array () of bytes
Returnsa byte array containing the information received from the BLE device
error
Text
This asynchronous function listens for when your device disconnects from a named Bluetooth device.
You can program some events to happen when your device disconnects from the named device in the then do section of this block.
Input Name
Data Type
Description
Device Id
Text
Unique ID of the bluetooth device to listen for disconnection with
Output Name
Data Type
Description
error
Text
If an error message is returned, returns the error. Else returns null
Use this block to send data as a string of text to a BLE device.
You need to be connected to another Bluetooth device in order to use this block.
Input Name
Data Type
Description
characteristic UUID
Text
Expects a text block with a 32-bit UUID for the BLE type, service or profile required
data
Text
Output Name
Data Type
Description
error
Text
If an error message is returned, returns the error. Else returns null
Use this block to send data as an array (list) of bytes to a BLE device.
You need to be connected to another Bluetooth device in order to use this block.
Input Name
Data Type
Description
characteristic UUID
Text
Expects a text block with a 32-bit UUID for the BLE type, service or profile required
data
array () of bytes
Output Name
Data Type
Description
error
Text
If an error message is returned, returns the error. Else returns null
Use this block to send data in hexadecimal format to a BLE device.
You need to be connected to another Bluetooth device in order to use this block.
Input Name
Data Type
Description
characteristic UUID
Text
Expects a text block with a 32-bit UUID for the BLE type, service or profile required
data (hexadecimal)
data in format
Output Name
Data Type
Description
error
Text
If an error message is returned, returns the error. Else returns null
Use this block to send data in base64 format to a BLE device.
You need to be connected to another Bluetooth device in order to use this block.
Input Name
Data Type
Description
characteristic UUID
Text
Expects a text block with a 32-bit UUID for the BLE type, service or profile required
data
data in format
Output Name
Data Type
Description
error
Text
If an error message is returned, returns the error. Else returns null
Parameter
Type
Description
BLE functionality can't be tested with the Thunkable Live app on iOS.
To test the BLE functionality in your app on iOS, please download your app.
Blocks
Scan
Description
Connect to Device Id
Connect to Device Name
Outputs
Subscribe To Characteristics
Inputs
Outputs
Characteristics Change
Outputs
Disconnect
Receive String
Inputs
Outputs
Receive Byte Array
Inputs
Outputs
Listen for Disconnection
Inputs
Outputs
Transmit String
Inputs
Outputs
Transmit Byte Array
Inputs
Outputs
Transmit Hexadecimal
Inputs
Outputs
Transmit Base64
Inputs
Outputs
All values (string, HEX, Byte array, Base64) are being converted to a byte array before sending.
Displays an alphanumeric keyboard to accept email addresses
Numeric: Displays a keypad with only numbers; It is similar to the phone pad keyboard
Phone Pad: Displays a telephone keypad; It is similar to the numeric keyboard
You can also set up Text Input for passwords as shown below using the Secure Text Entry Switch. This switch will replace text with * as users type.
To activate Secure Text Entry, look for the Text Input Style properties and make sure that the Secure Text Entry switch is set to true.
You can customize the Text Input component with the following properties:
Hint: Hint text that disappears when the user starts typing into the Text Input
Text: Text that appears on the text input
Visible: To see the text input in your app, set the switch to true
Border
Width: Enter how wide you want the border outline of the text input to be
Color: Pick a color for the border of the text input
You can set how tall the text input is using the Height property and set how wide the text input is using the Width property.
Height
Fill container - The text input fills the entire screen vertically
Fit contents (Recommended) - The text input’s height changes to fit the contents it contains
Relative size - The text input fills the specified percentage of the screen
Absolute size - Sizes the text input to a specified number of pixels
Width
Fill container - The text input fills the entire screen horizontally
Fit contents - The text input’s width changes to fit the contents it contains
Relative size - The text input fills the specified percentage of the screen
Absolute - Sizes the text input to a specified number of pixels
You change the spacing and positioning of the text input with the Margin and Padding properties.
Margin
You can specify how much space you want between the edges of the text input and the screen using either pixel or percent values.
Padding
You can specify how much space you want between the border and the contents of the text input using either pixel or percent values.
This event fires when the user clicks on the Text Input component.
This event fires when the component looses 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 every time a character is added or removed to the Text Input.
The border width value corresponds to the size of the border around the Text Input. Changes to the color and style of the border must be done in the designer.
The set and get height blocks work with the Height property of the Text Input component. Acceptable input values are.
Number of Pixels
Percentage Height
"Fit Contents"
"Fill Container"
The Computed Height block returns the on-screen dimensions of the Text Input, after it has been rendered on the device screen. The value returned is an integer, representing the size of the component, in pixels.
The set and get hint work with the prompt that is displayed in the Text Input, before the user starts typing. Any string of text or number can be used as the hint.
The set and get keyboard type property gives you control over what version of the keyboard is displayed on-screen when the user starts typing. Acceptable values are:
default
email address
numeric
phone pad
The set and get text property works with the string of text that displayed in the Text Input.
The set and get visible blocks are used to show or hide the entire Text Input component. Acceptable values are:
True
False
The set and get width blocks work with the Width property of the Text Input component. Acceptable values are.
Number of Pixels
Percentage Width
"Fit Contents"
"Fill Container"
The Computed Width block returns the on-screen dimensions of the Text Input, after it has been rendered on the device screen. The value returned is an integer, representing the size of the component, in pixels.
For iOS, you have the option to choose between Apple Maps or Google Maps. On Android, only Google Maps is available. Google Maps provides more custom style options from different map types to coloring and exposing or hiding map features.
Properties
Add Google Maps API Key
You can live-test your app without adding your unique Google Maps API keys, but you need to add them if you want to download or publish your app.
Generate a Google Maps API Key
To generate your personal Google Maps API key, you need to:
Create a Google Cloud project for your app.
Create a billing account or enable billing for the project.
Click Enable to enable the Maps SDK for Android or Maps SDK for iOS.
Select Enable all Google Maps APIs for this project.
Copy the provided API key.
For more detailed instructions, please see here: .
Once you've generated your Google Maps API keys, you can add them to your Thunkable project. Click the gear icon at the top of the components tree on your project's designer tab to access your . Scroll to the Google Map Settings section and paste your Android and iOS API keys into the corresponding fields.
There are a number of Advanced properties available to help you add custom styling to your map. Below are the most popular.
For more information on sizing in your app, please see our
For more information on adding spacing in your app, please see our
To find the spacing properties, you'll have to select the Advanced tab
The map has several events. You can trigger actions to happen when these events occur.
This event happens when the Map has loaded in your app.
This is a good time to add any markers, polylines or polygons to your app that you want the user to see as soon as your app opens.
This event happens when the location of the user changes. It returns the coordinate object.
You can use to get the properties of the coordinate object.
The coordinate object has the following properties:
{
target: Numeric ID for your app
coordinate:{
latitude: latitude of point selected
longitude: longitude of point selected
}
position:{
x: x-position of selected point on the Map component
y: x-position of selected point on the Map component
}
}
This event happens when the user taps on the Map.
This event happens when the user presses on the map for a longer period of time.
This event happens when the user clicks on a Marker that is on the Map.
The On Marker Press block returns an event object. This is an object which can be used with
The event object has the following properties:
{
latitude: latitude of the selected Marker
longitude: longitude of the selected Marker
}
Adds a generic map marker to your map at the specified latitude/longitude.
This block takes the following inputs:
Input
Description
Data Type
Adds a marker of a selected image to your map at the specified latitude/longitude
This block takes the following inputs:
Input
Description
Data Type
Add a polyline to your map. This is an outline that connects several points on your map.
This block takes the following inputs:
These blocks:
Will produce this polyline:
Note that polylines won't automatically create a closed shape. You would need to add a forth object with the properties latitude: 37 and longitude: -122 to the coordinate input of the addPolyline block above to close this triangular polyline.
Add a polygon to your map. This is a solid shape that connects several points on your map.
This block takes the following inputs:
These blocks:
Will produce this polygon:
Note that the polygon outline will automatically connect the first and last points in the list of coordinates.
You can use the deleteAllMarkers block to delete all from your app.
You can use the deleteAllPolylines block to delete all from your app.
You can use the deleteAllPolygons block to delete all from your app.
Set and get of the Map component.
Returns the height of the Map on the device screen in pixels.
Returns the width of the Map on the device screen in pixels.
You can pair the Map component with a . This helps you show content relevant to the user's location.
These blocks will set the map's latitude and longitude to show the user's location once the map is ready:
Number
Zoom
Zoom level between -15 (most zoomed out) and 15 (most zoomed in)
Number
Number
Visible
Set whether the Map is visible
True/False
Number
Border Color
Color of border (only visible if border width > 0)
Color
Border Style
Set whether border style is solid, dotted or dashed (only visible if border width > 0)
Select from menu
Default (false); if true, shows real-time traffic overlay on the map
Number
position X
X Co-ordinate of selected position on map component
Number
position Y
Y Co-ordinate of selected position on map component
Number
Number
position X
X Co-ordinate of selected position on map component
Number
position Y
Y Co-ordinate of selected position on map component
Number
Title
Title of marker (displayed when marker is clicked)
Text
Description
Description of marker (displayed when marker is clicked)
Text
Pin Color
Color of marker
Color
Title
Title of marker (displayed when marker is clicked)
Text
Description
Description of marker (displayed when marker is clicked)
Text
Icon
Image to use as marker
Dropdown menu (select )
Number
Stroke Color
Color of polyline
Color
Number
Stroke Color
Color of outline (Only visible if Stroke Width > 0)
Color
Fill Color
Color of polygon shape
Color
Property
Description
Data Type
Latitude
Co-ordinate of the map's center on the north-south axis
Number
Longitude
Property
Description
Data Type
Height
Height of Map in pixels
Number
Width
Property
Description
Data Type
Border Width
Width of border around Map in pixels
Number
Border Radius
Property
Description
Map Type Advanced
Default (standard); standard is the classic map style; satellite displays only satellite imagery; hybrid shows roads and features layered over satellite imagery; terrain shows physical terrain overlay on top of a classic map (Google Maps only)
Accepts a JSON string imported from the Google Maps API styling wizard. Map Type must be set to standard and provider must be set to google.
Property
Description
Height
Default (Fill container); Four options: 1) Fit contents which auto-sizes to the content size or 2) Fill container which auto-sizes to the container 3) Relative size in percent of Screen, 4) Absolute size in pixels
Width
Default (Fit container); Four options: 1) Fit contents which auto-sizes to the content size or 2) Fill container which auto-sizes to the container 3) Relative size in percent of Screen, 4) Absolute size in pixels
Property
Description
Margin Advanced
Default (none); Margin is the space outside of the border of a component; You can set space on the top, bottom, right or left of the component in both pixels or percent of Screen
Padding Advanced
Default (none); Padding is the space between the contents and the border of a component; You can set space on the top, bottom, right or left of the component in both pixels or percent of Screen
Output name
Output value
Data Type
Latitude
Latitude of selected position
Number
Longitude
Output name
Output value
Data Type
Latitude
Latitude of selected position
Number
Longitude
Latitude
Latitude of marker's position
Number between -90 and 90
Longitude
Longitude of marker's position
Latitude
Latitude of marker's position
Number between -90 and 90
Longitude
Longitude of marker's position
Input
Description
Data Type
Coordinate
List of points to draw a line between. List can be any length.
List of objects. Each object must have the properties latitude and longitude. Latitude and Longitude must be numbers.
Stroke Width
Input
Description
Data Type
Coordinate
List of points to draw a line between. List can be any length.
List of objects. Each object must have the properties latitude and longitude. Latitude and Longitude must be numbers.
Stroke Width
Note: If you close this pop pup message without copying your API key
