1 of 100

Drag and Drop

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 Drog interface if your screen looks like this:

You're in the right place if you're looking for the Thunkable Docs supporting our Drag and Drop interface.

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:

Additional Support Options

In addition to our Thunkable Docs, we are also proud to offer you the following resources:

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!

Getting Started

Follow these steps to build your first app!

You can sign up for Thunkable with Google, Apple, or email.

Check out our Signing In docs for more info:

Step 2. Complete the Thunkable Academy Course

Step 3. Test your project

Once you have followed a tutorial, test your project on the web to see it live.

Step 4. Download the Thunkable Live App

Step 5. Check out your Thunkable Projects page

View the homepage for all of your Thunkable creations. Choose how you want your projects to be laid out. Search and filter your projects.

Step 6. Create a new Project

Continue your journey by creating more projects.

Step 7. Components and Features

You can drop custom components and third-party integrations directly into your projects. These components will allow you to build more advanced features.

Step 8. Blocks

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

Minimum Requirements

Operating Systems (OS)

Thunkable recommends and actively supports using a mobile OS that is actively receiving security updates.

This includes iOS 15+ and Android 10+.

Thunkable apps are often compatible with older OS, but this is not guaranteed.

Browser

Thunkable supports developing with the following browsers:

Mozilla Firefox
Google Chrome
Apple Safari

We recommend updating your browser regularly for the best experience.

Signing In

You can create a Thunkable account with a Google account or with any other email address.

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

If you choose to sign up with email, you will be sent an email 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.

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.

This button will sign you in automatically with your Apple account.‌

If you click Sign in with email you will be invited to type your 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.

Preview and Test your App

Preview and test your Thunkable project with the Thunkable Live app or Web Preview.

Overview

There are two ways to test and preview your Thunkable app: Web Preview in your computer's browser or on your mobile device with the Thunkable Live app. These tools aren't designed to check for errors, but to allow you to preview your app's design and test its functionality in real time.

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.

You can also preview any public app, directly from the app's Project Detail Page.

Thunkable Live App

The Thunkable Live app connects the projects in your web browser to your mobile device. It allows you to preview and test your projects directly on your device. Any changes you make in your browser are displayed on your device immediately. You can also take your project on the go and show it off with the Thunkable Live app.

Download the Thunkable Live App

Testing and Previewing with Thunkable Live

Open your project in your web browser.
Click the Live Test on Device icon.
If you're signed in to Thunkable with Google:
1. Open the Thunkable Live app on your device.
2. Sign in with the same Google account.
If you're signed in to Thunkable with email:
1. Click Enter my code.
2. Open the Thunkable Live app on your device.
3. Click Email sign in - Generate test code.
4. A test code is displayed on your device screen. Enter it into the provided field on your web browser.
5. Click Connect.
Select the app you want to open from your list of Thunkable projects.

Troubleshooting

If you see a blank or white screen when you live test an app with UI components...

If you have added a navigator to your app, ensure screens are nested underneath it in the component tree. If your screens are not nested, drag and drop to nest them within the navigator.
Ensure your blocks are connected without errors.
Ensure you're logged into the same account on your web browser and the Thunkable Live app.
You have an event triggered by a Screen.Start which may be causing the screen to crash

If changes that you make cause the app to crash...

Close the app and reopen it.

If an image is not showing up on your device...

You may have the image's height or width set to Fit contents. Try changing this and try again.

Your Thunkable Projects Page

Navigate and filter your projects

Your Projects Page

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

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

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 on the left.

Create New Project

There are several different types of projects in Thunkable.

A project is where your designs, files, and blocks combine to create Android, iOS, and web apps.

Public vs. Private Projects

Public Projects

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

Private projects are available to Creators on Pro+ plans. These projects are private, meaning they can only be seen by their app creator. They are not displayed in the Thunkable Public Gallery.

Making Projects Public or Private

For Creators on Pro+ plans, you can decide whether a project is public or private when you create it.

Read-Only projects

You can only preview Read-Only. Once a project has been switched to public, you cannot switch it back to Read-Only.

App Layout and Size

Please note that your layout will not automatically respond when you change your Default App Layout. Your existing components will not change size, and the distance between components will not change. We recommend setting your Default App Layout before you start adding components to your app.

App Settings

To view or change your app settings, click on the Settings gear icon in the menu on the left.

1. Project Settings

App Description

App Name

Your app name is the name you choose for your app. It differs from the project name, which displays at the top of your project. While the project name is internal and may include details specific to your team, the app name is user-facing.

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

Default App Layout

This is where you can change the default designer layout for your app. Use this dropdown to set the default size of your project, choosing from the following options:

Phone + Portrait
Phone + Landscape
Tablet + Portrait
Tablet + Landscape

We recommend setting your Default App Layout before you start adding components to your app. Your layout will not automatically respond when you change your Default App Layout. Your existing components will not change size, and the distance between components will not change.

We recommend choosing a Default App Layout before you start adding components to your screen(s).

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. Users on our personal plans will see the default "Made with Thunkable" icon appear when their apps load.

If your company needs to remove the Thunkable branding from an app, this option is available as a project setting to Business and Team customers.

Please ensure the file you upload does not have the same name as another asset you use in your app. This will cause an error.

Best Practices

Property

Setting

Size

192 x 192 px (minimum)

Shape

Square (equal height and width)

File Type

Preferably .png (vs. jpg or other file types)

2. Splash Screen Image

To access your app's splash screen image settings:

Navigate to the project’s Design tab.
Click the Settings icon in the left menu.
Click the three dots icon at the bottom of the Project Settings section to access the advanced settings.

Picture

To customize your app’s splash screen picture:

Click in the Picture field.
Click Upload files and select an image from your computer, or select an image from your app’s current assets.

Splash Screen Picture Requirements:

The picture must be square. Rectangle pictures will not render correctly.
The ideal dimensions for your splash screen picture are 1152x1152 pixels.
If you want a transparent background, a PNG file is recommended.

Note: If you do not select a custom splash screen picture, your app icon image will be used by default.

Background Color

To customize the background color of your app’s splash screen:

Click in the Background Color field.
Use the color picker or input the HEX or RBGA codes to select your preferred color.

Note: If you do not select a custom splash screen background color, white will be used by default.

Sample Splash Screens

3. Publishing Settings

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. Ensure none of the letters in this package name has an accent (e vs ë).

Public App

Auto-increment Version

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.

4. Android Publishing Details

Version Name

Version Code

5. iOS

Version Number

Tracking Usage Description (iOS only)

iOS Permissions

When you add components that require permissions to your app, like the camera or map, you will need to add purpose strings to your app if you want to publish it to the App Store.

You must add purpose strings for any component that explicitly requires a purpose string.

6. Integrations

Firebase Settings

Google Map Settings

AdMob Settings

iOS and Android App ID

Keystore

Cloudinary Settings

Versioning

Note: Project versioning is currently being beta-tested.

Overview

Thunkable’s versioning functionality allows you to preserve a version of your drag and drop project at a point in time. Project versioning provides a better way to organize and manage multiple versions of your projects, allowing you to easily find past iterations and revert back to previous versions if you make changes to the original version that you end up disliking.

There are two forms of versioning available, auto-versioning and manual versioning, both of which are available to our Pro, Business, and Team Creators.

Auto-versioning

Never worry about losing your app progress with auto versioning. Thunkable automatically backs up your projects every few hours.

To access the two most recent auto versions of your project:

Access the Design tab of your project.

Each auto version’s name reflects the date and time the version was created.

Version actions

Click the version’s vertical ellipsis to access its version actions.

Restore

The Restore option reverts your current project to this version.

Manual versioning

Create an app version

To save a version of your project:

Access the Design tab of your project.
Click Create Version. A new version of the project is created with the default version name reflecting the date and time the version was created.
To change the name of a version, click in the version name field and type your preferred version name.

Version actions

Click the version’s vertical ellipsis to access its version actions.

Restore

The Restore option reverts your current project to this version.

Save As

The Save As option saves that version as a new project. Select a name for your new project and then click Create. The newly created project is now available on your Projects Page, and the version will remain within the existing project.

Delete

The Delete option will permanently delete the selected version. This action can’t be undone.

Additional considerations

If you downgrade your subscription plan, you will lose your oldest versions up to your new limit.
Creating a new version of a project makes a full copy of the project, including project settings such as name, project privacy, data, etc. Restoring a version will also restore those settings.

Tablet view

Overview

Creators with our Pro and Business subscriptions can set their app's default layout to tablet view.

The best practice is to set your project's default app layout before you add components to your app screens. If you add components to your app screens and then change your project's default app layout, your designs will not automatically respond to the new size and layout, meaning that neither the size of your existing components nor the distance between components will change.

Change the default app layout

To change your app's default app layout:

On the Design tab of your project, click the gear icon in the upper left corner to access your project settings.
Select the preferred default layout for your app. Your options are: - Phone + Portrait - Phone + Landscape - Tablet + Portrait - Tablet + Landscape

Assets

Upload and manage your files from the Assets pane

Account Storage Limits

Each plan has a limited storage capacity.

You can view your total account storage size in your account settings.

App Limits

Uploading & Managing Assets

Assets can be uploaded from multiple parts of Thunkable, however, with limited storage capacity, it's best to delete assets that aren't being used. To access your assets, click the Assets button on the left panel.

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 assets

We recommend using a consistent naming method for your assets. This will make it easier to manage them if you use many asset files in your project.

Here are two naming methods we recommend:

- example_one.png
- here_is_another_example.html
- exampleOne.png
- hereIsAnotherExample.html

Use only alphanumeric characters and underscores in your asset names. Avoid other special characters and whitespace characters (" ") in your file names as these can cause problems with your project.

You can manage your files directly in the Assets panel on the left, or click the plus icon next to the Media Files header to open the Media Files modal and manage them there.

How much space am I using?

Check the size of an individual project by visiting the project details page.

Figma Integration

Importing a Figma File

You can import a Figma file into your Thunkable project.

Click on the Assets tab and click the + icon next to the text Figma Files.

You will be asked to Authenticate with your Figma account. You will only need to do this once.

Paste in the URL of your Figma Project and select a Page in the dropdown menu.

At the moment, we are only supporting imports for mobile designs at 375x667 px in portrait mode.

The Figma importer will add all Artboards in a single page, so we recommend creating a designated Page in Figma with the Artboards you intend on importing.

What gets imported?

Thunkable imports your Figma files in a way that best preserves your original designs.

Supported Objects

The following Figma objects are supported by the integration:

Canvas
Component
Ellipse
Frame
Group
Instance
Line
Rectangle
Text
Vector

Updating a file

As you change and update your original designs, keep Thunkable up to date by re-syncing a Screen.

Find your imported Screen name in the Design tab and click the 🔄 icon.

There might be a few differences with your Figma file and the output in Thunkable. Re-syncing your Screen with Figma may improve your imported Screen's appearance!

Blocks

All imported Figma items will have some standard blocks.

You can use these imported components as a button by adding a Click block. You can also choose to change its background color, or add text or a picture, among other actions.

🛠️ UI Components and App Features

User interface (UI) components define your app’s look, while app features allow you to tap into a mobile device’s unique functionalities.

User Interface (UI) Components

UI components are visual elements users can see or interact with. They include buttons, images, text inputs, etc. Thunkable offers more than 20 UI components to add to your app screens. Each of these components is fully customizable and controllable with blocks.

Properties Panel

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

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

The Component Tree

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

Copy and Paste UI Components

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

To copy and paste a component:

Click on a component name in the component tree (A) or the component within a screen in your workspace (B).
Type ctrl+c or command+c on Mac, and ctrl+c on PC, to copy the component.
Type ctrl+v or command+v on Mac, and ctrl+v on PC, to paste a duplicate of the component.
Click and drag the new component to position it as you desire.

App Features

Thunkable’s app features are easy-to-integrate and drastically expand your app’s native mobile functionality. They often relate to your app's functionality and quietly run in the background.

App features are accessed from your project's Blocks tab.

UI Components

Components to interact with

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

Every UI component has unique properties that you can use to customize it. You can find this at the top of the Properties panel. All UI components have a section called Layout and Style.‌

In the example above, a Label has been selected. Note its unique properties such as its text, font, alignment etc.

Copy and paste components

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

To copy and paste a component:

Click on a component name in the component tree (A) or the component within a screen in your workspace (B).
Type ctrl+c or command+c on Mac, and ctrl+c on PC, to copy the component.
Type ctrl+v or command+v on Mac, and ctrl+v on PC, to paste a duplicate of the component.
Click and drag the new component to position it as you desire.

Learn more about individual components below.

User Interface Components

Data Viewers

Next Steps

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

Button

When you tap on the play icon to hear your favourite music, you are using a button.

Button Overview

A button is just something you can click on to perform an action. This action can be anything from navigating to a different screen, saving information to a database, or playing a sound.

Properties

Button

Layout

Style

Blocks

Events

You can use the following blocks to listen for when a specific event occurs

Click

Performs an action when the user taps the button.

Long Click

Performs an action when the user holds down the button.

Touch Down

Performs an action when a user pressed down on the button

Touch Up

Performs an action after the user releases the button

Properties

Background Color

Background Picture

Background Picture Resize Mode

The set and get resize mode blocks work with how the background picture is scaled within the button component. Acceptable values are:

Cover
Contain
Stretch
Repeat
Center

Disabled

The disabled property is used to set whether or not the button is "clickable". Expected values for this property are:

True
False

Font

The font style properties of the button text can be "Bold", "Italic", or Raised. Expected values for each property are:

True
False

Height

The set and get height blocks work with the Height property of the button component. Acceptable input values are.

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

The Computed Heightblock returns the on-screen dimensions of the button, after it has been rendered on-screen. The value returned is an integer, representing the size of the button in pixels.

Text

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

Text Color

Visible

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

True
False

Width

The set and get width blocks work with the Width property of the button component. Acceptable input values are.

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

The Computed Widthblock returns the on-screen dimensions of the button, after it has been rendered on-screen. The value returned is an integer, representing the size of the button in pixels.

Image

The image component lets you display pictures in your app.

Image Overview

Properties

Image

Picture Resize Mode

With the Resize Mode property, you can do the following:

Center: Positions the picture in the middle of the image component
Cover: Resizes the picture to its max height or width regardless without changing the image quality.
Contain: Resizes the picture to fit the area without changing its quality
Repeat: Repeats the picture at its original quality within the image component area
Stretch: The picture’s height will change to fill the image component length-wise

Layout

Style

Blocks

Events

Click

This event handler is fired when the user clicks on the image.

Properties

Picture

Set and get the Image component's Picture.

Resize Mode

Height

Returns the height of the Image component in pixels after it has been rendered on-screen.

Width

Returns the width of the Image component in pixels after it has been rendered on-screen.

Visible

Set and get whether the Image component is visible on the screen.

Text Input

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

Text Input Overview

Properties

Text Input

Property

Description

Data Type

Hint

The prompt text the user sees when the Text Input is empty (eg. Type Here)

Text

Text value of the Text Input

Text

Keyboard

Set a keyboard to sppear when your end user clicks the Text Input

Select from list [default, email address, numeric, phone pad]

Secure Text Entry

Toggle whether text is obscured as your end user types (suitable for entering passwords and other sensitive information)

True/False

Font

Text

Font Italic (web app only)

Select whether hint and text are shown in italics.

True/False

Underline (web app only)

Select whether the hint and text are underlined.

True/False

Strikethrough (web app only)

Apply strikethrough formatting to the hint and text.

True/False

Writing Direction (iOS and web app only)

Set whether text should be written left-to-right or right-to-left.

Select from icons.

Font Size

Height of hint and text in pixels.

Number

Letter Spacing

Spacing between letters in pixels.

Number

Advanced Properties

Property

Description

Data Type

Editable

Toggle whether your end user can edit the text

True/False

Multiline

Toggle whether your end user can enter multiple lines of text

True/False

Auto Focus

Toggle whether Text Input is automatically in focus when the Screen opens

True/False

Max Length (Android and iOS only)

Set maximum number of lines of text your end user can enter

Number

Clear Button Mode (iOS only)

Toggle when your iOS end users have the option to clear the Text Input's text

Select from list [never, while-editing, unless-editing, always]

Input Color

Color of Text Input's Text

Color

Background Color

Color of Text Input's background

Color

Hint Text Color

Color of Text Input's hint

Color

Selection Color (Android and iOS only)

Set the color to highlight text when your end user selects text

Color

Layout

Property

Description

Data Type

Set the location of your Text Input the X-axis in pixels

Number

Set the location of your Text Input on the Y-axis in pixels

Number

Height

Set the Height of your Text Input in pixels

Number

Width

Set the Width of your Text Input in pixels

Number

Resize Mode

Define dimensions of the text input component/container

Select from list [Stretch, Float in Place]

Style

Property

Description

Data Type

Visible

Toggle whether your end users can see the Text Input

True/False

Border Style

Style of Text Input's border

Select from list [solid, dotted, dashed]

Border Color

Color of Text Input's border

Color

Border Width

Width of Text Input's border in pixels

Number

Border Radius

Radius of corners of Text Input's border in pixels

Number

Shadow Color

Color of Text Input's shadow

Color

Shadow Opacity

Opacity of Text Input's shadow

Number between 0 and 100

Shadow Radius

Radius of corners of Text Input's shadow in pixels

Number

Shadow Offset

How far Text Input's shadow should be offset, in Height and Width, in pixels

Number

Blocks

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

Returns the height of the Text Input component in pixels after it has been rendered on-screen.

Hint

Keyboard Type

Text

Visible

Width

Returns the width of the Text Input component in pixels after it has been rendered on-screen.

Simple List Component

The Simple List component allows you to add, view and click on items in a list.

Simple List Overview

Properties

You can customize the Simple List with the following properties:

Simple List

Property

Description

Data Type

Text Items

Set text items of Simple List

List of text items

Color

Set font color of Text Items

Color

Background Color (text items)

Set background color for the items in the Simple List

Color

Font Size

Set font size of Text Items

Number

Show Arrow

Toggle whether arrow is shown beside text items

True/False

Advanced Properties

Property

Description

Data Type

Writing Direction (iOS and web app only)

Set writing direction of text items

Select from list [auto, ltr, rtl]

Background Color (container)

Set the background color of the Simple List container.

Color

Layout

Property

Description

Data Type

Set the location of your Simple List on the X-axis in pixels

Number

Set the location of your Simple List on the Y-axis in pixels

Number

Height

Set the Height of your Simple List in pixels

Number

Width

Set the Width of your Simple List in pixels

Number

Resize Mode

Define dimensions of the Simple List component/container

Select from list [Stretch, Float in Place]

Style

Property

Description

Data Type

Visible

Toggle whether your end users can see the Simple List

True/False

Border Style

Set style of Simple List's border

Select from list [solid, dotted, dashed]

Border Color

Set color of Simple List's border

Color

Border Width

Set width of Simple List's border in pixels

Number

Border Radius

Set radius of corners for Simple List's border in pixels

Number

Shadow Color

Color of Simple List's shadow

Color

Shadow Opacity

Opacity of Simple List's shadow

Number between 0 and 100

Shadow Radius

Radius of corners of Simple List's shadow in pixels

Number

Shadow Offset

How far Simple List's shadow should be offset, in Height and Width, in pixels

Number

Blocks

Note: The blocks in your project are titled "Simple_List." The blocks in the images below are titled "List_Viewer." The component was recently renamed and these images will be updated soon. Thank you for your patience.

Functions

When Item Click

Performs an action when the user clicks on an item of the Simple List.

Outputs

Name

Description

Data Type

Item

Text of selected item

String

Index

Position of item in Simple List (starting with 1)

Number

Properties

Text Items

Choosing Airtable or Google Sheets allows you to create a dynamic Simple List. 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.

Performs an action when the user clicks on any one of the list items.

Text Items Color

Set and get font color of the Simple List's text items.

Text Items Background Color

Set and get background color of the Simple List's text items.

Text Items Font Size

Set and get font size of the Simple List's text items.

Show Arrow

Choose whether or not the arrow is displayed next to every item in the Simple List.

Height

The Computed Heightblock returns the height of the Simple Listin pixels after it has been rendered on-screen.

Width

The Computed Widthblock returns the width of the Simple List in pixels after it has been rendered on-screen.

Visible

Set and get the visibility of the Simple List.

Organizations

Note: Organizations is currently being beta-tested.

Overview

Thunkable Organizations is a set of administration and collaboration capabilities that allow multiple team members to work on a single project. Creators can jointly design and develop a single, shared project asynchronously.

A single Creator can edit the project at a time, and their changes are available for other members to view when they refresh their page.

Organization Management

Thunkable Creators have:

roles with the organization (admin or member)
permissions within a project (project owner, editor, or viewer)
modes when actively within a project (editing or viewing)

Roles and Permissions Summary

Action

Org. Admin

Project Owner

Editor

Viewer

Add/Remove members

Yes

Publish

Yes

Download

Yes

Access project settings

Yes

Grant Edit Access

Yes

Remix project

Yes

Duplicate project

Yes

Delete project

Yes

Figma import

Yes

Versioning

Yes

Admin Dashboard

The Organizations Admin Dashboard is available for an Organization’s admins. This is where they can add, remove, and modify members' roles.

Access Admin Dashboard

Click your profile image in the upper right.
Select Organizations.
The Organizations page lists the Organizations for which you hold admin status.

View Organization

Click an Organization name.
The Members tab lists the Organization’s members.
The Projects tab lists the Organization’s projects.

Add Member

Click Add Member.
Input the invitee’s email address.
Indicate their role (Admin or Member).
Click Add.

Modify a Role

Navigate to the Members tab of the Organization’s page.
Click the role dropdown associated with the member.
Select the appropriate role (Admin or Member).

Remove a Member

Navigate to the Members tab of the Organization’s page.
Click the role dropdown associated with the member.
Select Remove.
Confirm the removal.

Assigning a Project to an Organization

Creating a New Project in an Organization

When creating a new project, Organization members can assign it to their own personal projects or the Organization.

Projects assigned to the Organization can be collaborated on by members of the Organization.

Once a project is assigned to an Organization, it cannot be converted to a personal project. It remains part of the Organization and cannot be moved to any one Creator’s personal projects, including the Admin of the Organization.

Projects created within an organization cannot be shared with users outside of the Organization.

Duplicate into an Organization

The owner of a personal project can make a copy of the project in an organization in which they are a member. To do this, as the project's owner:

On the project's Design tab, click the Project Actions icon.
Select Duplicate into...
In the modal provided, give the project a name.
Use the dropdown menu to indicate which Organization you want to copy the project into.
Click Duplicate into Organization.
You are the owner of the newly created project in the selected Organization. There are no other members with permissions on this project yet.

Viewing and Editing Modes

When accessing Organization projects, members are in one of two modes: Editing or Viewing. There can only be one project member in Editing mode at any given time – all other members of the Organization remain in Viewing mode.

Members accessing the project in Viewing mode cannot make active changes to the shared project.

Transferring Editing Access

Only one project member can be in Editing mode at a time.

To request editing access, a member in Viewing mode must click the chevron next to VIEWING.
Click Request Edit.
The member currently in Editing mode is notified that another member has requested editing access.
When the member currently in Editing mode switches to View mode, the member requesting Editing access is switched to Editing mode and can make changes to the project.

If the member currently in Editing mode is offline, no other member can edit the project. The member currently in Editing mode must return online and grant access to a different member.

To share a project with a user in your Organization:

Select Project Sharing.
Enter the email address of the user you want to add to the project
Assign the user a permission level: Editor or Viewer.
Click Add.

To update the permissions of a user in your Organization:

Click the user's existing permission level (EDITOR or VIEWER) and select Editor, Viewer, or Remove.

Collaborating with Comments

Organization members can collaborate on projects by adding comments to UI components.

Add Comments

To add a comment to a UI component:

Access the project’s Design tab.
Ensure you’re in Editing mode.
Click the Comment icon to open the comment panel on the right.
Click to select a UI component on a screen or in the component tree.
Type your comment in the provided text input field in the comment panel.
Click the send button.
To add comments to other UI components, repeat steps 4-6.
Click the Comment icon to close the comment panel.

Each UI component is limited to 25 comments, and each comment has a maximum character count of 2000.

View Comments

To view comments on a UI component:

Access the project’s Design tab.
Click the Comment icon to open the comment panel on the right.
Comments are grouped with the UI component they were added to.
1. Comments are displayed in the order they were added, with the most recent comment appearing at the bottom of the UI component's comments.
2. UI components with the most recent comments appear at the top of the comment panel, making it easier to find the most recent discussions.
Click the Comment icon to close the comment panel.

Delete Comments

You can delete your own comments. To delete a comment:

Access the project’s Design tab.
Ensure you’re in Editing mode.
Click the Comment icon to open the comment panel on the right.
Locate the comment you want to delete.
Click the vertical ellipsis icon within the comment’s box.
Click Delete.
This cannot be undone. Click Delete to confirm the deletion of the comment.
Click the Comment icon to close the comment panel.

Layout Component

The Layout component is currently being beta-tested.

Overview

Thunkable’s Layout component allows for more precise positioning of UI components on an app screen, by allowing you to position UI components dependent on other UI components on the screen. For example, in a typical sign-in screen, if a user inputs an incorrect email address or password, a screen built with a Layout component allows you to shift the UI components on the screen to display the error messaging to the user.

Add a Layout to a Screen

To add a Layout to a screen:

Drag and drop the Layout UI component onto a screen. You’ll notice it is composed of two Containers, one on top of the other.
Click and drag the sizing handles in the corners to resize the Layout UI component.
Click and drag to reposition it.

Insert Additional Containers

By default, a newly added Layout has two horizontal Containers arranged vertically, one on top of the other. To insert additional Containers to a Layout:

Click to select the Layout UI component in the component tree or within the screen.
At the top of the Layout’s properties panel, select whether you want to insert a Horizontal or Vertical Container. ∙ Horizontal Container - UI components within the Container are aligned horizontally, side by side ∙ Vertical Container - UI components within the Container are aligned vertically, on top of each other
Identify into which Layout or Container you want to insert the new Container.
Click Add.

Add UI Components

To add UI components to a Layout:

Drag and drop UI components into a Container on a screen.
Once UI components are in a Container, rearrange their order by dragging and dropping their component names in the component tree.

Layout Properties

The following properties are configured on the right in the Layout's properties panel.

Property

Value

Description

Direction

vertical

The elements directly within the Layout (could be a UI component or a Container) are aligned vertically, on top of each other.

Direction

horizontal

The elements directly within the Layout (could be a UI component or a Container) are aligned horizontally, side by side.

Vertical / Horizontal Alignment

top

The elements directly within the Layout (could be a UI component or a Container) are positioned at the top of the Layout.

Vertical / Horizontal Alignment

bottom

The elements directly within the Layout (could be a UI component or a Container) are positioned at the bottom of the Layout.

Vertical / Horizontal Alignment

left

The elements directly within the Layout (could be a UI component or a Container) are positioned at the left of the Layout.

Vertical / Horizontal Alignment

right

The elements directly within the Layout (could be a UI component or a Container) are positioned at the right of the Layout.

Vertical / Horizontal Alignment

center

The elements directly within the Layout (could be a UI component or a Container) are positioned in the center of the Layout (either top to bottom or left to right, depending on the selected direction).

Vertical / Horizontal Alignment

space-between

The elements directly within the Layout (could be a UI component or a Container) are positioned with an equal amount of space between them.

Vertical / Horizontal Alignment

space-around

The elements directly within the Layout (could be a UI component or a Container) are positioned with an equal amount of space between them, including at the top and bottom for a vertical direction Layout or left and right for a horizontal direction Layout.

Scrollable

true/on

The user can scroll within the Layout.

Scrollable

false/off

The user cannot scroll within the Layout.

Scroll Bar Visible

true/on

The scroll bar is visible to the user.

Scroll Bar Visible

false/off

The scroll bar is not visible to the user.

Horizontal Alignment Examples

Vertical Alignment Examples

Property

Value

Description

coordinate value

Position of the upper left corner of the Layout on the X-axis, where the left side of the screen is X=0.

coordinate value

Position of the upper left corner of the Layout on the Y-axis, where the top of the screen is Y=0.

Height

number in pixels

The Layout’s height is defined by a custom number of pixels.

Width

number in pixels

The Layout’s width is defined by a custom number of pixels.

Resize Mode

Stretch

Stretches the Layout to fit the dimensions of the device's screen.

Resize Mode

Float in Place

Renders the Layout in the same aspect ratio as the design, regardless of the device size.

Property

Value

Description

Background Picture

Upload files

Click to upload an image file.

Background Picture

Type in URL

Type in an image URL.

Background Picture Resize Mode

cover

Fills the entire Layout without changing the height and width ratio of the image.

Background Picture Resize Mode

contain

The entire image is scaled down to fit inside the Layout, without changing the height and width ratio of the image.

Background Picture Resize Mode

stretch

The image's height will change to fill the Layout length-wise.

Background Picture Resize Mode

repeat

The image repeats to cover the Layout. The image's height and width ratio do not change.

Background Picture Resize Mode

center

The image is positioned in the middle of the Layout.

Property

Value

Description

Visible

visible

Users can see the Layout.

Visible

invisible

Users cannot see the Layout.

Background Color

color

The background color of the Layout.

Border: Style

solid

The Layout’s border is a solid line.

Border: Style

dotted

The Layout’s border is a dotted line.

Border: Style

dashed

The Layout’s border is a dashed line.

Border: Color

color

The Layout’s border is the color selected.

Border: Width

number in pixels

The width of the Layout’s border is defined by a custom number of pixels.

Border: Radius

number in pixels

The radius of the Layout border’s corners is defined by a custom number of pixels.

Shadow: Color

color

The Layout’s shadow is the color selected.

Shadow: Opacity

number between 0 and 100

The opacity of the Layout’s shadow.

Shadow: Radius

number in pixels

The radius of the Layout shadow’s corners is defined by a custom number of pixels.

Shadow: Offset

number in pixels

How far the Layout’s shadow should be offset, in height and width, is defined by a custom number of pixels.

Property

Value

Description

Margin

top

The margin between the Layout’s top border and the next UI component as defined by a custom number of pixels.

Margin

bottom

The margin between the Layout’s bottom border and the next UI component as defined by a custom number of pixels.

Margin

left

The margin between the Layout’s left border and the next UI component as defined by a custom number of pixels.

Margin

right

The margin between the Layout’s right border and the next UI component as defined by a custom number of pixels.

Padding

top

The padding between the Layout and its top border as defined by a custom number of pixels.

Padding

bottom

The padding between the Layout and its bottom border as defined by a custom number of pixels.

Padding

left

The padding between the Layout and its left border as defined by a custom number of pixels.

Padding

right

The padding between the Layout and its right border as defined by a custom number of pixels.

Container Properties

The following properties are configured on the right in the Container's properties panel.

Property

Value

Description

Direction

vertical

UI components within the Container are aligned vertically, on top of each other.

Direction

horizontal

UI components within the Container are aligned horizontally, side by side.

Vertical / Horizontal Alignment

top

UI components are positioned at the top of the Container

Vertical / Horizontal Alignment

bottom

UI components are positioned at the bottom of the Container

Vertical / Horizontal Alignment

left

UI components are positioned at the left of the Container

Vertical / Horizontal Alignment

right

UI components are positioned at the right of the Container

Vertical / Horizontal Alignment

center

UI components are positioned in the center of the Container (either top to bottom or left to right depending on the selected direction)

Vertical / Horizontal Alignment

space-between

UI components are positioned with an equal amount of space between them

Vertical / Horizontal Alignment

space-around

UI components are positioned with an equal amount of space between them, including at the top and bottom for vertical direction Containers or left and right for horizontal direction Containers

Scrollable

true/on

The user can scroll within the Container.

Note: When setting a Container as scrollable, we recommend the size of the UI components within it are set to an absolute pixel value or Fit Contents.

Scrollable

false/off

The user cannot scroll within the Container.

Scroll Bar Visible

true/on

The scroll bar is visible to the user.

Scroll Bar Visible

false/off

The scroll bar is not visible to the user.

Horizontal Alignment Examples

Vertical Alignment Examples

Property

Value

Description

Height

Fit contents

The Container’s height is the same as the tallest UI component or Container within it (horizontal direction) or the stacked UI components or Containers within it (vertical direction).

Height

Fill container

The elements directly within the Container (could be a UI component or another Container) fill the Container vertically.

Height

Size (e.g. 50px or 50%)

The Container’s height is defined by a custom number of pixels or percentage of the screen.

Width

Fit contents

The Container’s width is the same as the widest UI component or Container within it (vertical direction) or the side-by-side UI components or Containers within it (horizontal direction).

Width

Fill container

The elements directly within the Container (could be a UI component or another Container) fill the Container horizontally.

Width

Size (e.g. 50px or 50%)

The Container’s width is defined by a custom number of pixels or percentage of the screen.

Property

Value

Description

Background Picture

Upload files

Click to upload an image file.

Background Picture

Type in URL

Type in an image URL.

Background Picture Resize Mode

cover

Fills the entire screen without changing the height and width ratio of the image.

Background Picture Resize Mode

contain

The entire image is scaled down to fit inside the screen, without changing the height and width ratio of the image.

Background Picture Resize Mode

stretch

The image's height will change to fill the screen length-wise.

Background Picture Resize Mode

repeat

The image repeats to cover the screen. The image's height and width ratio do not change.

Background Picture Resize Mode

center

The image is positioned in the middle of the frame.

Property

Value

Description

Visible

visible

Users can see the Container.

Visible

invisible

Users cannot see the Container.

Background Color

color

The background color of the Container.

Visible

solid

The Container’s border is a solid line.

Visible

dotted

The Container’s border is a dotted line.

Visible

dashed

The Container’s border is a dashed line.

Border: Color

color

The Container’s border is the color selected.

Border: Width

number in pixels

The width of the Container’s border is defined by a custom number of pixels.

Border: Radius

number in pixels

The radius of the Container border’s corners is defined by a custom number of pixels.

Shadow: Color

color

The Container’s shadow is the color selected.

Shadow: Opacity

number between 0 and 100

The opacity of the Container’s shadow.

Shadow: Radius

number in pixels

The radius of the Container shadow’s corners is defined by a custom number of pixels.

Shadow: Offset

number in pixels

How far the Container’s shadow should be offset, in height and width, is defined by a custom number of pixels.

Property

Value

Description

Margin

top

The margin between the Container’s top border and the next Container as defined by a custom number of pixels.

Margin

bottom

The margin between the Container’s bottom border and the next Container as defined by a custom number of pixels.

Margin

left

The margin between the Container’s left border and the next Container as defined by a custom number of pixels.

Margin

right

The margin between the Container’s right border and the next Container as defined by a custom number of pixels.

Padding

top

The padding between the Container and its top border as defined by a custom number of pixels.

Padding

bottom

The padding between the Container and its bottom border as defined by a custom number of pixels.

Padding

left

The padding between the Container and its left border as defined by a custom number of pixels.

Padding

right

The padding between the Container and its right border as defined by a custom number of pixels.

Layout Blocks

To access the blocks specific to the Layout component:

Navigate to the Blocks tab.
In the component tree on the left, click the Layout component.
A drawer of Layout-specific blocks opens.

Block Image

Description

If the Layout is scrollable, you can use this block to scroll the user to the end of the Layout. For example, a user clicks a button in a chat app, and the Layout scrolls to the end of the chat history to see the most recent messages.

If the Layout is scrollable, you can use this block to scroll the user to the start of the Layout.

Sets the Layout’s height to a custom number of pixels.

Gets the Layout’s height in pixels.

Gets the Layout’s computed height, the on-screen dimensions of the Layout, after it has been rendered on-screen. The value returned is an integer, representing the height of the Layout in pixels.

Sets the Layout’s width to a custom number of pixels.

Gets the Layout’s width in pixels.

Gets the Layout’s computed width, the on-screen dimensions of the Layout, after it has been rendered on-screen. The value returned is an integer, representing the width of the Layout in pixels.

When set to true, sets the Layout to visible, meaning the Layout is visible to users.

When set to false, sets the Layout to invisible, meaning the Layout is not visible to users.

Gets the Layout’s visibility status. Returns true (visible) or false (invisible).

Set the position of the upper left corner of the Layout on the X-axis, where the left side of the screen is X=0.

Get the position of the upper left corner of the Layout on the X-axis, where the left side of the screen is X=0.

Set the position of the upper left corner of the Layout on the Y-axis, where the top of the screen is Y=0.

Get the position of the upper left corner of the Layout on the Y-axis, where the top of the screen is Y=0.

Set the Layout’s background color.

Get the Layout’s background color.

Set the Layout's background picture. Click the dropdown menu to select an image from your computer.

Get the Layout's background picture.

Set the Layout’s background picture resize mode. See the Layout Properties section for definitions of the acceptable values.

Get the Layout’s background picture resize mode.

When set to true, sets the Layout to scrollable for users.

When set to false, sets the Layout to scrollable for users.

Gets the Layout’s scrollable status. Returns true (scrollable) or false (not scrollable).

When set to true, sets the Layout’s scroll bar to visible for users.

When set to false, sets the Layout’s scroll bar to invisible for users.

Gets the Layout’s scroll bar visibility status. Returns true (visible) or false (invisible).

Container Blocks

To access the blocks specific to the Container component:

Navigate to the Blocks tab.
In the component tree on the left, click the Container component that is nested under the Layout component.
A drawer of Container-specific blocks opens.

Create a Custom Data Viewer

To save a Layout as a Data Viewer:

When you're happy with the Layout you have customized, ensure it is selected in the component tree.
Click the vertical ellipsis next to the Layout's name in the properties panel.
Select Save as Data Viewer Layout.
Give your Data Viewer Layout a detailed name.
Select the Layout Type you want to create. - List for a Data Viewer List - Grid for a Data Viewer List.
Click OK.

To use a saved Layout as a Data Viewer:

Click the Create New Screen icon at the top of the component tree in the Designer.
Drag a Data Viewer List or Data Viewer Grid onto your screen.
Reposition and resize as necessary.
Click the sample template to access the Data Viewer templates available to you.
Click to select the Layout you saved as a Data Viewer from the bottom of the template library.
Map your data source columns to components within your custom Data Viewer Layout.

Ads by AdMob

1. AdMob Overview

AdMob is the most popular ad network for monetizing mobile apps today.

We highly recommend that you only add ads to your app after it has been completed and you have a good idea of how users will move through your app. Once your app is complete, you can go back in find natural points to add the different types of ads for your users.

2. Setup Your AdMob Account

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

Click on the Apps tab in your AdMob Sidebar
Click View All Apps
Click the name of the app associated with the ad unit.
Click on the Add Ad Unit button
Select the type of ad you wish to add (Note: Thunkable only currently supports Banner, Interstitial, or Rewarded Ads).
Add a name for your Ad Unit (e.g. "Banner Ad")
Click the Create Ad Unit button

3. Join Thunkable's MCM Network

To download and publish Thunkable apps that contain ads, you must first be a member of Thunkable's MCM (Multiple Customer Management) network.

By joining this network, you consent to sharing 10% of your AdMob revenue for all apps you have currently on AdMob with Thunkable to support maintenance costs.

4. Submit Your App For Review

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
Apps that show an Interstitial ad or Video ad on startup - these ads must be implemented properly in your app

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

If your app is rejected, the Thunkable AdMob team will send an email to the address used in your submission and you will be provided with an explanation and a recommendation for changes to make to get your app approved upon re-submission.

You are welcome to submit the same app for approval multiple times.

5. Types of Ads

Banner ad

The Banner ad is a rectangular image or text ads that occupy a spot within an app's layout.

AdMob banner ads are the simplest ad format to implement and are recommended for beginners. No blocks are needed to show your Banner ad to your end users.

The first banner ad will load when ready and will reload a new ad every minute.

Properties

AdMob Banner

Name

Description

Data Type

Ad Unit ID (Android)

Ad Unit ID for showing your ad on Android devices

Text

Ad Unit ID (iOS)

Ad Unit ID for showing your ad on iOS devices

Text

Test Mode

Toggle whether real ads or sample ads should display in your app. Set this to true while testing your own app.

True/False

Layout

Name

Description

Data Type

Location of top left corner of Banner ad on Y-axis, where the top side is Y=0

Number

Visible

Set whether the Banner ad component is visible

True/False

Interstitial Ad

Interstitial ads are full-screen ads that cover the interface of their host app.

These should displayed at natural transition points in the flow of an app, eg. between activities, between levels in a game. The user can click on or close the ad.

There is a limit of one interstitial ad component per app, but you can show the ad multiple times.

Adding an Interstitial ad to your app

To add an Interstitial ad to your app:

Go to your Blocks tab
Click on the icon next to the Ads drawer of blocks
Select AdMob Interstitial

Properties

You will see a dialog where you can set the following properties:

Name

Description

Data Type

Ad Unit ID (Android)

Ad Unit ID for showing your ad on Android devices

Text

Ad Unit ID (iOS)

Ad Unit ID for showing your ad on iOS devices

Text

Test Mode

Toggle whether real ads or sample ads should display in your app. Set this to true while testing your own app.

True/False

Blocks

Events

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

Functions

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

Ad Unit ID (Android):

Ad Unit ID (iOS):

Test Mode:

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

There is a limit of one rewarded video ad component per app, but you can show the ad multiple times.

Adding a Rewarded Video ad to your app

To add an Rewarded Video ad to your app:

Go to your Blocks tab
Click on the icon next to the Ads drawer of blocks
Select AdMob Rewarded Video

Properties

You will see a dialogue where you can set the following properties:

Name

Description

Data Type

Ad Unit ID (Android)

Ad Unit ID for showing your ad on Android devices

Text

Ad Unit ID (iOS)

Ad Unit ID for showing your ad on iOS devices

Text

Test Mode

Toggle whether real ads or sample ads should display in your app. Set this to true while testing your own app.

True/False

Blocks

Events

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

Functions

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

Properties

Ad Unit ID (Android):

Ad Unit ID (iOS):

Test Mode:

7. 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. You must change this to your own Publisher and Ad Unit ID before publishing.

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.

8. Download and Publish

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 publish, you'll simply need to set test mode = false.

Build Your App!

Once approved, apps can be downloaded and published without further review.

9. iOS and AdMob Permissions

With iOS 14.5 and above, 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:

Troubleshooting

If you are not seeing ads appear in your app, it may be due to the following reasons:

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

Adding error handling to your AdMob blocks can better help troubleshoot issues

Data Sources

Connecting your project to a data source allows you to work with the information that you have stored in Airtable, Google Sheets, Webflow or a local table.

The data sources blocks allow you to perform a variety of CRUD (Create, Read, Update, Delete) operations on records you have stored in Airtable, Google Sheets, Weblow or a local tables.

Connect Your App to a Data Source

There are two ways to connect your app to a source:

Add a Data Viewer (list or grid) to your project. More on Data Viewers is available here: Data Viewers, OR
Click the Data Sources icon in the menu on the far left and click the ⊕ icon.
In the modal that appears, select a previously connected Data Source, or add a new one.

Create your Own Table

To create your own table as a data source:

Give your local data source table a name.
Click Create.
To add data to your local table, copy and paste it from another source or click into a cell and type to input the data.
To modify the table's columns:
- To update the table’s column headers, click their names and typ a new header name.
- To add additional columns, click the + New Column button.
- To delete columns, click the x in the column’s title box.
To modify the table's rows:
- To add additional rows, with your cursor in the bottom row, press your keyboard’s enter or return key.
- To delete a row, right-click on it and select Remove row.
Select your preferred storage option:
- App Data Source - If the data is changed while the app is open, the table's data resets when a user of your app closes and reopens the app. This reduces the time it takes for the app to load on the user's device.
- Stored Data Source - If the data is changed while the app is open, the table's data persists when a user closes and reopens the app.
When your table is complete, click the X in the upper right.
The newly created local data source is now listed in your project's list of data sources.
- Click the pencil icon to rename the data source.
- Click the data source's name to review and edit the data.
- Click the trash can icon to delete the data source from your project.

Airtable

API Key (supported until Jan 31, 2024)
OAuth

Connecting by API Key

Navigate to your Airtable account page.
Copy your API key (a 14-character code beginning with "key").
Return to your Thunkable tab.
Paste the copied Airtable API token into the corresponding field.
Click Refresh to see your Airtable bases.
Select the base you want to use as your data source.
Click Create.

Connecting by OAuth

Click Connect to Airtable.
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. Steps 6 and 7 only apply when creating a new data source.
Select the correct base from the dropdown menu.
Click Create.

Use a Custom View

In Airtable, a table is similar to a sheet in a spreadsheet. You can have multiple tables within your Airtable base, and each table can have multiple views. A view indicates how the data is presented within the table. For example, you can use views to show only specific fields or records and apply other configurations to manage the information in that view. The initial default view for an Airtable table is the grid view.

When connecting an Airtable base as your Thunkable project’s data source, you can select a custom view instead of the default grid view. This will apply only to the first table in your base. For subsequent tables, Thunkable will use the default grid view. If you have a base with two tables and the second table has a custom view, you can reorder the tables within the base in Airtable so that the custom view is applied to the correct table.

Once you've connected your Airtable the Thunkable account via OAuth, API keys are no longer used.

Google Sheets

In Google Sheets, the entire document is considered to be the data source.

To use a Google Sheet as a data source the following must be true:

The first row in your sheet must be a header row and every column must have a header.

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

Webflow

When using Weblow as the data source for your Thunkable app, you’ll connect to a Webflow CMS or Content Management System collection.

To connect your Webflow CMS to your Thunkable project, you have two options:

API Key
OAuth

Connecting by API Key

Within the Webflow platform:

Navigate to your site settings.
Click the Integrations tab
Under the API access header, click Generate API token.
Copy the Webflow API token.

Within the Thunkable platform:

Paste the copied Webflow API token into the corresponding field.
Click Refresh to see your Webflow sites.
Select the site you want to use as your data source.
Click Create.

To protect the quality of its service, the Webflow CMS API default rate limit is 60 requests/minute. Exceeding this limit will result in an error on the Thunkable platform, so please keep this in mind as you build your app.

Connecting by OAuth

Click Connect to Webflow.
A Webflow authorization screen opens.
Select the sites or Workspaces you want to authorize access to.
Click Authorize app.

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

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 in the block itself and pass the unique row id as an input.

Note that each row has its own unique 24 character ID. You must use this ID to refer to rows of your Airtable and Local data sources in the blocks below.

If your data source is a Google Sheet, you can refer to the row by its integer position (1 for the first row, 2 for the second row, etc.)

The number of rows in block returns an integer corresponding to how many rows are in a given table.

Update

You can use the update value in block to modify or update an existing cell in your data table. The column name is specified in the block itself. Both the row id and new value are passed as inputs.

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.

Speech

Use text-to-speech, speech-to-text, and translation functions in your app

Video Tutorial

Text to Speech

Read a piece of text aloud in a specified language.

Supported text to speech languages

Language

Android

iOS

Web

Afrikaans

✅

Albanian

❌

✅

Arabic

✅

Armenian

✅

❌

Azerbaijan

✅

Basque

✅

Belarusian

✅

❌

Bengali

✅

❌

Bosnian

❌

✅

Bulgarian

❌

✅

❌

Catalan

✅

Cebuano

✅

Chinese China

✅

Chinese Hong Kong

✅

Chinese Taiwan

✅

Croatian

❌

✅

Czech

✅

Danish

✅

Dutch

✅

English GB

✅

English US

✅

Esperanto

✅

Estonian

✅

Finnish

✅

French

✅

Galician

✅

Georgian

✅

❌

German

✅

Greek

✅

Gujarati

✅

❌

Haitian Creole

✅

Hebrew

✅

Hill Mari

✅

❌

Hindi

✅

Hungarian

✅

Icelandic

✅

Indonesian

✅

Italian

✅

Irish

✅

Japanese

✅

Javanese

✅

Kannada

✅

❌

Kazakh

✅

❌

Khmer

✅

❌

Korean

✅

Kyrgyz

❌

✅

❌

Latin

❌

✅

Latvian

✅

Lithuanian

✅

Luxembourgish

✅

Macedonian

✅

❌

Malagasy

✅

Malay

✅

Malayalam

✅

❌

Maltese

✅

Maori

✅

Marathi

✅

❌

Mari

✅

❌

Mongolian

✅

❌

Nepali

✅

❌

Norwegian

✅

Papiamento

✅

Polish

✅

Portuguese Brazil

✅

Punjabi

✅

❌

Romanian

✅

Russian

✅

Scottish

✅

Serbian

✅

❌

Sinhala

✅

❌

Slovakian

✅

Swahili

❌

✅

Slovenian

✅

Spanish

✅

Sudanese

✅

Swedish

✅

Tagalog

✅

Tajik

✅

❌

Tamil

✅

❌

Tatar

✅

❌

Telugu

✅

❌

Thai

✅

Turkish

✅

Udmurt

✅

❌

Ukrainian

✅

❌

Urdu

✅

❌

Uzbek

✅

Vietnamese

✅

Xhosa

✅

Translation

Recognize Speech

Recognize a piece of audio in a given language. Returns a text transcription of the speech.

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.

Adding a Web API to your app

To add a Web API component to your app:

Go to your Blocks tab.
Scroll to the bottom of your blocks panel on the left side and find the Advanced section.
Click the expand chevron to show the Advanced invisible components.

A Web API component properties dialog launches. See the chart below for descriptions of the various properties. Click Submit to create the Web API component, or Delete to dismiss the dialog without creating the component.

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

QueryParameters

Specifies some parameters of the data

Optional

Body

Body of your API call. Select from String or Multipart Form Data.

Optional

Headers

Specifies some meta-data, eg: usernames and passwords

Optional

Edit properties of your Web API

Once you have added at least one Web API component to your app, you will be able to view all of your Web API components under the Web APIs drawer in the Advanced section of the Blocks tab.

To edit the properties of a Web API component, click on the ⚙ icon next to the component's name to bring up the properties dialog. You will be able to change the properties and click Submit to save your changes, or click Delete to delete the component.

Setting Query Parameters and Headers

Query parameters and headers can be set in the designer or in the blocks editor. In the example below you can add any property:value pair you want. You can add as many params to your app 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 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

Get Simple Properties

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

Convert JSON to 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:

Get Properties from Lists

The JSON output of the Google Maps Distance Matrix API seems similar to the Open Weather Map API with one notable exception: it includes objects, properties and 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

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

"Any Component" Blocks

The components in the ‘Any Component’ drawer are great tools to use instead of repeatedly using the same combination of blocks. They will also help you use fewer blocks in your app.

For example, to change the colour of any button on the screen to blue (the blocks on the left) we have to use 6 blocks. Using the ‘Any Component’ Blocks (on the right), we only need to use 2 blocks.

What is the Generic Event Block?

With the Generic Event block, you can set when an event will take place.

For example, in the picture below, any button you click on the screen will change the text of Label1 to be “Thunking Is Fun!”.

Using the Generic Event Block

With the first dropdown menu, you can select what type of component you want to handle events for.

With the second dropdown menu, you can choose when an event will take place.

The Component Item Block

If you want to customize the button that you clicked on the screen, you can use this block.

With these blocks, anytime a button is clicked, the text of that button will be set to “I Love Thunkable!”.

What is the Create Block?

With the Create Block, you can program your app to create visible components (things you can see--like button or images) while it is running.

When you use the create block, your app will automatically create something. For example:

This picture shows that when Screen1 Opens, your app will create a button and put it on Screen1.

Using the Create Block

With the first dropdown menu, you can select what type of visible component you want to create.

With the second dropdown menu, you can select where you want to position the component you are creating on the app’s screen.

Note: The options in the second and third drop down will vary depending on which component you select from the first dropdown. The following block creates a new button and places it as the first item on Screen1.

The table below explains the different block options:

Property

Description

As first in

This creates and positions the component as the first item in the specified row, column or screen.

As last in

This creates and positions the component as the last item in the specified row, column or screen.

Before

This creates and positions the component before the component selected in the third dropdown menu.

After

This creates and positions the component after the component selected in the second dropdown menu.

Note: You can replace the third dropdown with any block that represents a visible component using the component block. It can also be a variable function parameter, or any block whose value is a component.

The Component Item Block

If you want to customize the component you just created, you can use this block.

These blocks say, when any button on the screen1 is clicked, create a new label. Next, set the new label’s text to “I was just created!”.

What is the Clone Block?

The clone block makes a copy of an existing component in your app. For example, if you have a button on your screen and want to create another button that looks exactly the same, you can use the clone block to do that.

You can use the clone block instead of repeatedly using the same combination of blocks. This will also help you use less blocks.

Note: You cannot clone screens and invisible components with the clone block.

Using the Clone Block

With the first dropdown menu, you can select the component that you want to clone.

With the second dropdown menu, you can select where you want to position the cloned component relative to another component on the app’s screen.

Property

Description

As first in

This clones and positions the component as the first item in the specified row, column or screen.

As last in

This clones and positions the component as the last item in the specified row, column or screen.

Before

This positions the cloned component before the component selected in the third dropdown menu.

After

This positions the cloned component after the component selected in the third dropdown menu.

Note: The options in the third drop down will vary depending on which component you select from the first dropdown.

The Clone Item Block

If you want to customize a cloned component, you can use this block.

What is the Generic Method Block

The Generic Method Block can be used to call functions for components that were made with the clone or create blocks.

The blocks above say that when Button1 is clicked, create a Web Viewer component and call the reload function for it.

Using the Generic Method Block

With the first dropdown menu, you can select the component you want to call a function for.

The second dropdown menu allows you to select which function you want to call.

Notes: The options in the second drop down will vary depending on which component you select from the first dropdown. Also, the component you plug-in needs to be of the same type as the one in the first dropdown.

What is the Generic Set Block?

The Generic Set Block allows you to change properties such as text and colour of any component that is on the app’s screen.

Using the Generic Set Block

There are two ways to change the text of a component using the Generic Set Block.

Use the dropdown menu to select the component whose text you want to set

2. You can use the Component Item Block with the Generic Set Block to change the text of the component that was clicked.

What is the Generic Get Block?

The Generic Get Block allows you to get properties (such as text and color) of any component that is on the app’s screen.

You can use the dropdown menu to select the component whose text you want to get.

Using the Generic Get Block

There are two ways to get the text of a component using the Generic Get Block.

Use the dropdown menu to select the component you want to get the text for.

2) You can use the Component Block, as well as the Component Item Block, with the Generic Get Block to select the component you want to get the text of.

What is the ‘All Components in Container’ Block?

The ‘All Components in Container’ block groups together all the visible components in a container (ie. Row, Column or Screen) that are of the same type, in a list.

Using the ‘All Components in Container’ Block?

The ‘All Components in Container’ block can be used with the loop block from the control drawer.

The combination of blocks above goes through all the buttons on screen1 and sets the text of each button to “Thunkable!”.

What is the Remove Block?

The Remove Block allows you to delete a component from your app. You can delete a component that you dragged out from the designer, cloned, or made with the create block.

Using the Remove Block?

There are two ways to delete a component using the Remove Block.

Use the dropdown menu to select the component you want to remove from the app.

2. You can use the Component Item Block with the Remove Block to remove the component that was clicked. You can also use a variable, function parameter or any block whose value is a component.

The Component Block

The Component Block has a dropdown menu which lists all the components that are on the screen.

You can select one of the components from the menu and use it within any of the blocks that have an input for a component. Some examples include: the clone, create or generic event block.

With these blocks, when Screen1 is opened, the Component Block sets the text of Button3 to be “I Love Thunkable!”.

Bluetooth Low Energy

Description

Bluetooth Low Energy, or BLE, is used to wirelessly connect two devices to one another. The BLE component allows you to find and connect to BLE devices and to communicate directly with them.

Add a Bluetooth component to Thunkable

To add a Bluetooth component to your app:

Go to your Blocks tab
Find the Advanced drawer of blocks. Click the drop-down menu icon to show the Advanced invisible components
Click the ⊕ icon next to the Bluetooth drawer

You will see a dialog to create your Bluetooth component. Click Submit to create the component, or Delete to dismiss the dialog without creating the component.

Deleting your Bluetooth Component

Once you have added at least one Bluetooth component to your app, you will be able to view all of your Bluetooth components under the Bluetooth drawer in the Advanced section of the Blocks tab.

To delete a Bluetooth component, click on the ⚙ icon next to the component's name to bring up the properties dialog and click Delete.

Functions

Version 1 of the BLE component in Thunkable ✕ contains 5 functions, each of which are documented in greater detail below.

Scan

This function is used to scan for nearby BLE or Bluetooth enabled devices. Scanning happens for 10 seconds. Once scanning has successfully completed then a list of the available device ids and a list of available names will be returned. If the scanning function can not be completed then an error will be returned.

Outputs

Output Name

Data Type

Description

Device Ids

List

Returns a list of the IDs of the available devices

Device Names

List

Returns a list of the names of the available devices

error

Text

Returns an error message from the function

Connect to Device Id

The Connect to Device Id function allows your app to connect to a BLE enabled device based in the Id of that device.

Inputs

Input Name

Data Type

Description

Device Id

Text

Expects a text string with the device id you want to connect to

Outputs

Output Name

Data Type

Description

Device Name

Text

Returns the name of the device you have just connected to

error

Text

If an error message is returned, returns the error. Else returns null

Connect to Device Name

When you know the name of the BLE device that you want to connect to you can use the Connect to Device Name block to connect directly to it. Please note that device names are not unique and it is relatively easy to change the name of a BLE device.

Inputs

Input Name

Data Type

Description

Device Name

Text

Expects a text block with the name of the device to connect to

Outputs

Output Name

Data Type

Description

Device Id

Text

Returns the ID of the device that you have just connected to

error

Text

If an error message is returned, returns the error. Else returns null

Disconnect

Use this block to send data as a string of text to a BLE device.

You need to be connected to another Bluetooth device in order to use this block.

Inputs

Input Name

Data Type

Description

characteristic UUID

Text

Expects a text block with a 32-bit UUID for the BLE type, service or profile required

data

Text

Please follow all of the included steps to setup and test your In App Purchases via the Android Play Store.

Android App Store Setup

- we cover this below

Step 1 - Create a payments profile

Click Create payments profile. Make sure to have your business information available to set up your payments profile.
Under "Payments profile," click the down arrow and select Create payments profile.
Name and address:
- Enter the legal name of your business as you want it to appear on your payments profile. This information will be shown to your customers and also on your receipts.
Primary contact: Enter the name of an authorized representative for your company who Google can contact if we have questions about your payments profile. Provide an email address and a phone number (optional).
Enter the following public business information, or choose to match your public merchant profile and payments profile information:
- Enter your business website.
- Select the category of products that you sell.
- Your customer support email.
- The business/product name that'll appear on your customers' credit card statements.
  - Note: To help customers remember what they purchased and keep chargebacks to a minimum for you, use an appropriate credit card statement name.

After you create a payments profile it is automatically linked to your Play Console. Note: If you have set up a payments profile or merchant center account previously, it is already linked to your Play Console.

Step 2 - Create the item or subscription to purchase

Create in-app products

Before creating a product, make sure to plan your product IDs carefully. Product IDs need to be unique for your app, and they can’t be changed or reused after they’ve been created.

Product IDs must start with a number or lowercase letter, and can contain numbers (0-9), lowercase letters (a-z), underscores (_), and periods (.).
You can’t change or reuse a product ID after the product has been created.
Note: The product ID android.test is unavailable for use, along with all product IDs that start with android.test.

To create an in-app product:

Click Create product.
Enter your product details.
- Product ID: A unique ID for your in-app product.
- Title: A short name of the item (up to 55 characters, but we recommend limiting titles to 25 characters to display properly in all contexts), like "Sleeping potion."
- Description: A long description of the item (up to 200 characters), like “Instantly puts creatures to sleep."
- Icon: A unique and accurate image for your product. Don't include text, promotions, or branding. Your product icon is shown on your store listing and during the purchase flow.
  - 32-bit PNG
  - 512 px by 512 px
  - Up to 1 MB
- Multi-quantity: Allow multi-quantity checkout for this product. Users will be able to purchase in multiple quantities within the threshold of their country/region. Note the following information:
  - Multi-quantity checkout is not available in some countries/regions.
  - In most countries/regions where Multi-quantity checkout is available, the SKU price threshold is around US$100. To allow multi-quantity checkout, you will need to adjust the price (before tax) to below the threshold in each country/region.
- Play Points exclusive: Make your product available only in Google Play Points.
Save your changes and click Activate to make your in-app product available to users..
- To be available for purchase, a product needs to be active, and its app needs to be published.

Languages and translations

Subscription Overview

Availability

Subscription and free trial time periods

Weekly
1 month
3 months
6 months
Annual

Add a subscription to your app

Before creating a subscription, make sure to plan your product IDs carefully. Product IDs need to be unique for your app, and they can’t be changed or reused after they’ve been created.

Product IDs need to start with a lowercase letter or a number and must be composed of only lowercase letters (a-z), numbers (0-9), underscores (_), and periods (.)
Note: The product ID android.test is unavailable for use, along with all product IDs that start with android.test.

To add a subscription:

Click Create subscription.
Enter your subscription details.
- Name: A short name of the item (up to 55 characters, but we recommend limiting titles to 25 characters to display properly in all contexts) such as "Sleeping potion."
- Description: A long description of the item (up to 80 characters) such as "Instantly puts creatures to sleep."
- Benefits: Provide up to 4 benefits, which each describes a feature of the subscription (up to 40 characters each)
  - Benefits should highlight the features to give users a better idea of what your subscription offers, like “Full catalog of TV shows and movies.”
  - Since not all users will be eligible for a promotional price or free trial, the benefit should not mention free trial or price, for example “Try 7 days free” is not allowed.
Enter pricing details in the “Price” section:
- Billing period: Choose the time interval between billing statements.
- Default price: Enter a default price or import from an existing pricing template; this is used to generate local prices in other countries. Local prices use today’s exchange rate and country-specific pricing patterns. Countries without local currency support use your default price.
Choose and define additional options in the “Subscription settings” section:
Click Save.
Click Activate to make the subscription you created active.
- To be available for purchase, a product needs to be active, and its app needs to be published.

Step 3 - Test in-app billing with application licensing

With application licensing, you can set up a list of Gmail accounts to test your in-app billing and subscription integration. Your own publishing account is always considered a licensed tester.

Set up application licensing

Click Setup > License testing.
In "Add license testers" box, enter your testers' Gmail addresses.
In the bottom right corner of the screen, select Save changes.

Once your list is ready, make sure that:

Test in-app billing and subscriptions

You're able to purchase your own app, in-app item, or subscription as a test purchase. Once you've set up application licensing, authorized users can also purchase in-app products and subscriptions without charging the users’ accounts.

When making a purchase from a license test user, you will see two choices for payment method:

“Test card, always approves”
“Test card, always declines"

Before they can be tested, your in-app products and subscriptions need to be published.

Test one-time products

Test consumable products

When testing consumable products, we recommend testing a variety of situations, including the following:

A successful purchase where the user receives an item. With a license tester, you can use the Test instrument, always approves payment method.
A purchase where the payment method failed to be charged, and the user should not receive the item. With a license tester you can use the Test instrument, always declines payment method.
Ensure items can be purchased multiple times.

Test non-consumable products

Non-consumables should be tested the same as consumables, but you should verify an item cannot be purchased again within your app. Be sure to verify purchase acknowledgement for both non-consumables and consumables (when applicable) since the logic to process each the two types of purchases vary.

Test subscription-specific features

The purchase flows for one-time products and subscriptions are similar, but subscriptions have additional scenarios, such as successful or declined subscription renewals. To test renewals, you can use the Test instrument, always approves and Test instrument, always declines payment methods that are available for license testers, as shown in figure 1. Use these payment instruments to test scenarios beyond the successful subscription scenario.

Renewal periods

Test subscriptions renew more quickly than actual subscriptions, and test subscriptions can renew a maximum of six times.

The following table lists the testing renewal times for subscriptions of various durations. These times are approximate. You may see small variations in the precise time of an event. To compensate for variation, call the API to view the current status after every subscription expiration date.

Production subscription period

Test subscription renewal

1 week

5 minutes

1 month

5 minutes

3 months

10 minutes

6 months

15 minutes

1 year

30 minutes

Time-based subscription features such as free-trials are also shortened for testing. The following table identifies the testing time periods associated with time-based subscription features:

Feature

Test period

Purchase acknowledgement

5 minutes

Free trial

3 minutes

Introductory price period

Same as subscription test period

Grace period (both 3- and 7-day)

5 minutes

Account hold

10 minutes

Pause (1 month)

5 minutes

Pause (2 months)

10 minutes

Pause (3 months)

15 minutes

Step 4 - Setup your Google Cloud account and Android Service Account

This next step is vital for subscriptions. If you don't complete this step, you wont be able to 'acknowledge' subscriptions. For android IAP, 'acknowledging' is how you complete the transaction and if not completed the transaction will revert and you as the developer will not make money on that purchase plus your users will likely have an unpleasant experience (i.e. they loose access to the thing they wanted to buy).

To do this process you need to make API calls. Before you can start making API calls, you need to set up API access to your Google Play Developer Account. This involves changes in both the Google Play Console and Google Cloud Console. The following instructions explain the four steps needed to start using the Google Play Developer API.

Link your developer account to a new or existing Google Cloud Project.
Enable the Google Play Developer API for your linked Google Cloud Project.
Authorize an API key for the Google Play Developer API in your linked Google Cloud Project.
Set up a service account with appropriate Google Play Console permissions to access the Google Play Developer API.

Link your account and project

Before you can access the Google Play Developer API, you must link your Google Play Developer Account to a Google Cloud Project. In most cases, we recommend that you create a new Google Cloud Project dedicated to your Google Play Developer Account, but you can link an existing project. Keep in mind that each Google Play Developer Account can only be linked to a single Google Cloud Project. If you have multiple apps in the same Google Play Developer Account, they all must share the same Google Cloud Project.

Create a new project

Click Create new project.

The Google Cloud Project is automatically created and linked to your Google Play Developer Account.

Use an existing project

If you are already a user of the Google Cloud Console, you can link to your existing Google Cloud Project by following these steps:

Choose the project you’d like to link. If your project isn't listed, verify that your user account is designated as Owner in the Google Cloud Project you want to link.
Click Link existing project.

Enable the API

Once you have set up the linked Google Cloud Project, you need to enable the Google Play Developer API for this project. To do this, you need to be an owner of the Google Cloud Project.

Under APIs, find the Google Play Developer API and click Turn on.

This directly updates the Google Cloud Project and the change takes effect immediately.

Authorize an API key

To use the API, you need an API key in your linked Google Cloud Project that is authorized to use the Google Play Developer API. Set this up in the Google Play Console.

Configure OAuth and Service Accounts

You need to configure access to the Google Play Developer API with an OAuth client or a service account. In most cases, you should use a service account to access the API.

Service accounts must be used in a secure environment, such as your server. The service account credentials need to be securely managed so they are not revealed to anyone that is not authorized to use the API.

The OAuth Client ID should be used if you need to access the API on behalf of an individual user. For example, if your website needs to access the Google Play Developer API from the web client on behalf of the user, you can use the Client ID. The user will be authenticated with their Google account instead of the service account. This allows you to make API calls on behalf of a user without compromising service account credentials.

Service account: A secure software service will access the API (most common)
OAuth clients: A user will access the API

Use a service account

Under Service accounts, click Create new service account.
Follow the instructions to create your service account.
During the process of account creation you need to grant your service account access to the Google Cloud Project in order for it to appear in the Google Play Console.
Click Grant Access to provide the service account the necessary rights to perform actions.
To use the Google Play Billing APIs, you must grant the following permissions:
- View financial data, orders, and cancellation survey responses
- Manage orders and subscriptions

Step 5 - Download your service key for later steps

3. Find and click on the service account in the list in the Google Cloud Platform

4. Click the Keys tab

5. Click "Add key" then "Create new Key"

6. Select JSON as the key type and click Create. The file will automatically download to your default download folder.

Drag and Drop

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. Complete the Thunkable Academy Course

Step 3. Test your project

Step 4. Download the Thunkable Live App

Step 5. Check out your Thunkable Projects page

Step 6. Create a new Project

Step 7. Components and Features

Step 8. Blocks

Minimum Requirements

Operating Systems (OS)

Browser

Signing In

Sign Up

Sign in‌

Sign in with Google

Sign in with Apple

Sign in with Email

Preview and Test your App

Overview

Web Preview

Thunkable Live App

Download the Thunkable Live App

Testing and Previewing with Thunkable Live

Troubleshooting

If you see a blank or white screen when you live test an app with UI components...

If changes that you make cause the app to crash...

If an image is not showing up on your device...

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

Create New Project

Public vs. Private Projects

Public Projects

Private Projects

Making Projects Public or Private

Read-Only projects

App Layout and Size

App Settings

1. Project Settings

App Description

App Name

Default App Layout

Icon

Best Practices

2. Splash Screen Image

Picture

Splash Screen Picture Requirements:

Background Color

Sample Splash Screens

3. Publishing Settings

App (Bundle) ID

Public App

Auto-increment Version

Ignore Notch Area

Notch Area Background Color

4. Android Publishing Details

Version Name

Version Code

5. iOS

Version Number

Tracking Usage Description (iOS only)

iOS Permissions

6. Integrations

Firebase Settings

Google Map Settings

AdMob Settings

iOS and Android App ID