📐
Thunkable Docs
Build an AppDrag and Drop DocsSnap to Place Docs
Snap to Place
Snap to Place
  • 👋Welcome to Thunkable Docs
  • 👶Getting Started
    • Signing In
    • Your Thunkable Projects Page
    • Tutorials
    • Live Test your App
  • 🆕Create New Project
    • Project Settings
    • Project Assets and Sizes
  • Thunkable Sample Projects
  • Public Gallery of Projects
  • 🛠️ Components
  • 🔘User Interface
  • Button
  • Label
  • Text Input
  • List Viewer
  • Web Viewer
  • Switch
  • Slider
  • Alert
  • Loading Icon
  • Date Input
  • Time Input
  • PDF Reader
  • Rating
  • 📊Data Viewers
  • Data Viewer List
  • Data Viewer Grid
  • Custom Data Viewer Layout
  • Data Sources
  • 📐Layout
  • Top Tab Navigator
  • Bottom Tab Navigator
  • Stack Navigator
  • Drawer Navigator
  • Screen
  • Row
  • Column
  • 📷 Image
  • Image
  • Photo Library
  • Camera
  • Barcode Scanner
  • Image Recognizer
  • Animation by Lottie
  • Video
  • Video Recorder
  • 🗄️ Data
  • Local Storage
  • Local DB
  • Realtime DB by Firebase
  • Airtable
  • Media DB by Cloudinary
  • File Picker
  • Web API
  • 🌍Location
  • Maps by Google and Apple
  • Location Sensor
  • 💲Monetization
  • Ads by AdMob
  • In-App Purchase
  • 🌐Sensors
  • Gyroscope
  • Magnetometer
  • Accelerometer
  • Timer
  • Bluetooth Low Energy
  • 🔊Voice
  • Sound
  • Text to Speech
  • Speech Recognizer
  • Translator
  • Audio Recorder
  • 🤝Social
  • Share
  • Email Sign In by Firebase
  • Push Notifications by One Signal
  • 🎮Gaming
  • Canvas
  • Sprites
  • Sprite Gallery
  • Canvas Label
  • 🤖Gaming Blocks🎮
  • Events
  • Motion
  • Looks
  • Direction
  • Sensing
  • Add & Remove
  • Stage
  • Canvas Label
  • 🤖Blocks
  • Control
  • Logic
  • Math
  • Text
  • Lists
  • Color
  • Objects
  • Device
  • Variables
  • Functions
  • "Any Component" Blocks
  • 🖥️ App Services & Emulators
  • 🔒App Data Privacy
  • ➕Make Copy
  • 📥Download
  • 📤Share
  • 📱Publish
  • Publish to App Store (iOS)
    • TestFlight Overview
      • TestFlight in Depth
  • Publish to Play Store (Android) with AAB
  • Publish as a Web App
  • Generate Screenshots
  • 🔎Troubleshooting
    • Login Issues
    • FAQs
  • 📏Intro to Spacing
  • 🖼️ Intro to Sizing
  • 🔤Fonts
  • 💾Managing Storage
  • 📝Bugs and Product Feedback
  • Snap to Place Hour of Code Videos
Powered by GitBook
On this page
  • What's a Component?
  • Visible Components
  • Invisible Components
  • Finding Components
  • The Component Tree

Was this helpful?

Export as PDF

🛠️ Components

Features and functions for your app

PreviousPublic Gallery of ProjectsNextUser Interface

Last updated 7 months ago

Was this helpful?

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.

🔘User Interface
📐Layout
📷 Image
🗄️ Data
🌍Location
💲Monetization