Your projects Page

You can find your projects page at x.thunkable.com/projects. This is the first page you see when you sign in.

Viewing your projects

Thunkable lets you choose between viewing your projects in List View or Grid View.

You can decide whether to view your projects in List View or Grid View in the upper right corner of the page.

Filtering your projects

Search Bar

You can use the search bar to filter your projects by name

Filter public/private projects

PRO Thunkable creators are able to create private projects. You can use the Public and Private checkboxes to filter your projects, showing only public projects or only private projects.

Your Project Menu - Delete, Duplicate, and more

When you click on the 3 dots on a project card (Grid View) or list item (List View), you can see some project options.

You can delete your project, duplicate your project, or see your Project detail page.

Your Project Detail Page

On the Project Detail page, you can test out your app, similar to when it has been published as a mobile web app.

You can also view information about the project, such as its name, creator, project size, and how many times it has been remixed or favorited.

If the project is a remix of another project, the name and creator of the original project will be displayed.

One Product, Two Interfaces

The first thing you need to know as we welcome you to our Thunkable Docs is that we have two libraries of documents. One for each of the interfaces we currently offer:

Drag and Drop

Drag and Drop is our new platform interface that took our Creator's favorite features and functions from the previous interface (Snap to Place) and improved on them.

You'll know if you're looking for support with the Drag and Drop interface if your screen looks like this:

The Thunkable Docs to support users of the Drag and Drop interface are available here: Drag and Drop docs

Snap to Place

Snap to Place was our first foray into cross-platform app development. It is our old platform interface.

You'll know if you're looking for support with the Snap to Place interface if your screen looks like this:

You're in the right place if you're looking for the Thunkable Docs supporting our Snap to Place interface.

Additional Support Options

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

1. Thunkable Academy Not sure where to get started with the Drag and Drop interface? Check out the Thunkable Academy!

2. Community Want to connect with other Thunkable Creators? Ask a question and join the conversation in the Community!

3. Instructional Videos Enjoy instructional videos? Check out our library of tutorials available on YouTube.

4. Contact our Support Team Creators on our Pro, Business, and Team plans can click the chat icon in the upper right of a Thunkable Project page to connect with our team.

Pricing and Membership

You can get started building with Thunkable today for free. As you progress as a developer with Thunkable, we offer different membership tiers that allow you to build more and do more. This includes:

🖥️ Publishing web apps 💰 Showing AdMob ads in your app 🙈 Making private apps ⚡ Expedited publishing 📢 Adding push notifications to your app 📱 Creating a personalized splash screen and more!

Thunkable offers plans to suit individual and business needs. Read more about the memberships Thunkable offers.

Step 1. Sign in to Thunkable

Thunkable gives you a variety of ways to create your very own cross platform apps. To learn how to set up a Thunkable account, please read our article on signing in.

Step 2. Check out your Thunkable Projects page

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

Step 3. Try Our Tutorials

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

Step 4. Download the Thunkable Mobile App

With the Thunkable Live mobile app, you can preview your apps directly on your personal devices. To learn more, please click below.

Click on one of the links below to download the Thunkable mobile app.

If you don't have an iOS or Android device, you can set up an emulator on your computer that will display your apps.

Step 5. Components

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

Step 6. Blocks

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

In-platform Tutorials

To learn how to use Thunkable, try our in-platform tutorials. Click on the expand arrow on the left to open the tutorials panel. Click on a tutorial name to launch the video in a modal you can resize and move anywhere on the screen.

Video Tutorials

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

Community Tutorials

The Thunkable Community is where Thunkers share their ideas with the world. You can find a wide selection of staff and community-written guides and tutorials in the Thunkable Tutorials section.

To view or change your project settings, click on the ⚙ icon next to your Project name in the left-hand side bar. Your App Settings will appear on the right-hand side of the screen.

App Description

App Name

Best Practises

Since space is limited, we recommend a short one or two word app name

Avoid using the character "&" in your app name: at the moment, it prevents your app from being installed on your device

Project Name

App (Bundle) ID

This should follow a pattern like com.domain.creatorname.appname

Make sure none of the segments of this package name begins with a number. Make sure none of the letters in this package name has an accent (e vs ë).

Icon

Your app icon is the picture that represents your app on your mobile device. This icon will also appear on your listing in the Google Play Store or App Store, and as your project icon on Thunkable.

Please make sure that the file you upload does not have the same name as another asset that you are using for your app. This will cause an error.

Best Practises

Public/Private App

Auto-increment Version

Play sounds in background

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

AdMob Settings

iOS App ID

Android App ID

Tracking Usage Description (iOS only)

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

Android

Version Name

Version Code

Keystore

iOS

Ignore Notch Area

This property enables you to remove the Safe Area View which Thunkable adds to the app automatically. If you set this property to be true, the screen background color will extend to full screen and there won’t be any white area. However, you need to manually take care of the notch in your app design, like adding extra space, in order to avoid the app element being blocked by the notch.

Notch Area Background Color

This property enables you to set the safe area view color. With this, you can customize the background color of the white area. Please note, this is an app level setting and you won’t be able to customize the color at the screen level.

Version Number

iOS Permissions

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

API Keys

What is the Thunkable Live App?

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

1. You can Live Test your project. Any changes you make in your browser are displayed on your device immediately.

2. You can Live Preview any of your projects, directly on your device, without the need to be logged in to your computer.

Download the Thunkable Live App

The Thunkable Live app allows you to live test your app on your device, in real-time, while you are building it. Not even hard core developers have this super power. You can also preview all your app projects from the comfort of your mobile device.

If you don't have an iOS or Android device, you can also set up an emulator on your computer that will mimic what you would see on an actual device.‌

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

Live Test

While live testing, any changes that you make to your project should be reflected in your app. Bear in mind that the Thunkable Live app doesn't check your project for errors. Some changes that you make may crash the app. If this happens simply exit out of the app and re-open it.

Getting started

From any of your Thunkable projects, click on the Live Test button at the top of the screen to begin live testing.

‌The next pop-up you see depends on whether you select to sign in with Google or to sign in by email.‌

If you select to sign in with Google:

Clicking on the Live Test button will remind you to open Thunkable Live on your device.

Sign in with the same Google account in Thunkable Live to preview your projects directly on your device.

If you select to sign in by Email:

When you click the Live Test button you will be prompted to enter a code into your computer.

To find this code, open Thunkable Live on your device and click Email sign in - Generate Test Code.

Enter this code into the first prompt and you will be able to live test your app.

Live Preview

For the first time, you can live preview all your app projects from the comfort of your mobile device. Simply login and you should see a list of all your projects on your Thunkable Live app.

Troubleshooting

Common issues with the Thunkable Live app

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

• If you have a Navigator as the first item in your tree, make sure your screen is dropped within it

• You have unconnected blocks

• You have an event triggered by a Screen. Start which may be causing the screen to crash

• Your app and desktop may not be logged into the same account

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

• (Android only) You are trying to set the value of a Slider in your blocks

• (Android only) You are trying to set the latitude and longitude of a Map in your blocks

Image is not showing up on your phone

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

Preview your App on the Web

Preview on the Web allows you to live preview your own project directly from your browser. Simply click on "Live Test" to preview your own app in a pop-up window.

You can also preview any public app, directly from the Project Detail Page. Here's one example, but you can find thousands of others in the public gallery.

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.

It is important to note, however, that Web Preview does not support some app features. This is because some app features require functionality only available on a mobile device, such as push notifications, accelerometer, and Bluetooth low energy. For a full list of features that cannot be tested with Web Preview, please see here: Publish as a Web App.

Unsupported Components

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

It's best to keep app sizes as small as possible to preserve space on people's devices. All app projects have a 50MB limit, and free Thunkable accounts have a 100 MB total storage limit. If you need more storage for your account, you can upgrade to our Builder plan to get 1 GB of space for your projects or to Advanced to get unlimited space.

Limits

You can view a project's app size on the project's details page:

The main contributor to an app's size are files (also known as assets). To add or delete files, click on the Assets button in the side bar. Then click the "+" icon to manage all the files in your project.

Operating Systems (OS)

Thunkable recommends and actively supports mobile operating systems that receive security updates.

This includes iOS 16+ and Android 12+.

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

Account storage limits

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

Free Thunkable accounts have 100MB of storage.

Builder Thunkable accounts have 1GB of storage. Advanced Thunkable accounts have unlimited storage.

Read more about Thunkable plans here.

If you are near the limit, you may be able to create additional storage by removing projects that you no longer need like an old version or copy of a project.

Maximum recommended asset size

We recommend that each of your asset files not exceed 50KB -100KB. Using smaller file sizes in your project will result in faster loading times for your users.

Naming Your Assets

Thunkable recommends using file names that do not contain whitespace characters.

Here are two naming methods we recommend:

1. Snake Case - each space is replaced by an underscore (_) character, and the first letter of each word written in lowercase.

   • example_one.png

   • here_is_another_example.html

2. Camel Case - writing phrases without spaces or punctuation, indicating the separation of words with a single capitalized letter, and the first word starting with either case.

   • exampleOne.png

   • hereIsAnotherExample.html

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

Sign In Screens

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

Family & Friends

Since mobile apps are radically easier to make with Thunkable, why not make apps just for the most important people in your life? We've started experimenting with some ways that apps have actually helped us feel closer to the ones we love.

Charlie Checker

#cloudvariables #firebase #share

(Private) Social Media

Social media was originally invented for people to share things with people they trust. With the evolution of popular platforms today, it's increasingly hard to simply keep our channels private enough so our conversations and photos are less filtered and bringing us all joy (instead of FOMO).

Snap Gram

#cloudvariables #firebase #mediadb #cloudinary #camera

Color Chat

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

City Living

Cities are an increasingly popular place to live and work but navigating them can be a challenge. Here are a few apps that aspire to make that simpler.

Translator

Designed for your work and holiday travel, translator is an app that translates English text and speaks it aloud into 93 languages in the world.

#cloudvariables #firebase #mediadb #cloudinary #camera

High Performing Teams

The highest performing teams are said to be ones full of trust, empathy and psychological safety. Here are a few apps that may help your favorite teams build these important qualities.

Office Weather & Traffic

Designed for teams that are spread out across different parts of the world, this simple app helps you quickly keep track of the external conditions that may be affecting your colleague's work and mood. At the very least, it may enable you to avoid talking about the weather and onto more important things. Customize for your team by editing the information in the OfficeDB component. The app pulls the latest temperature from the Open Weather Map API and as a bonus the latest traffic from Google Maps. There is a limit of 60 calls per minute in the free tier of the Open Weather Map API.

#webapi #openweathermapapi #googlemaps #localdb #camera

Work Credit

Work Credit is a team counting app for thankless tasks. The app shares data for the team in a private Firebase realtime database account so Thunkers looking to create one for their team will need to set one up. Work Credit has really transformed how our office works at Thunkable -- no longer are thankless tasks thankless. The winner each week gets to pick out our lunch destination on Friday (which is quite an honor)

#cloudvariables #firebase

Mark's Guide to 1:1s

For managers out there, here's a helpful set of questions to guide your next 1:1 meeting from Mark, the beloved VP of engineering at Thunkable. For our team, this app is a great way for best practices to quickly spread throughout an organization. You can easily customize the questions by simply editing the question in the local database.

#localdb #accelerometer

Start-Up Hacks

Starting your own business is a gratifying endeavor but most new business don't make it for the long haul. Here are a few apps that can help support the businesses that you love

New Market Goods

Fun & Games

Mobile games and puzzle apps are not just a great form of entertainment in those in between moments but they also great mediums for monetizing your app with ads.

Beaver Bingo

Beaver Bingo is a simple puzzle app that we think is great for parties. Party goers take photos of the items in the nine boxes, which together reveals a hidden message. The app features the Image Recognizer component from Microsoft. No goats were harmed in the making of this app.

#imagerecognizer #microsoft #camera #sound #timer

Shake Dice

#accelerometer #admob

Style the Label

You can customize your label using the following properties:

Properties

• Text: Text that appears on the label

• Font Size: Size of the text that appears on the label

• Custom Font (mobile only): Upload a TTF or OTF font file to use as your Button's font
• Color: Color of the text that appears on the label

• Background Color: Sets the background color of the label

• Text Align

  • Auto - Aligns the text automatically

  • Left - Displays the text starting from the left of the label

  • Right - Displays the text starting from the right of the label

  • Center - Displays the text starting from the middle of the label

  • Justify - Aligns both the right and left side of the text equally

• Font Style

  • Normal: Default text display

  • Italic: Display the text in italics

• Font Weight: Select how bold the text on the label will be

• Number of Lines: set a maximum amount of lines of text that your Label will display

• Background Color: set the color of your Label's background

• Border Width: Enter how wide you want the border outline of the label to be

• Border Radius: Enter how round you want the edges of the border for the label to be

• Border Color: Pick a color for the border of the label

• Border Style: Select if you want the border of the label to be a dotted, dashed or solid line

• Background Color: set the color of your Label's background

• Border Width: Enter how wide you want the border outline of the label to be

• Border Radius: Enter how round you want the edges of the border for the label to be

• Border Color: Pick a color for the border of the label

• Border Style: Select if you want the border of the label to be a dotted, dashed or solid line

Advanced Properties

• Letter Spacing (iOS and web only): increase spacing between letters of your Label

• Text Decoration Line: add a line through, underline, or both with underline line-through

• Text Decoration Style (iOS and web only): set your Text Decoration line to be solid, dotted, dashed, or double

• Text Decoration Color (iOS and web only): set the color of your Text Decoration Line

• Writing Direction (iOS and web only): set the writing direction of your Label's text

• Letter Spacing (iOS and web only): increase spacing between letters of your Label

• Text Decoration Line: add a line through, underline, or both with underline line-through

• Text Decoration Style (iOS and web only): set your Text Decoration line to be solid, dotted, dashed, or double

• Text Decoration Color (iOS and web only): set the color of your Text Decoration Line

• Writing Direction (iOS and web only): set the writing direction of your Label's text

Events

Click

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

Properties

Background Color

Color

Font Size

Font Style

Font Weight

Height

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

• Number of Pixels

• Percentage Height

• "Fit Contents"

• "Fill Container"

Number of Lines

The get and set number of lines property is used to work with the maximum number of lines of text that should be displayed in a label before that label starts to scroll.

Text

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

Text Align

Text Align can be any of the following values:

• Auto

• Left

• Right

• Center

• Justify

Visible

• True

• False

Width

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

• Number of Pixels

• Percentage Width

• "Fit Contents"

• "Fill Container"

Sign Up

The email will look something like the image below. Pressing the Click to Sign In button will open your new Thunkable account and keep you signed in for 30 days, unless you choose to sign out sooner.

Sign in‌

Sign in with Google

This button will sign you in automatically with your Google account. For most users this will be a Gmail address but if your school or work email is powered by Google then that will work too.

Sign in with Apple

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

Sign in with Email

If you click Sign in with email you will be invited to type you email address in a text input.

When you click Email me the link we will send you a link that will sign you back into your account.

Next Steps

The User Interface (UI) category is a collection of all the components you need to design the look and feel of your app.

UI Components are visible components that users can move, click on, and type in. Each UI component is described in greater detail on its own page.

User Interface Components

A project is a place where your designs, files and blocks come together to create Android and iOS apps. There are three different types of project in Thunkable.

1. Public Projects

2. Private Projects

3. Read-Only Projects

When you first sign in to Thunkable you will be prompted to create a project. To learn more about the maximum size your projects can be, please see our article about the minimum requirements for apps.

Other articles in this section

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 just that, private. They can only be seen by their app creator and do not get included in the Thunkable Public Gallery. Only Thunkable users with a paid plan can create and share private projects.

Learn more about Thunkable Plans.

Making Projects Public or Private

To make your projects public or private, clicking the vertical ellipsis associated with a project reveals its project menu. You can then select Project Detail Page and switch to change who can view your project.

You can also click into your app settings in your project and toggle the switch to set your project to public or private.

Read-Only projects

Private projects become Read-Only projects when a Thunker's paid membership expires. Read-Only projects remain private and are not included in the Thunkable Gallery.

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

Thunkable Public Gallery

The Thunkable Gallery is an app building marketplace where users can find, share and remix existing projects. By default, all public projects built on Thunkable are sent to the Public Gallery.

How to use the Thunkable Gallery

When browsing the Gallery, here are three things that you can do with public projects:

1. View a Project Click to open any project on the Public Gallery to view an app's design or programming blocks.

2. Preview a Project After downloading the Thunkable Live mobile app, you can use the app to preview any public project directly on your mobile device.

3. Remix a Project All projects on the Public Gallery can be remixed. This means that you can customize any app project that you see.

Set Keyboard type

You can choose from the following types of keyboards:

• Default keyboard: Displays your device’s default keyboard

• Email Address: Displays an alphanumeric keyboard to accept email addresses

• Numeric: Displays a keypad with only numbers; It is similar to the phone pad keyboard

• Phone Pad: Displays a telephone keypad; It is similar to the numeric keyboard

Set up for Passwords

You can also set up Text Input for passwords as shown below using the Secure Text Entry Switch. This switch will replace text with * as users type.

To activate Secure Text Entry, look for the Text Input Style properties and make sure that the Secure Text Entry switch is set to true.

Style the Text Input

You can customize the Text Input component with the following properties:

• Hint: Hint text that disappears when the user starts typing into the Text Input

• Text: Text that appears on the text input

• Visible: To see the text input in your app, set the switch to true

• Border

  • Width: Enter how wide you want the border outline of the text input to be

  • Color: Pick a color for the border of the text input

  • Style: Select if you want the border to be a dotted, dashed or solid line

  • Radius: Enter how round you want the edges of the border for the text input to be

Edit the Text Input size

You can set how tall the text input is using the Height property and set how wide the text input is using the Width property.

Height

• Fill container - The text input fills the entire screen vertically

• Fit contents (Recommended) - The text input’s height changes to fit the contents it contains

• Relative size - The text input fills the specified percentage of the screen

• Absolute size - Sizes the text input to a specified number of pixels

Width

• Fill container - The text input fills the entire screen horizontally

• Fit contents - The text input’s width changes to fit the contents it contains

• Relative size - The text input fills the specified percentage of the screen

• Absolute - Sizes the text input to a specified number of pixels

Add spacing

You change the spacing and positioning of the text input with the Margin and Padding properties. Margin

• You can specify how much space you want between the edges of the text input and the screen using either pixel or percent values.

Padding

• You can specify how much space you want between the border and the contents of the text input using either pixel or percent values.

Events

Click

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

Unfocus

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

Submit

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

Changes

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

Properties

Border Width

The border width value corresponds to the size of the border around the Text Input. Changes to the color and style of the border must be done in the designer.

Height

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

• Number of Pixels

• Percentage Height

• "Fit Contents"

• "Fill Container"

The Computed Height block returns the on-screen dimensions of the Text Input, after it has been rendered on the device screen. The value returned is an integer, representing the size of the component, in pixels.

Hint

The set and get hint work with the prompt that is displayed in the Text Input, before the user starts typing. Any string of text or number can be used as the hint.

Keyboard Type

The set and get keyboard type property gives you control over what version of the keyboard is displayed on-screen when the user starts typing. Acceptable values are:

• default

• email address

• numeric

• phone pad

Text

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

Visible

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

• True

• False

Width

The set and get width blocks work with the Width property of the Text Input component. Acceptable values are.‌

• Number of Pixels

• Percentage Width

• "Fit Contents"

• "Fill Container"

The Computed Width block returns the on-screen dimensions of the Text Input, after it has been rendered on the device screen. The value returned is an integer, representing the size of the component, in pixels.

Switch Overview

A switch is a component that has two settings, true and false. You can get your app to do specific tasks only if the switch is set to true.

Getting Started

Each time the switch is clicked the value will change. The value returned will only ever be true or false. To test this for yourself you can use the following blocks.

In the following example, the user can only advance to Screen2 if the acknowledge they have accepted the terms and conditions by clicking on the switch.

Style the Switch

You can customize the switch with the following properties:

• Tint Color: Color of the switch track when switch is set to off

• On Tint Color: Color of the switch track when switch set to on

• Thumb Tint Color: Color of the switch thumb

Events

On Value Change

This event fires every time the switch is clicked.

Properties

Disabled

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

• True

• False

Height

The set and get height blocks work with the Height property of the switch component.

On Tint Color

Change the "active" color of the switch.

Thumb Tint Color

Change the color of the switch

Tint Color

Change the "inactive" color of the switch

Value

Change the state (on or off) of the switch

Visible

Show or hide the switch on the screen.

Width

The set and get height blocks work with the Width property of the switch component.

X

Y

Video Tutorial

Properties

In the Design panel, you can set many properties of the Web Viewer.

Simple

URL: Set initial URL to be displayed in the Web Viewer Height: Set Height of Web Viewer Width: Set Width of Web Viewer Visible: Toggle whether or not the Web Viewer is visible in the app Margin (top, bottom, left, right): Set a defined distance between the Web Viewer and its neighboring components on the Screen Padding (top, bottom, left, right): Set a defined distance between the border of the Web Viewer and its contents Border: Set the width, radius, color and style of a border around the perimeter of the Web Viewer

Set URL

To open up a website in your app, you need to provide the Web Viewer with a URL.

A URL is kind of like a street address - it tells the web viewer the location of the website on the internet.

• URL: Enter in the link to the website or an image. The URL must include https://

Note: Can also accept .html files that have been uploaded to the app (great for offline use).

Go Back/Forward

You can use blocks to navigate back through previously visited web pages. Once you have gone back, you can also use blocks to navigate forward through your visited pages again.

Edit Web Viewer size

You can set how tall the Web Viewer is using the height property and set how wide it is using the width property.

Height

• Fill container - The Web Viewer fills the entire screen vertically

• Fit contents - The Web Viewer’s height changes to fit the contents it contains

• Relative size - The Web Viewer fills the specified percentage of the screen

• Absolute size - Sizes the Web Viewer to a specified number of pixels

Width

• Fill container - The Web Viewer fills the entire screen horizontally

• Fit contents - The Web Viewer’s width changes to fit the contents it contains

• Relative size - The Web Viewer fills the specified percentage of the screen

• Absolute - Sizes the Web Viewer to a specified number of pixels

Add Spacing

You change the spacing and positioning of the Web Viewer with the Margin and Padding properties.

Margin

• You can specify how much space you want between the border and the contents of Web Viewer using either pixel or percent values.

Padding

• You can specify how much space you want between the edges of the Web Viewer and the screen using either pixel or percent values.

Manage Permissions

You can toggle whether the Web Viewer automatically requests the user's location. Some websites require access to the user's location to work. However, if you do not plan on displaying a website that needs this permission in your app, then you may not want your app to request an unnecessary permission.

To set whether or not the Web Viewer requests the user's location, go to the Design tab and click on your Web Viewer. In the panel on the right hand side of the screen, click on the Advanced tab.

Scroll down until you see a switch labeled Geolocation Enabled. Use this switch to toggle whether your Web Viewer requests the user's location.

Post Message/Receive Message

If you own the website being displayed in your Web Viewer, you can send and receive messages between your website and the Web Viewer using Javascript.

You can see examples of sending/receiving messages and get further setup instructions here.

See Also

You may also find the Web API component useful for sending/receiving information between your app and a website.

Events

Receives Message

Functions

Back

Go back to the previous page visited.

Forward

Move forward to the next page in your browser history.

Post Message

Post a message.

Reload

Reload the web viewer.

Value from Post

Returns any message that was received after calling the Post Message function.

Properties

Height

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

• Number of Pixels

• Percentage Height

• "Fit Contents"

• "Fill Container"

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

Width

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

• Number of Pixels

• Percentage Width

• "Fit Contents"

• "Fill Container"

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

Visible

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

• True

• False

URL

The set URL block is used to change the web address that is displayed in the web viewer. Please note that this block need to be used in conjunction with the reload function and the web viewer only supports connections via https. If you try to use http your website will not be displayed.

The get URL block returns the "default" url in your project, i.e the value that you set in the designer. At this time it does not dynamically return the URL of the pages that is currently being displayed.

Add Items to a List Viewer

Short Lists

We recommend adding a short list of items within the app itself as the Screen starts. Although the list block itself can handle a large number of items, practically speaking you probably only want to use this approach if your project has tens of items.

Medium Lists

If you need longer lists of information in your app you can use delimited data. This is very similar to using something like a .csv file. You can have hundreds of items in your list viewer using this method.

Long Lists

For longer lists where you need hundreds or thousands of items in your list, we recommend using the Data Sources component. This gives you three different options for storing your data.

1. Local Table

2. Airtable

3. Google Sheets

Choosing Airtable or Google Sheets allows you to create dynamic list viewers. This is where the information displayed to the user changes whenever you change your cloud-based data in Airtable or Google Sheets. Either of these options are ideal for when you need to store thousands of items, or you need to work with items that change frequently.

Select Item from a List Viewer

Style the List Viewer

You can customize the List Viewer with the following properties:

• Text Items Color: Set color of Text Items font

• Text Items Background Color: Set background color for List Viewer

• Text Items Font Size: Set font size of Text Items

• Show Arrow: To see an arrow beside each item in the list, set the switch to true

• Visible: To see the text input in your app, set the switch to true

• Border

  • Width: Enter how wide you want the border outline of the List Viewer to be

  • Color: Pick a color for the border of the List Viewer

  • Style: Select if you want the border to be a dotted, dashed or solid line

  • Radius: Enter how round you want the edges of the border for the List Viewer to be

Edit the ListViewer Height

A List Viewer automatically fill 100% of the Screen width

You can set how tall the List Viewer is using the height property.

Height

• Fill container - The List Viewer fills the entire screen vertically

• Fit contents - The List Viewer’s height changes to fit the contents it contains

• Relative size - The List Viewer fills the specified percentage of the screen

• Absolute size - Sizes the List Viewer to a specified number of pixels

Add Spacing

You change the spacing and positioning of the List Viewer with the Margin and Padding properties.

Margin

• You can specify how much space you want between the border and the contents of List Viewer using either pixel or percent values.

Padding

• You can specify how much space you want between the edges of the List Viewer and the screen using either pixel or percent values.

Events

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

Properties

Height

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

• Number of Pixels

• Percentage Height

• "Fit Contents"

• "Fill Container"

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

Show Arrow

Choose whether or not the arrow is displayed next to every item in the list viewer.

Text Items

Set or get the list of text items that are displayed in the List Viewer. You must use a list of data here - either locally stored or stored in the cloud.

Visible

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

• True

• False

Width

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

The list viewer doesn't currently support pixel or percentage values for the width property.

Slider Overview

The Slider is a great UI element to enable users easily select a value from a fixed range of values.

Getting Started

To set up a slider, you'll have to first define the minimum and maximum values, the initial value and the incremental steps of the slider

We recommend using a Label with the Slider so that users can get immediate feedback on the value being set.

Style the Slider

• Minimum Track Tint Color: Color of the slider track to the left of the thumb

• Maximum Track Tint Color: Color of the slider track to the right of the thumb

• Thumb Tint Color (Android only): Color of the thumb

• Border:

  • Width: Enter how wide you want the border outline of the Slider to be

  • Color: Pick a color for the border of the Slider

  • Style: Select if you want the border to be a dotted, dashed or solid line

  • Radius: Enter how round you want the edges of the border for the Slider to be

Edit the Slider size

You can set how tall the Slider is using the height property and set how wide it is using the width property.

Height

• Fill container - The Slider fills the entire screen vertically

• Fit contents - The Slider’s height changes to fit the contents it contains

• Relative size - The Slider fills the specified percentage of the screen

• Absolute size - Sizes the Slider to a specified number of pixels

Width

• Fill container - The Slider fills the entire screen horizontally

• Fit contents - The Slider’s width changes to fit the contents it contains

• Relative size - The Slider fills the specified percentage of the screen

• Absolute - Sizes the Slider to a specified number of pixels

Add spacing

You change the spacing and positioning of the Slider with the Margin and Padding properties.

Margin

• You can specify how much space you want between the border and the contents of Slider using either pixel or percent values.

Padding

• You can specify how much space you want between the edges of the Slider and the screen using either pixel or percent values.

Events

On Sliding Complete

When the user takes their finger off the slider. The event returns the value that the slider has settled on.

Please note that the on Sliding Complete event does not work in web preview

On Value Change

This event fires each time the slider moves to a new position. Each time a new values is selected this event will return an updated value.

Properties

Disabled

Height

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

• Number of Pixels

• Percentage Height

• "Fit Contents"

• "Fill Container"

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

Maximum Track Tint Color

Set or get the color of the right side of the slider.

Maximum Value

Set or get the biggest value of the slider

Minimum Track Tint Color

Set or get the color of the left side of the slider

Minimum Value

Set or get the smallest value of the slider

Step

Set or get the step-size, also known as the increment, of the slider.

Thumb Tint Color

Change the color of the slider itself.

Value

The set and get value blocks are user to work with the position of the slider.

Visible

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

• True

• False

Width

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

• Number of Pixels

• Percentage Height

• "Fit Contents"

• "Fill Container"

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

Video Tutorial

Loading Icon Overview

For activities that take more than a few seconds, loading icons can be helpful to tell your app users that an activity is happening in the background, such as retrieving or uploading data.

Style the Loading Icon

Showing and Hiding the Loading Icon

The loading icon should be displayed when the app is performing an activity in the background and hidden when it is not.

One way to show and hide the icon is to use the visible property of the component.

In the following example the loading icon shows up when the app opens but disappears after data is retrieved from Airtable.

When the visibility is set to true, the loading icon will be seen on the app screen. If set to false, the loading icon will not be seen on the app screen.

Properties

Color

Height

Size

Visible

Width

See Also

What's a Component?

Apps contain many different features.

On Thunkable, you get to drag & drop which features - which we call components - go into your app.

Some features you can see. Let's call these features visible components. Examples include buttons, loading icons, and images.

Some features you can't see. Let's call these features invisible components. Examples include sounds, timers, and databases.

Visible Components

To put it simply, visible components are features that you can see on your app screen - like the ones pictured above.

Visible components can be styled by size, text, space, and location.

When adding visible components into your app, please note that they can only exist on one screen at a time. For example, if you want to add a button to three different screens, each screen will require its own button.

Invisible Components

Invisible components are features on your app that you can't see.

They often relate to your app's functionality, and are quietly running in the background. When you add an invisible component to your app, that component can work on any screen.

For example, if you add a database component to your app, the database can be accessed from any screen. You do not need to add a database component to each screen.

Invisible components are displayed underneath the mobile device on the Thunkable app builder.

Finding Components

Components are organized into 10 different categories. For a more detailed description of each category and an outline of the components they contain, click on one of the pages below.

To find a component, you can manually scroll through the components section on the Thunkable app builder. You can also expand and collapse categories depending on your needs.

The quickest way to find a component is by searching for it in the search bar. Any matching components will also be displayed as you type.

The Component Tree

The component tree can be found at the top left corner of your screen, just below your project name. The component tree contains a list of the visible and invisible components in your app.

You can move components around on the component tree to change the location of a component in your app.

Components that are nested can also be expanded and collapsed by clicking on the ▾ icon.

Date Input Overview

A Date Input component is helpful when you want the user of your app to easily select a specific date using the native Android or iOS date picker

Getting Started

The Date Input component needs no set-up (Woohoo!). Just drag and drop the component into your project. As a bonus, the current date will automatically show up as a label.

When a user of your app taps on the Date Input, it will automatically launch the native Android or iOS date pickers.

Set the Date Format

You can set the format of the date by choosing an option from the Style property. Currently supported styles are:

• YYYY-MM-DD

• MM/DD/YYYY

• M/D/YY

• Month Day, Year

• Mth. Day, Year

Save the Date

The date that a user selects will show up automatically in the Date Input label but if you want to save the date somewhere to be uploaded later, you'll need to add a block like the one below.

Events

Date Picked

Functions

Get Date

Get Day

Get Month

Get Year

Launch Picker

Properties

Background Color

Color

Computed Height and Width

Font Size

Font Style

Font Weight

Style

Text Align

Visible

Alerts are useful components for displaying important messages while users are in the app itself

One Button Alert

A one button alert, also known as a notification, displays a message and one button to confirm user has viewed the message

To set up an alert, simply fill in the following simple properties. The Cancel Button Text only needs to be filled out for a two-button alert. You can use blocks to start an event when

Two button alert

Two button alerts have two buttons, one that dismisses the notification and one that can be programmed to start an event

To set one up, simply add the following simple properties

If you want to start an event from a confirm button, you will want to add the blocks below:

Button List: Alert with three or more buttons

You can set the Text of the Alert. You can set the Style of the Alert to ok, destructive or cancel.

On iOS, the Alert can show more than 3 Buttons. On Android, the Alert can show up to 3 buttons. If more than 3 buttons are specified, the first 3 will be shown.

The 'showButtonList' block will return an output called 'buttonPressed'. This will return the position of the Button in your Button List. You can take some action based on which button was pressed.

Note: the Buttons may appear in a different order when testing the app on a device. The number that ‘buttonPressed’ returns is the order that the Buttons are added in the app project.