Thunkable Interface
1. Main Parts
• Design Screen – Create the app’s look (buttons, text, images, etc.).
• Blocks Screen – Add logic and functions using drag-and-drop coding blocks.
• Component Tree – Shows all items in your screen (helps organize).
• Properties Panel – Change settings of components (color, size, text).
2. Navigation Bar
• Home – See and manage projects.
• Design – Build the app layout.
• Blocks – Add app logic.
• Preview/Live Test – Test your app.
• Publish/Download – Export for Android, iOS, or Web.
Button Component
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.
Label Component
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.
Rich Text Component
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.
Image Component
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.
Layout Component
The layout component helps you place UI elements more precisely on a screen. It lets
you position items based on other items. For example, on a sign-in screen, if the user
enters a wrong email or password, the layout can automatically move things around to
show an error message.
Input components
Switch – Two-state toggle for choosing between two options, often used for on/off
settings like sound, Bluetooth, or Wi-Fi.
Slider – Horizontal track with a movable thumb to select a value between a minimum
and maximum. The track fills with colour from the minimum to the thumb as the value
changes.
Checkbox – Lets users select one or more options from a set, such as in to-do lists or
filters. Provides visual feedback of selected and unselected items for clarity.
Date Input – Digital calendar for picking dates. Simplifies date entry, reduces errors,
and uses native Android and iOS date pickers.
Time Input – Tool for selecting times. Simplifies time entry, reduces errors, and uses
native Android and iOS time pickers.
Control Blocks
Control blocks are code blocks that decide how and when things happen in your app.
They control the order of actions and let you repeat tasks or make choices based on
conditions.
Examples of control blocks in Thunkable:
• If…then / If…then…else (do something only if a condition is true)
• Repeat (repeat actions a certain number of times)
• While (keep repeating actions while a condition is true)
• For each item in list (do something for every item in a list)
• Wait (pause for a set time before continuing)
Logic Blocks
Logic blocks help your app make decisions. They work with control blocks to check
conditions and choose what happens. They make apps interactive by responding to
different inputs or situations.
Examples of logic blocks in Thunkable:
• True / False (basic yes or no values)
• =, ≠, <, > (comparison blocks to check values)
• And / Or / Not (combine or reverse conditions)
• Empty? (check if a list or text is empty)
• Contains? (check if text or list has something)