Getting Started on Thunkable

Welcome to Thunkable, a website dedicated to helping you design and program your very own app.

For the projects you will encounter, we will be using Thunkable's new Drag and Drop interface for ease of use and simplified code blocks.

Before we have a quick navigate through Thunkable's workspace, just know you can find a thorough Drag and Drop documentation here:

Creating a Project

When starting, make sure to have a Thunkable account which you can easily register and sign into with an email.

Once logged in, you will be greeted with the My Projects page which features several other tabs that you can explore.

Hit the Create New App button. When you create a new project, make sure the check the box to try out the new interface!

Interface Overview

Design Page

  1. Sub-tabs for the Design page:
    • Designer: Contains a hierarchy of visible UI components placed upon your screens.
    • Data: Create a store data sources in the form of tables/spreadsheets.
    • Assets: Contains all the files your app uses such as images or audio files. This is the main contributor to your app's size.
    • Settings: If you plan on publishing your app, properties found in this tab is where you set the name of the app displayed on the app stores, set the icon of the app, etc.
    • Help: Additional tutorials offered by Thunkable.
  2. Switch between the Design (laying out components) and Blocks (coding the components) workspace
  3. You can find all the visible UI components you have added to your screens here.
  4. Visible component can be searched and dragged onto the screen from this section.
  5. Add or Reposition Screens.
  6. Tools to reposition the screens on your workspace (Select, Pan, Zoom Out, Zoom In, Focus).
  7. On Thunkable, there will always be a component selected (Screen1 is selected from the image above). You can tell which one is selected by looking for either:
    • A red dotted boundary encompassing on object on your workspace.
    • A highlighted component from section #3
  8. You can preview, share, or download your app.
    • It is possible to run your app on Thunkable's Live Preview feature however there are some features (taking a photo with camera) that works best on the mobile app.
    • To test your app on your own mobile device (phone, tablet), you can download the Thunkable App from Google Play Store (Android) or the App Store (Apple).

Blocks Page

  1. UI components: A collection of all the visible components places onto the Screens of your app.
  2. Core: Contains commonly used set of code blocks that ranges from opening screens, setting up logic, reformatting data or simplifying code.
  3. App Features: Contains functions that cannot be viewed in your app, but performs important background tasks such as sensors, taking photos, etc.
  4. Advanced: Features components requiring a little more set-up than the other App Features.

Sharing Your App

There are 2 ways to share your project easily:

  1. View project detail page: allows you to share the preview of your app or even view the code without letting anyone edit your copy of the project.
  2. Share: When you generate a share link, it will create a copy of your app project at the point in time you generate the link. If you update your app and want your collaborators/remixers to have the latest copy, you'll have to generate a new link.