Build Custom Mobile Apps No Coding Required

Join the millions of Creators turning their ideas into apps with Thunkable. Whether you're looking to get hands-on with no code creation, looking to launch your business, or want to extend your existing product to mobile - Thunkable makes it easier to build your best apps.

Not sure where to start?

Check out our Getting Started Guide to see some quick demos on how Thunkable works!

Additional Help Options

We are proud to offer you the following resources:

1. Thunkable Academy Not sure where to get started? Check out the Thunkable Academy!

2. Thunkable 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 any of our paid plans can click the chat icon in the upper right corner of any Thunkable Project page to connect with our Support team.

Pricing and Membership

You can get started building with Thunkable today for free. As you progress as a Creator with Thunkable, we offer different membership tiers, allowing you to build 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

Thunkable offers plans to suit individual and business needs. Learn more about the memberships we offer here: Thunkable Pricing.

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.

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.

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.

Video Tutorial

How to Test and Troubleshoot with Thunkable Live App

In this tutorial, you’ll learn how to test and troubleshoot your project using the Thunkable Live app on your device.

Download the Thunkable Live App

Links to download Thunkable Live for Android and iOS are available here: https://thunkable.com/mobile

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

Testing and Previewing with Thunkable Live

1. Open your project in your web browser.

2. Click the Live Test on Device icon.
3. 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.

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

5. Select the app you want to open from your list of Thunkable projects.

Troubleshooting Thunkable Live

If your app is not working as expected on Thunkable Live, it may be the result of one of the following. Ensure that your project adheres to the following before testing with Thunkable Live again:

• Variable names can only contain alphanumeric characters and underscore.

• You cannot add a border to an image component containing a .gif asset.

• If your app sets a text input's text to upper case, test with a device other than Samsung.

• 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 may have an event triggered by a Screen. Start block, 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.

Sign Up

To get started with Thunkable, visit our sign up page.

You can sign up with a Google account or an Apple ID and sign in immediately, or you can enter your email address and be sent a magic sign-in link.

We recommend using a Google or Apple account, which will make testing your app 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.

Sign In‌

Returning users can go directly to our sign in page to sign back into their Thunkable account.

Again, you can sign in with Google, Apple, or your email address.

Sign in with Google

This button will sign you in automatically with your Google account.

Sign in with Apple

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

Sign in with Email

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.

Overview

When a data source powers your app, you can continuously update your app contents without having to republish it. It allows you to build a dynamic app that can create, read, update, and delete data. This doc covers connecting your app to Google Sheets as the data source.

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.

Video Tutorial

How to Connect Your Thunkable App to a Google Sheets Data Source

In this tutorial, we’ll connect a Thunkable app to Google Sheets as a data source and display the data in our app.

Connect Your App to Google Sheets

1. Click the data icon in the left side panel to access your data source library.

2. Click the plus sign at the top of the panel.

3. You can select from previously added data sources or add a new data source. Click Create New.

4. Select Google Sheets.

5. Sign in to your Google account and grant permission for your Thunkable accoumt to access your Google Drive.
6. Click Select a Sheet.

7. Select your spreadsheet.
8. Click Select.

9. Rename the data source, if you’d like.

10. Indicate which row your column headers are in and which row is the first to contain data.

11. Click Create.

12. Refresh your page to ensure the data is reflected in web preview or via the Thunkable Live app.

.xlsx Files

Connecting to .xlsx files that are hosted on Google Sheets is not supported, but you can convert your .xlsx file to a Google Sheet before connecting it to your Thunkable app project. To do so:

1. Open the .xlsx file on Google Sheets

2. Click File.

3. Select Save as Google Sheets.

Display the Data in Your App

Once you've connected a data source, you can display the data in your app with a data viewer component. Learn more about data viewer components here:

Reset Your Google Sheets Connection

Hard Refresh Your Browser

As a first step, we recommend refreshing your browser. This can fix minor issues caused by old data being stored in the browser cache.

A "hard refresh," "force reload," or "force refresh" ensures that you are seeing and using the latest version of Thunkable and that any cached data that could be causing a connection issue is wiped clean and freshly retrieved.

Windows

On a Windows computer, the keyboard shortcut to hard refresh your browser is Ctrl + F5.

Mac

On a Mac computer, you can use the Option + Cmd + R shortcut to force your browser to refresh. If this does not work for you, try clearing your browser cache.

Reset Thunkable - Google Connection

If hard-refreshing doesn't work, you'll need to reset the connection. Start with the Reset from Thunkable instructions and then proceed to the Reset from Google instructions.

Reset from Thunkable

1. Login to your Thunkable account.

2. On your Projects Page, click Data Sources in the left sidebar.

3. Click the trash can icon to delete the Google Sheets data source.

Reset from Google

If you are having difficulties connecting your Google Sheets from Thunkable, you may need to reset your Google Sheets connection.

2. Scroll to the Your connections to third-party apps & services section.

3. Click the Thunkable connection.

4. In the "Thunkable has some access to your Google Account" section, click See details.
5. Click Remove Access.
6. Return to Thunkable and re-connect to your Google Sheets account.

Overview

In Drag and Drop projects, you have the ability to undo and redo actions within the Design Tab. This powerful feature in our Design Editor lets you easily reverse or reapply recent changes, giving you greater control over your design process.

Keyboard Shortcuts

Supported Cases

In general, Undo/Redo supports actions such as adding, moving, and deleting components. Specific cases where Undo/Redo works include:

• component addition

• component renaming

• component positioning

• component resizing

• component removal

• pasting components

• edits within the Component Tree (e.g., renaming, changing hierarchy, deletion)

• component movement into Layout containers

• screen component addition or deletion

• screen deletion

• navigator addition or deletion

• connecting Data Source in the DVL/DVG dropdown.

These actions ensure you have full control over your design process, allowing for easy adjustments and modifications.

Upgrade Your Account

To upgrade your account:

1. Click your account avatar in the upper right.
2. Select Membership.

3. Click Change Plan.

4. Choose your new plan.

5. Confirm your selection.

Downgrade Your Account

To downgrade your paid account plan to free:

1. Click your account avatar in the upper right.
2. Select Membership.

3. Click Change Plan.

4. Choose the free plan.

5. Confirm your selection.

Change Account Email Address

Changing the email address associated with a Thunkable account is not possible.

Instead, transfer your existing projects to an account with a different email address:

1. In your old account, generate share links for the projects you want to transfer. Learn more here: Share a Fully Editable Copy of Your App Project.

2. Use a private or incognito browser window to create a new Thunkable account with the desired email address.

3. Open the share links in the private or incognito browser window.

Access Invoices

The process for obtaining your invoices depends on your payment method.

Credit Card

1. Click your account avatar in the upper right.

2. Select Membership.

3. In the Billing history section, click PDF to view and/or print your monthly invoices.

PayPal

1. Sign into your PayPal account.

2. Navigate to your PayPal dashboard.

3. Click to view and/or print your monthly invoices.

Request a Refund

To be eligible for a refund, you must:

• Have not published an app to iOS, Android, or the web during that billing period.

• Provide reasoning as to why you are requesting a refund.

​To request a refund, email billing@thunkable.com. Refunds are assessed on a case-by-case basis and are not guaranteed.

Change Platform Language

You can interact with the Thunkable platform in English or Chinese. To change the platform language:

1. Click your account avatar in the upper right.
2. Select Settings.

3. Select from language options.

Overview

When a data source powers your app, you can continuously update your app contents without having to republish it. It allows you to build a dynamic app that can create, read, update, and delete data.

You can choose one of the following data sources:

Connect Your App to a Data Source

1. Click the data icon in the left side panel to access your data source library.

2. Click the plus sign at the top of the panel.

3. You can select from previously added data sources or add a new data source. Click Create New.

4. Follow the data source-specific instructions to complete the connection: - Google Sheets - Airtable - Local Table

Add Filter View

1. Open a data source.

1. Click Add Filter View.

1. Add one or more filter rules.

1. Click Create Filter View.

1. Select the Filter View in a data viewer's properties panel.

Sort

1. Open a data source.

1. Click on a Filter View.

1. Click Sort icon.

1. Select column.

1. Select Ascending or Descending.

Delete a Data Source

There are multiple methods to delete a data source.

Method 1 - project's data source library

1. Open the project.

2. Click the data icon in the left side panel to access your project's data source library.

Method 2 - account's data source library

1. Access your Projects Page.

2. Click Data Sources in the left sidebar.

3. Click the trash can icon next to a data source you want to delete.

Related Docs

Data Viewer Components

Once you have connected your project to a data source, you can use the data viewer components as a presentation layer to display the data in your data source.

Data Sources Blocks

To access the data sources blocks, you must first connect a data source. Then, by incorporating the data source blocks into your app, you can allow users to create, read, update, and delete data in your data source when they interact with the data viewer.

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 Builder and Advanced Creators.

Builder plans allow for 10 manual versions per project, and Advanced plans allow for 50 versions per project. Overall storage limits remain the same and each saved version counts towards the account’s limit, meaning if a creator makes one version of a 50MB project they will be using 100MB of account storage. For more on plan limits please see here: Thunkable pricing.

Video Tutorial

How to Save Versions of Your Thunkable Project

In this tutorial, we’ll show you how to use Thunkable’s versioning functionality to preserve a version of your project at a point in time.

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:

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

1. Access the Design tab of your project.

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

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

Overview

Keyboard shortcuts improve efficiency by enabling faster task execution, boosting productivity, and streamlining workflows. There are keyboard shortcuts available for the Thunkable Design Tab and Blocks Tab.

Design Tab

Blocks Tab

Keyboard Shortcuts

Overview

Connect Your App to Airtable by OAuth

1. Click Connect to Airtable.

2. In Thunkable, click the data icon in the left side panel to access your data source library.

3. Click the plus sign at the top of the panel.

4. You can select from previously added data sources or add a new data source. Click Create New.

5. Select Airtable.

6. Click the OAuth tab.

7. An Airtable authorization screen opens.

8. Click + Add a base.

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

10. Click Grant access.

    If you are connecting by OAuth for the sole purpose of migrating your connection from API Key and are not creating a new data source, you are done. The following steps only apply when creating a new data source.

11. Select the correct base from the dropdown menu.

13. Click Create.

14. Refresh your page to ensure the data is reflected in web preview or via the Thunkable Live app.

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.

Authorization Header For Block

If your app uses web API blocks to communicate with Airtable, you must also incorporate the "authorization header for" block into your app. This block retrieves a valid token that can be used as the authorization header in web API blocks.

To use the "authorization header for" block:

1. Ensure your project is connected to an Airtable data source by OAuth.

2. Navigate to your project's blocks tab.

3. Under the App Features heading, click Data Sources.

4. Drag and drop the "authorization header for" block into your workspace.

5. Use the block's dropdown menu to ensure the correct data source is selected.

Display the Data in Your App

Once you've connected a data source, you can display the data in your app with a data viewer component. Learn more about data viewer components here:

Reset Thunkable - Airtable Connection

If hard-refreshing doesn't work or you want to add more Tables, you'll need to reset the Airtable connection.

Reset from Airtable

1. Connect to Airtable

2. Click the Account icon and then Integrations

1. Click Third-party integrations and then Thunkable

1. Click Revoke access

1. Return to Thunkable, re-connect to your Airtable account and give access to all the bases you need.

You can add specific bases but to avoid the above steps in the future in case you need to add some more you can select the second option and allow current and future all bases.

Overview

When a data source powers your app, you can continuously update your app contents without having to republish it. It allows you to build a dynamic app that can create, read, update, and delete data. This doc covers connecting your app to Webflow as the data source.

When using Webflow 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

Video Tutorial

How to Connect Your Thunkable App to a Webflow Data Source

In this tutorial, we’ll connect a Thunkable app to Webflow as a data source and display the data in our app.

Connect Your App to Webflow by API Key

1. In Thunkable, click the data icon in the left side panel to access your data source library.

2. Click the plus sign at the top of the panel.

3. You can select from previously added data sources or add a new data source. Click Create New.

4. Select Webflow.

5. Click the API Key tab.

6. In a separate browser tab, navigate to your Webflow site settings.

7. Click the Integrations tab.

8. Under the API access header, click Generate API token.

9. Copy the Webflow API token.

10. Return to your Thunkable tab.
11. Paste the copied Webflow API token into the corresponding field.

12. Click Refresh to see your Webflow sites.

13. Select the site you want to use as your data source.

14. Click Create.

15. Refresh your page to ensure the data is reflected in web preview or via the Thunkable Live app.

Connect Your App to Webflow by OAuth

1. In Thunkable, click the data icon in the left side panel to access your data source library.

2. Click the plus sign at the top of the panel.

3. You can select from previously added data sources or add a new data source. Click Create New.

4. Select Webflow.

5. Click the OAuth tab.
6. Click Connect to Webflow.

7. A Webflow authorization screen opens.

8. Select the sites or Workspaces you want to authorize access to.

9. Click Authorize app.
10. Refresh your page to ensure the data is reflected in the web preview or via the Thunkable Live app.

Display the Data in Your App

Once you've connected a data source, you can display the data in your app with a data viewer component. Learn more about data viewer components here:

Welcome to Thunkable! If you're looking for a short guide on how to get started building your first app with Thunkable, you're in the right place!

Just follow these simple steps, and you'll be on your way to publishing your app in no time:

Sign in to Thunkable

Get to know your Projects Page

The Design Editor

The Blocks Editor

Preview and Test Your App

Check out the Thunkable Education Resources

We encourage you to check out our Thunkable Education resources to familiarize yourself with the platform and expedite the time it takes you to build your first Thunkable app.

Engage with the Thunkable Community

Project collaboration is the ability for multiple users to work on the same app project together. Working together has many benefits that help teams unlock the potential of multiple skill sets while turning ideas into apps.

Overview

Thunkable's organizations are 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

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

1. Click your profile image in the upper right.

2. Select Organizations.
3. The Organizations page lists the organizations for which you hold admin status.

View Organization

1. Click an organization name.

2. The Members tab lists the organization’s members.

3. The Projects tab lists the organization’s projects.

Add Member

1. Click Add Member.

2. Input the invitee’s email address.

3. Indicate their role (Admin or Member).

4. Click Add.

Modify a Role

1. Navigate to the Members tab of the organization’s page.

2. Click the role dropdown associated with the member.

3. Select the appropriate role (Admin or Member).

Remove a Member

1. Navigate to the Members tab of the organization’s page.

2. Click the role dropdown associated with the member.

3. Select Remove.

4. 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 into 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:

1. On the project's Design tab, click the Project Actions icon.

2. Select Duplicate into...
3. In the modal provided, give the project a name.

4. Use the dropdown menu to indicate which organization you want to copy the project into.

5. Click Duplicate into Organization.
6. 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 organization members remain in viewing mode.

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

Sharing and Updating Permissions

To share a project with a user in your organization:

2. Select Project Sharing.

3. Enter the email address of the user you want to add to the project

4. Assign the user a permission level: Editor or Viewer.

5. Click Add.

To update the permissions of a user in your organization:

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

1. Access the project’s Design tab.

2. Ensure you’re in Editing mode.

3. Click the Comment icon to open the comment panel on the right.

4. Click to select a UI component on a screen or in the component tree.

5. Type your comment in the provided text input field in the comment panel.

6. Click the send button.

7. To add comments to other UI components, repeat steps 4-6.

8. Click the Comment icon to close the comment panel.

View Comments

To view comments on a UI component:

1. Access the project’s Design tab.

2. Click the Comment icon to open the comment panel on the right.

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

4. Click the Comment icon to close the comment panel.

Delete Comments

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

1. Access the project’s Design tab.

2. Ensure you’re in Editing mode.

3. Click the Comment icon to open the comment panel on the right.

4. Locate the comment you want to delete.

5. Click the vertical ellipsis icon within the comment’s box.

6. Click Delete.

7. This cannot be undone. Click Delete to confirm the deletion of the comment.

8. Click the Comment icon to close the comment panel.

The Thunkable Community is an excellent place to discuss, collaborate, and learn from Thunkable Staff and other users!

Tutorials & DIY Guides

Staff Written Tutorials

Overview

When a data source powers your app, you can continuously update your app contents without having to republish it. It allows you to build a dynamic app that can create, read, update, and delete data. This doc covers creating a local table as the data source.

Video Tutorial

How to Create a Local Table Data Source in Your Thunkable App

In this tutorial, we’ll create a local table data source in a Thunkable app and display the data.

Create a Local Data Source

To create your own table as a data source:

1. Click the data icon in the left side panel to access your data source library.

2. Click the plus sign at the top of the panel.

3. You can select from previously added data sources or add a new data source. Click Create New.

4. Select Create your own table.

5. Give your local data source table a name.

6. Click Create.

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

8. To modify the table's columns:

   • To update the table’s column headers, click their names and type 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.

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

10. 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.
11. When your table is complete, click the X in the upper right.

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

Display the Data in Your App

Once you've connected a data source, you can display the data in your app with a data viewer component. Learn more about data viewer components here:

You can make a copy of our spreadsheet here: https://docs.google.com/spreadsheets/d/1hMdJ1O-uekCi1_aT4OpWInk_bS_pvU3zouqYYXE2sn4/copy

Overview​

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

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 the label's text, font, color, etc.

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

1. Click on a component name in the component tree (A) or the component within a screen in your workspace (B).
2. Type ctrl+c or command+c on Mac, and ctrl+c on PC, to copy the component.

3. Type ctrl+v or command+v on Mac, and ctrl+v on PC, to paste a duplicate of the component.

4. Click and drag the new component to position it as you desire.

Delete UI Components

You can delete UI components from the component tree or the component's properties panel.

Delete UI Components - Component Tree

To delete a UI component from your project:

2. Click the trash can icon.

3. Confirm the deletion.

Delete UI Components - Component's Properties Panel

To delete a UI component from your project:

1. Click on a component name in the component tree or the component within a screen in your workspace.

3. Select Delete.

4. Confirm the deletion.

User Interface Components

Learn more about each of the UI components:

Next Steps

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

Utilizing public or sample projects streamlines the creation process and allows you to focus on features specific to your app! In this tutorial, you’ll learn how to make a public Thunkable project your own.

Head here to learn more: https://www.producthunt.com/products/thunkable#thunkable-figma-integration

If you have questions about the tutorial’s content, head over to the Thunkable Community post specific to this tutorial here: https://community.thunkable.com/t/increasing-screen-real-estate-with-scrollable-screens-with-video-tutorial/2727933

If you have questions about the tutorial’s content, head over to the Thunkable Community post specific to this tutorial here: https://community.thunkable.com/t/using-a-barcode-and-qr-code-scanner-with-video-tutorial/2659502

Sign up for free: https://x.thunkable.com/signup

Download the Thunkable Live app to live test your app on a device: https://thunkable.com/#/mobile

Template app: https://x.thunkable.com/projectPage/6577a8b65b4895de24de1e45

In this tutorial, you’ll learn what an API is, connect a Thunkable project to a web API, retrieve and parse the relevant data from the API, and use Thunkable blocks to modify the API URL that is called.

Sign up for free: https://x.thunkable.com/signup

Download the Thunkable Live app to live test your app on a device: https://thunkable.com/#/mobile

In this video, we’ll hop into the blocks tab and define the app’s behavior using Thunkable’s no code, drag and drop block technology.

Sign up for free: https://x.thunkable.com/signup

Download the Thunkable Live app to live test your app on a device: https://thunkable.com/#/mobile

Sign up for free: https://x.thunkable.com/signup

Download the Thunkable Live app to live test your app on a device: https://thunkable.com/#/mobile

Sign up for free: https://x.thunkable.com/signup

Download the Thunkable Live app to live test your app on a device: https://thunkable.com/#/mobile

Sign up for free: https://x.thunkable.com/signup

Download the Thunkable Live app to live test your app on a device: https://thunkable.com/#/mobile

Sign up for free: https://x.thunkable.com/signup

Download the Thunkable Live app to live test your app on a device: https://thunkable.com/#/mobile

The app for this activity will display a table of different charities that support refugees, but you can also follow along using a data table of your choice.

Copy a Data Table of your choice to use in your project here: https://thunkable.com/#/hourofcode

Learn more about Hour of Code here: https://hourofcode.com

When you are done building your app, you can check off each item in the list by taking pictures on your mobile device.

Learn more about Hour of Code here: https://hourofcode.com/

When you are done building, you’ll have an exciting app to help you learn a new language!

Learn more about Hour of Code here: https://hourofcode.com

Overview

The image component is used to display visual content, such as pictures, icons, logos, and other types of images and can be made clickable using blocks. The image component is foundational in creating visually appealing and engaging mobile app interfaces.

Properties

You can customize your image using the following properties:

Image

Picture Resize Mode

• Center: The image is displayed at its original size within the container, and it is centered both vertically and horizontally. This means that if the image is larger than the container, parts of it may extend beyond the container's edges.

• Cover: The image is resized to completely cover the container while maintaining its aspect ratio. This mode ensures that the entire container is filled with the image, and any excess image parts are cropped if necessary. This can result in parts of the image being clipped.

• Contain: The image is resized to fit entirely within the container while maintaining its aspect ratio. This mode ensures that the entire image is visible within the container, and it may result in empty space around the image if the container's aspect ratio differs from the image's aspect ratio.

• Repeat: The image is tiled or repeated to fill the entire container, both horizontally and vertically. This mode is often used for creating patterns or backgrounds that seamlessly repeat across the container.

• Stretch: The image is resized to fully cover the container without maintaining its original aspect ratio. This can distort the image and may result in an unnatural appearance, so it's generally not recommended for most scenarios.

When working with these resize modes, it's important to consider the context of your app's design and the type of content you're displaying. Different situations might call for different resize modes to achieve the desired visual outcome. For instance, cover might be suitable for background images, while contain could work well for displaying profile pictures. Always strive to maintain a visually pleasing and user-friendly experience while keeping the specific characteristics of each resize mode in mind.

Layout

Style

Image Blocks

To access the blocks specific to the switch component:

1. On the Design tab, add a Image component to a screen.

2. Navigate to the Blocks tab.

3. In the component tree on the left, click the name of the image component.

4. A drawer of image-specific blocks opens.

Overview

The Rich Text component is used to compose and display formatted text, and can also be made clickable using blocks.

Rich Text works alongside other user interface components like buttons, images, and text inputs to create a cohesive and intuitive user experience.

Properties

You can customize your Rich Text component using the following properties:

Rich Text

Layout

Style

Rich Text Blocks

To access the blocks specific to the Rich Text component:

1. On the Design tab, add a Rich Text component to a screen.

2. Navigate to the Blocks tab.

3. In the component tree on the left, click the name of the Rich Text component.

4. A drawer of Rich-Text-specific blocks opens.

Overview

The text input component is a field where app users can enter text, such as a name or email address.

Video Tutorial

How to Implement Text Input Validation in Thunkable

In this tutorial, we’ll implement text input validation to disable a button until text input conditions are met.

Properties

Text Input

Advanced Properties

Layout

Style

Text Input Blocks

To access the blocks specific to the text input component:

1. On the Design tab, add a Text Input component to a screen.

2. Navigate to the Blocks tab.

3. In the component tree on the left, click the name of the text input component.

4. A drawer of text input-specific blocks opens.

Event Blocks

When Text Input Click

This event fires when the user clicks on the text input component.

When Text Input Unfocus

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

When Text Input Submit

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

When Text Input Changes

This event fires whenever a character is added to or removed from the text input (i.e. whenever there is a change to the content of the text input).

Properties Blocks

There are two types of property blocks: dark green "set" and light green "get" blocks. The specific blocks available vary according to the UI component.

The dark green set blocks allow you to change the component's properties using blocks. For example, if you don't want a button to be enabled for a user until they've typed a set number of characters into a text input component, you can use the button's dark green set button's disabled status block.

The light green get blocks allow you to access the properties of a component (e.g. color, font, width, text, etc.).

Overview

The label component is used to display read-only text and can be made clickable using blocks.

Labels work alongside other user interface components like buttons, images, and text inputs to create a cohesive and intuitive user experience.

Properties

You can customize your label using the following properties:

Label

Advanced Properties

Layout

Style

Label Blocks

To access the blocks specific to the label component:

1. On the Design tab, add a Label component to a screen.

2. Navigate to the Blocks tab.

3. In the component tree on the left, click the name of the label component.

4. A drawer of label-specific blocks opens.

Overview

The button component gives your user familiar ways to start actions in your app. Examples include navigating between app screens, submitting user inputs, and triggering a device’s camera to take a photo.

In the block combination below, when a user clicks Button1 they will be taken to, or navigate to, Screen2.

Video Tutorial

How to Change Thunkable Screens with a Button Click

In this tutorial, you’ll learn how to use the “navigate to” block to allow your app’s users to navigate between app screens with a simple button click.

Properties

Button

Layout

Style

Navigation

Button Blocks

To access the blocks specific to the button component:

1. On the Design tab, add a Button component to a screen.

2. Navigate to the Blocks tab.

3. In the component tree on the left, click the name of the button component.

4. A drawer of button-specific blocks opens.