1 of 100

Snap to Place

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.

Additional Support Options

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.

Pricing and Membership

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.

Getting Started

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.

Step 2. Check out your Thunkable Projects page

Choose how you want your projects to be laid out. Search and filter your projects.

Step 3. Try Our Tutorials

They exist! They are helpful! Thunkable tutorials cover both basic concepts and advanced features.

Step 4. Download the Thunkable Mobile App

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.

Step 5. Components

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.

Step 6. Blocks

The language of blocks is a visible programming language. By dragging and dropping blocks together, you can program your app.

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 sign up 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 sign in page to sign back into their Thunkable account. You can Sign in with Google, Sign in with Apple or Sign in with email.

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.

Next Steps

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.

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

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.

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.

Tutorials

We have lots of ways for you to learn how to use Thunkable.

In-platform Tutorials

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.

Video Tutorials

Follow step-by-step app-building instructions with our video tutorials on YouTube.

Community Tutorials

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.

Live Test your App

Preview your Thunkable project with our Thunkable live app, or on the Web

What is the Thunkable Live App?

The Thunkable Live app connects the projects in your web browser directly to your mobile device. It allows you to do two things:

Download the Thunkable Live App

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.

With Thunkable Live installed on your device, you are now ready to live test or to live preview.‌

Live Test

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.

Getting started

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.

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.

Live Preview

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.

Troubleshooting

Common issues with the Thunkable Live app

You see a blank / white screen when you live test (even if there are items in your 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

App is crashing because of a bug on our end; we are trying to fix it as soon as we can

(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

Image is not showing up on your phone

The height or width of the image may be set to 'Fit contents'

Preview your App on the Web

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.

Web Preview

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.

Unsupported Components

Not all components are supported on the web at this time so please see the list below of components that are not supported:

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.

Public Projects

Private Projects

Making Projects Public or Private

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.

Read-Only projects

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.

Project Settings

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

App Name

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

Project Name

App (Bundle) ID

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

Icon

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.

Best Practises

Public/Private App

Auto-increment Version

Play sounds in background

If this switch is set to true, the sound will keep playing even when the app is minimized.

AdMob Settings

iOS App ID

Android App ID

Tracking Usage Description (iOS only)

Default Value: "This identifier will be used to deliver personalized ads to you."

Android

Version Name

Version Code

Keystore

iOS

Ignore Notch Area

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.

Notch Area Background Color

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.

Version Number

iOS Permissions

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.

API Keys

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

Limits

Element

Limit

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.

Operating Systems (OS)

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.

Account storage limits

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.

Maximum recommended asset size

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.

Naming Your Assets

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 Sample Projects

Thunkable is building the world's largest gallery of open sourced apps to help inspire you and save you time.

Sign In Screens

These Sign In templates can be easily remixed. Click to download!

Family & Friends

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.

Charlie Checker

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

Snap Gram

#cloudvariables #firebase #mediadb #cloudinary #camera

Color Chat

#cloudvariables #firebase #cloneblocks #devicetime #drawernavigator #slider

City Living

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.

Translator

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

High Performing Teams

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.

Office Weather & Traffic

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

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

Mark's Guide to 1:1s

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

Start-Up Hacks

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

New Market Goods

Fun & Games

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

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

Shake Dice

#accelerometer #admob

Public Gallery of Projects

A new app marketplace.

Thunkable Public Gallery

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.

How to use the Thunkable 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.

🛠️ 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

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.

Finding Components

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

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.

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.

User Interface Components

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

Advanced Properties

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

Events

Click

This event will fire when the user clicks on the label.

Properties

Background Color

Color

Font Style

Font Weight

Height

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"

Number of Lines

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.

Text

This property corresponds to the text that is displayed in the label component.

Text Align

Text Align can be any of the following values:

Auto
Left
Right
Center
Justify

Visible

True
False

Width

The set and get width blocks work with the Width property of the label component.

Number of Pixels
Percentage Width
"Fit Contents"
"Fill Container"

Text Input

The text input allows the person using your app to type in anything that they want such as words, passwords or numbers.

Set Keyboard type

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

Set up for Passwords

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.

Style the Text Input

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

Edit the Text Input size

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

Add spacing

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.

Events

Click

This event fires when the user clicks on the Text Input component.

Unfocus

This event fires when the component looses focus, i.e the user clicks on another component.

Submit

This event fires when the enter or submit button is pressed on the device keyboard.

Changes

This event fires every time a character is added or removed to the Text Input.

Properties

Border Width

Height

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.

Hint

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.

Keyboard Type

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

Text

The set and get text property works with the string of text that displayed in the Text Input.

Visible

The set and get visible blocks are used to show or hide the entire Text Input component. Acceptable values are:

True
False

Width

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.

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:

Add a Data Viewer List or a Data Viewer Grid to your project
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.

Adding a New Data Source

When adding a new Data Source, you can choose between Create your own table, Airtable or Google Sheets as the source of your data.

Add Filter View

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.

Sort

Open a data source.

Click on a Filter View.

Click Sort icon.

Select column.

Select Ascending or Descending.

Create your Own Table

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.

Airtable

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

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.

Click Grant access.

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.

Select the correct base from the dropdown menu.
Indicate if you'd like to use a custom view. Learn more here: Use a Custom View.
Click Create.
Refresh your page to ensure the data is reflected in web preview or via the Thunkable Live app.

Authorization Header For Block

This block is only necessary for Creators who use web API blocks to communicate with Airtable.

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

Google Sheets

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

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.

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.

Looking to reset your Google Sheets connection? Click here for instructions

Data Source blocks

Create

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.

Read

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.

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.

Get row object will return the row object of the specified row ID. The row object can be used with Objects blocks.

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

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

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.

Update

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.

Delete

Delete Row

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.

Delete All Rows

You can use the delete all rows block to delete all rows in your data source. If there is an error, the error message is passed as an output.

Filter

Update Filter For Block Overview

The update filter for block allows you to edit the value for each condition within a specific view of your data source.

Ads by AdMob

AdMob Overview

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

Thunkable reserves the right to change an app's approval status subject to any violation of our guidelines.

Getting Started

- Default value: "This identifier will be used to deliver personalized ads to you."

Review Guidelines

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.

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.

Ad Formats

Banner ad

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 Ad

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.

Properties

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)
Whether Test Mode is enabled for this ad component

Blocks

Events

Use the when Ad Open and when Ad Close blocks to trigger events to happen when the interstitial ad opens or closes.

Actions

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.

Properties

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

Properties

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)
Whether Test Mode is enabled for this ad component

Blocks

Events

Use the when Ad Close block to trigger events to happen when the interstitial ad closes.

Actions

Use the Show Ad block to show the ad video, and the Reward User block to reward the user after displaying the video.

Properties

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.

Live Test

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.

Submit for Review

Thunkable reserves the right to change an app's approval status subject to any violation of our guidelines.

Create an `Ad Unit ID`

Below is a visual walkthrough of the steps after you have created your AdMob account:

Link `Ad Unit ID`

The Ad Unit ID should begin with ca-app-pub-xxx

Set `test mode = false`

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.

iOS and AdMob Permissions

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:

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.

Troubleshooting

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

Web API

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.

To see what public APIs are available, we recommend this list from Todd Motto

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

Property

Description

Required?

URL

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

Setting URL, Query Parameters, Body and Headers

URL, Query parameters, Body, and Headers can be set in the blocks editor.

URL

Set URL

Set the URL to the selected API. You can also connect a Text block or variable to set the URL.

Get URL

Returns the URL of the selected API.

Query Parameters

Set Query Parameters

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.

Get URL

Returns the Query Parameters of the selected API.

Body

Set Body

Set the Body of the selected API. You can connect a generate JSON from object block or a Text block.

Get Body

Returns the Body of the selected API.

Headers

Set Headers

Set the Headers of the selected API. You can connect a create object block.

Get Headers

Returns the Header of the selected API.Comment

Get and Format (parse) Data

To retrieve data from an API, you simply need to use the Get block.

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

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 Object blocks

Get Simple Properties

Example 1: Open Weather Map API

You can find a working example of this in the sample app, Office Weather & Traffic.

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.

{
    "coord":{"lon":85.17,"lat":26.67},
    "weather":[{"id":804,"main":"Clouds","description":"overcast clouds","icon":"04n"}],
    "base":"stations",
    "main":{
        "temp":298.312,
        "pressure":1005.31,
        "humidity":94,
        "temp_min":298.312,
        "temp_max":298.312,
        "sea_level":1011.47,
        "grnd_level":1005.31},
    "wind":{"speed":2.96,"deg":79.5005},
    "clouds":{"all":92},
    "dt":1533157826,
    "sys":{
        "message":0.0034,
        "country":"IN",
        "sunrise":1533080664,
        "sunset":1533128790},
    "id":1273043,
    "name":"Dhaka",
    "cod":200
}

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 nested properties, contained within the { curly brackets }. "weather" is a one-item list which also contains an object.

Convert JSON to Object

The first step in parsing this response is converting the JSON response to an Object. Objects have properties (like name) that we can retrieve and display in our app. Objects can be embedded within another object.

Get Property of 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:

Get Nested Properties

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

Get Properties from Lists

You can read about getting nested values and values from lists in Objects here. Let's work through an example.

Example 2: Google Maps Distance Matrix API

You can find a working example of this in the sample app, Ride.

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

{
   "destination_addresses" : [ "Los Angeles, CA, USA" ],
   "origin_addresses" : [ "San Francisco, CA, USA" ],
   "rows" : [
      {
         "elements" : [
            {
               "distance" : {
                  "text" : "617 km",
                  "value" : 616620
               },
               "duration" : {
                  "text" : "5 hours 45 mins",
                  "value" : 20680
               },
               "status" : "OK"
            }
         ]
      }
   ],
   "status" : "OK"
}

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

You can see the example below for how this would look using the Object and List blocks

This can also be written as the property rows[1].elements[1].duration.text of the response:

Upload data

Uploading and deleting data is usually reserved for a private API that you or your organization owns

Event

Description

Put (response, status,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

Patch (response, status, error)

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

Delete data

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

Web API Video Tutorials

Maps by Google and Apple

Choose Your Provider

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.
Copy the provided API key.

Note: If you close this pop pup message without copying your API key

Navigate to APIs & Services.
Select Credentials from the left side menu.
Click SHOW KEY.

For more detailed instructions, please see here: Google Maps Platform: Set up your Google Cloud project.

Add Google Maps API Key to Thunkable

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 Project Settings. Scroll to the Google Map Settings section and paste your Android and iOS API keys into the corresponding fields.

Map

Property

Description

Data Type

Latitude

Co-ordinate of the map's center on the north-south axis

Number

Longitude

Co-ordinate of the map's center on the east-west axis

Number

Zoom

Zoom level between -15 (most zoomed out) and 15 (most zoomed in)

Number

Layout

Property

Description

Data Type

Height

Height of Map in pixels

Number

Width

Width of Map in pixels

Number

Visible

Set whether the Map is visible

True/False

Style

Property

Description

Data Type

Border Width

Width of border around Map in pixels

Number

Border Radius

Radius of corners of border on Mapr in degrees

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

There are a number of Advanced properties available to help you add custom styling to your map. Below are the most popular.

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)

Custom Map Style String (Google Maps Only) Advanced

Shows Traffic Advanced

Default (false); if true, shows real-time traffic overlay on the map

Edit Map size

For more information on sizing in your app, please see our introduction here

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

Add Spacing

For more information on adding spacing in your app, please see our introduction here

To find the spacing properties, you'll have to select the Advanced tab

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

Blocks

Events

The map has several events. You can trigger actions to happen when these events occur.

On Map Ready

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.

On User Location Change

This event happens when the location of the user changes. It returns the coordinate object. You can use object blocks 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 } }

On Press

This event happens when the user taps on the Map.

Output name

Output value

Data Type

Latitude

Latitude of selected position

Number

Longitude

Longitude of selected position

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

On Long Press

This event happens when the user presses on the map for a longer period of time.

Output name

Output value

Data Type

Latitude

Latitude of selected position

Number

Longitude

Longitude of selected position

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

On Marker Press

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

The event object has the following properties:

{ latitude: latitude of the selected Marker longitude: longitude of the selected Marker }

Functions

Add Marker

Adds a generic map marker to your map at the specified latitude/longitude.

This block takes the following inputs:

Input

Description

Data Type

Latitude

Latitude of marker's position

Number between -90 and 90

Longitude

Longitude of marker's position

Number between -90 and 90

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

Add Icon Marker

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

Latitude

Latitude of marker's position

Number between -90 and 90

Longitude

Longitude of marker's position

Number between -90 and 90

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

Add Polyline

Add a polyline to your map. This is an outline that connects several points on your map.

This block takes the following inputs:

Input

Description

Data Type

Coordinate

List of points to draw a line between. List can be any length.

Stroke Width

Width of polyline

Number

Stroke Color

Color of polyline

Color

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 Polygon

Add a polygon to your map. This is a solid shape that connects several points on your map.

This block takes the following inputs:

Input

Description

Data Type

Coordinate

List of points to draw a line between. List can be any length.

Stroke Width

Width of outline

Number

Stroke Color

Color of outline (Only visible if Stroke Width > 0)

Color

Fill Color

Color of polygon shape

Color

These blocks:

Will produce this polygon:

Note that the polygon outline will automatically connect the first and last points in the list of coordinates.

Delete Markers, Polylines and Polygons

You can use the deleteAllMarkers block to delete all markers from your app.

You can use the deleteAllPolylines block to delete all polylines from your app.

You can use the deleteAllPolygons block to delete all polygons from your app.

Snap to Place

Welcome to Thunkable Docs

One Product, Two Interfaces

Drag and Drop

Snap to Place

Additional Support Options

Pricing and Membership

Getting Started

Step 1. Sign in to Thunkable

Step 2. Check out your Thunkable Projects page

Step 3. Try Our Tutorials

Step 4. Download the Thunkable Mobile App

Step 5. Components

Step 6. Blocks

Signing In

Sign Up

Sign in‌

Sign in with Google

Sign in with Apple

Sign in with Email

Next Steps

Your Thunkable Projects Page

Your projects Page

Viewing your projects

Filtering your projects

Search Bar

Filter public/private projects

Your Project Menu - Delete, Duplicate, and more

Your Project Detail Page

Tutorials

In-platform Tutorials

Video Tutorials

Community Tutorials

Live Test your App

What is the Thunkable Live App?

Download the Thunkable Live App

Live Test

Getting started

If you select to sign in with Google:

If you select to sign in by Email:

Live Preview

Troubleshooting

You see a blank / white screen when you live test (even if there are items in your app)

App is crashing because of a bug on our end; we are trying to fix it as soon as we can

Image is not showing up on your phone

Preview your App on the Web

Web Preview

Unsupported Components

Create New Project

Other articles in this section

Public Projects

Private Projects

Making Projects Public or Private

Read-Only projects

Project Settings

App Description

App Name

Best Practises

Project Name

App (Bundle) ID

Icon

Best Practises

Public/Private App

Auto-increment Version

Play sounds in background

AdMob Settings

iOS App ID

Android App ID

Tracking Usage Description (iOS only)

Android

Version Name

Version Code

Keystore

iOS

Ignore Notch Area

Notch Area Background Color

Version Number

iOS Permissions

API Keys

Project Assets and Sizes