Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Navigate and filter your projects
You can find your projects page at x.thunkable.com/projects. This is the first page you see when you sign in.
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.
You can use the search bar to filter your projects by name
PRO Thunkable creators are able to create private projects. 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 mobile web app.
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.
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 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 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:
Thunkable Academy Not sure where to get started with the Drag and Drop interface? Check out the Thunkable Academy!
Community Want to connect with other Thunkable Creators? Ask a question and join the conversation in the Community!
Instructional Videos Enjoy instructional videos? Check out our library of tutorials available on YouTube.
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 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. Read more about the memberships Thunkable offers.
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.
You can toggle between the Drag and Drop and Snap to Place docs in the upper left corner.
Follow these steps to build your first app!
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.
Choose how you want your projects to be laid out. Search and filter your projects.
They exist! They are helpful! Thunkable tutorials cover both basic concepts and advanced features.
With the Thunkable Live mobile app, you can preview your apps directly on your personal devices. To learn more, please click below.
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 set up an emulator 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.
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 video tutorials on YouTube.
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 Thunkable Tutorials section.
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.
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 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.
If this switch is set to true, the sound will keep playing even when the app is minimized.
Default Value: "This identifier will be used to deliver personalized ads to you."
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.
When you add components that require permissions to your app, like the camera, you will need to add purpose strings to your app if you want to publish it to the App Store.
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 your app you will need to enter this information, whether on Thunkable or the App Store or Play Store.
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 .
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 feature may only be available for Creators on certain Thunkable plans. Please refer to our for more information.
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).
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 .
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 .
Set a for this version of your iOS app.
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.
Property
Setting
Size
192 x 192 px (minimum)
Shape
Square (equal height and width)
File Type
Preferably .png (vs. jpg or other file types)
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 Live Test your project. Any changes you make in your browser are displayed on your device immediately.
You can Live Preview any of your projects, directly on your device, without the need to be logged in to your computer.
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.
The next pop-up you see depends on whether you select to sign in with Google or to sign in by email.
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 public app, 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
:
Map
Location
Not supported yet
Share
Social
Not supported yet
Push Notification
Social
Not supported yet
AdMob
Monetization
Can not be supported
Bluetooth Low Energy
Sensors
Not supported yet
Accelerometer
Sensors
Supported but may not work as expected
Gyroscope
Sensors
Supported but may not work as expected
Magnetometer
Sensors
Supported but may not work as expected
Alert
User Interface
Not supported yet
Speech Recognizer
Voice
Not supported yet
Assistant
Voice
Not supported yet
Photo Library
Image
Not supported yet
Barcode Scanner
Image
Not supported yet
Local Storage
Data
Not supported yet
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 Builder plan to get 1 GB of space for your projects or to Advanced to get unlimited space.
Please refer to our pricing page for more information: Thunkable pricing
App size
50 MB
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.
Read more about Thunkable plans here.
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
Thunkable is building the world's largest gallery of open sourced apps to help inspire you and save you time.
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.
#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).
#cloudvariables
#firebase
#mediadb
#cloudinary
#camera
#cloudvariables
#firebase
#cloneblocks
#devicetime
#drawernavigator
#slider
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.
#cloudvariables
#firebase
#mediadb
#cloudinary
#camera
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.
#webapi
#openweathermapapi
#googlemaps
#localdb
#camera
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
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
#accelerometer
#admob
The label component allows you to display text in your app.
You can customize your label using the following 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
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
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
Border Radius: 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
Border Radius: 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
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
This event will fire when the user clicks on the label.
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"
"Fill Container"
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
Center
Justify
True
False
The set and get width blocks work with the Width property of the label component.
Number of Pixels
Percentage Width
"Fit Contents"
"Fill Container"
You can create a Thunkable account with a Google account or with any other email address.
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.
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.
Below are a few of our favorites with more to come. Feel free to customize them for your own use and share them with
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.
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.
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
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.
Using Custom Fonts may only be available for Creators on certain Thunkable plans. Please refer to our pricing page for more information: .
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.
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.
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.
To learn more about using Thunkable, take a look at some of our .
Once you're ready to try out your app, we have a helpful guide for .
Components to interact with
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 minimum requirements for apps.
Public projects are included in the Thunkable Public Gallery 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 Thunkable Public Gallery. Only Thunkable users with a paid plan can create and share private projects.
Learn more about Thunkable Plans.
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.
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 Thunkable Live mobile app, you can use the app to preview any public project directly on your mobile device.
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.
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: 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
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 text input to be
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.
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.
Event
Description
On Value Change
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
Disabled
If set to true
, switch will be disabled
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.
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.
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.
The Back block may not work when you test your app on the web, but will work when Live Testing your app and in downloaded apps
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.
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 Height
block 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 Width
block 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.
The List Viewer component allows you to add, view and click on items in a list.
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.
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.
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.
Property
Description
Text Items
Default (none
); items must be in list format
Property
Description
Item Click
Returns an item
value and a numeric index
number when an item is selected
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
Show Arrow: To see an arrow beside each item in the list, set the switch to true
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 List Viewer to be
Color: Pick a color for the border of the List Viewer
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 List Viewer to be
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
Absolute size - Sizes the List Viewer to a specified number of pixels
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"
"Fill Container"
The Computed Height
block 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 list 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 Width
block 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.
The Slider is a great UI element to enable users easily select a value from a fixed range of values.
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
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
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
Absolute size - Sizes the Slider to a specified number of pixels
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
Absolute - Sizes the Slider to a specified number of pixels
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"
"Fill Container"
The Computed Height
block 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"
"Fill Container"
The Computed Width
block 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.
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 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.
Features and functions for your app
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.
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.
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
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.
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.
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
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
If you want to start an event from a confirm button, you will want to add the blocks below:
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.
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.
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.
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 of .