arrow-left

Only this pageAll pages
gitbookPowered by GitBook
triangle-exclamation
Couldn't generate the PDF for 257 pages, generation stopped at 100.
Extend with 50 more pages.
1 of 100

Drag and Drop

Loading...

Loading...

Getting Started

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Gen AI

At Thunkable, our mission is to empower creators of all experience levels to build real-world apps—faster and more intuitively than ever before. With our new Generative AI tools, you can turn your ideas into fully functioning apps using nothing but plain language—no coding required.

Here’s what makes it stand out:

  • Free to use: Gen AI tools are available to all Thunkable users, including those on the free plan.

  • Rapid prototyping: Simply describe what you want—say, “a fitness tracker app with a timer and stats”—and our AI generates screens, components, and logic to match your vision.

  • No code necessary: Customize and refine your app using Thunkable’s visual design canvas and blocks-based logic builder.

  • Real apps, not demos: Build apps you can preview on devices, test across platforms, and publish—fully functional on iOS, Android, and the web.

Joining millions of creators who solve real problems with Thunkable, our Gen AI tools are designed for students, entrepreneurs, designers, and anyone with an idea—and the will to build it today.

Help

hashtag
Help Options

We are proud to offer you the following resources:

  1. Thunkable Academyarrow-up-right Not sure where to get started? Check out the Thunkable Academy!

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

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

  4. Contact our Support Team Creators on our paid plans can click the chat icon in the upper right corner of any Thunkable Project page to connect with our Support team.

What is Thunkable?

Thunkable is a no-code platform that empowers anyone to design, build, and publish native mobile and web apps—without writing a single line of code. Whether you’re launching your first idea, prototyping a product, or teaching app development, Thunkable gives you all the tools to create and deploy functional apps quickly and visually.


hashtag
Build Apps with AI

Thunkable now includes AI-powered app generation to help you get started faster than ever. Just describe what you want to build—like:

Thunkable Communityarrow-up-right
Instructional Videosarrow-up-right
Our help icon contains resources for all of your support and learning needs.
The help icon contains resources for all of your support and learning needs.

Video Tutorials

Thunkable Live App

Data Source Tutorials

Connecting to Data Sources

User Auth & Management

Firebase

Google

Apple

Projects

User Interface & Design

Navigators

“A journaling app that tracks moods and sends daily reminders.”

Thunkable will instantly generate a working app project for you. The result includes:

  • Pre-built screens and UI layouts

  • Customizable components and design

  • A fully editable project you can test, refine, and publish

You can jump in immediately to personalize the app using Thunkable’s drag-and-drop interface and visual logic editor.


hashtag
Why Thunkable?

Thunkable combines the ease of visual design with the power of native app functionality. It’s built to support everything from early prototypes to full production apps, all in one platform.

  • Visual UI design – Build interfaces with drag-and-drop components

  • Logic blocks – Add behavior and interactivity without code

  • Native features – Access the camera, sensors, notifications, maps, and more

  • Cross-platform publishing – Create once and publish to iOS, Android, and the web

  • Modular development – Reuse UI and logic with drag-and-drop Modules

  • AI-generated projects – Start faster with working apps built from your ideas


hashtag
Who Uses Thunkable?

Thunkable is designed for creators of all backgrounds:

  • Students and educators who want to learn app development

  • Designers and solopreneuers who need to prototype ideas quickly

  • Non-technical makers who want to build real apps without writing code

  • Startups and developers who need to launch MVPs fast


hashtag
What Can You Build?

Thunkable supports a wide variety of app types:

  • Productivity tools and business apps

  • Educational and learning apps

  • AI-enhanced utilities and chatbots

  • Media players and creative tools

  • Games, interactive projects, and more

  • Any app that uses APIs or native device features


hashtag
How It Works

Getting started with Thunkable is simple—even if you’ve never built an app before:

  1. Describe your app idea Start by writing a short prompt that describes what you want to build. For example: “I want to build a task tracker that sends daily reminders.”

  2. Thunkable creates a working project Based on your description, Thunkable generates a complete, editable app. It includes screens, UI elements, and logic that match your idea.

  3. Customize your app Open the project in the Thunkable Builder and personalize it. Use drag-and-drop tools to rearrange components, change styles, and update logic—all visually.

  4. Preview and publish Test your app instantly in the browser or on your mobile device. When you're ready, you can publish it directly to the App Store, Google Play, or as a web app.


hashtag
Additional Help Options

We are proud to offer you the following resources:

  1. Thunkable Academyarrow-up-right Not sure where to get started? Check out the Thunkable Academy!

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

  3. Instructional Videosarrow-up-right Enjoy instructional videos? Check out our library of tutorials available on YouTube.

  4. Contact our Support Team Creators on our paid plans can click the chat icon in the upper right corner of any Thunkable Project page to connect with our Support team.

The help icon contains resources for all of your support and learning needs.


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

🤖 Generative AI Tools 💰 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 Pricingarrow-up-right.

circle-check

Have feedback on our Docs? Please take a moment to share your feedback here: Thunkable Docs Feedbackarrow-up-right. Your valuable insights will help us improve and better serve you in the future.

Project Collaboration

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.

Thunkable Community Forums

Staff & Community contributed tutorials on our Community forum.

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

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.

Google Sheets

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

You can make a copy of our spreadsheet here:

Local Table

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

Create Data in a Thunkable Data Source

In this tutorial, we’ll demonstrate how to create data in a connected data source such as Google Sheets, Airtable, or a local table.

Read Data in a Thunkable Data Source

In this tutorial, we’ll demonstrate how to read data in a connected data source such as Google Sheets, Airtable, or a local table.

Update Data in a Thunkable Data Source

In this tutorial, we’ll demonstrate how to update data in a connected data source such as Google Sheets, Airtable, or a local table.

Delete Data in a Thunkable Data Source

In this tutorial, we’ll demonstrate how to delete data in a connected data source such as Google Sheets, Airtable, or a local table.

User Sign-Up, Sign-In, and Auth

In this tutorial, we’ll show you how to use Firebase to authenticate your users and allow them to sign up and sign in to your app.

User Sign Out and Password Reset

In this tutorial, you’ll learn how to allow a Firebase authenticated user to reset their password and sign out of your app.

User Sign-Up, Sign-In, Sign-Out, and Auth

In this tutorial, we’ll show you how to use Google to authenticate your users and allow them to sign in and out of your app.

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.

How to Copy and Customize Public or Sample Thunkable Projects

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.

Save and Reuse Thunkable Screens

In this tutorial, we’ll show you how to streamline your workflow and maximize your efficiency across diverse projects by saving a screen from one app project and reusing it in another!

circle-info

This feature may only be available for Creators on certain Thunkable plans. Please refer to our pricing page for more information: .

Create Scrollable Screens in Your Thunkable App

In this tutorial, you’ll learn how to create scrollable screens, which allow users to access a large amount of content within a confined screen space.

If you have questions about the tutorial’s content, head over to the Thunkable Community post specific to this tutorial here:

How to Use the Thunkable Stack Navigator

In this tutorial, we'll explore what a stack navigator is and provide step-by-step instructions on implementation.

How to Use Thunkable Top and Bottom Tab Navigators

In this tutorial, we'll explore the benefits of using a top or bottom tab navigator and provide step-by-step instructions on implementation.

How to Use the Thunkable Drawer Navigator

In this tutorial, we'll explore the benefits of using a drawer navigator and provide step-by-step instructions on implementation.

Combine Figma Frames with Thunkable Navigators

Thunkable allows you to design your UI for your no code app in Figma and quickly add functionality within our platform.

Head here to learn more:

Organizationschevron-right
Tutorials & DIY Guidesarrow-up-right
Staff Written Tutorialsarrow-up-right
Our help icon contains resources for all of your support and learning needs.

Building Your First Thunkable App

Components

Data Visualization

Files

Realtime Databases

Alerts & Notifications

Cloudinary

Hour of Code

Advanced Blocks

Sample Apps & Tutorials

Firebase

App Building

Screens

Thunkable Academy

A series of videos designed to help you develop competency in Thunkable.

Camera

Text

Thunkable No Code App Creation Basics

https://docs.google.com/spreadsheets/d/1hMdJ1O-uekCi1_aT4OpWInk_bS_pvU3zouqYYXE2sn4/copyarrow-up-right
Thunkable pricingarrow-up-right
https://community.thunkable.com/t/increasing-screen-real-estate-with-scrollable-screens-with-video-tutorial/2727933arrow-up-right
https://www.producthunt.com/products/thunkable#thunkable-figma-integrationarrow-up-right

Getting Started Guide

Follow these steps to build your first app!

Thunkable is a drag-and-drop platform that allows anyone to design, develop, and deploy powerful mobile and web apps — all without writing code.

Whether you're a student, educator, entrepreneur, or hobbyist, you can bring your app ideas to life using intuitive visual tools and powerful logic blocks.


hashtag
Create Your First App

When you open your Projects Page in Thunkable, you’ll see two ways to get started:

hashtag
1. Use the AI Template Generator ✨ (Recommended)

The fastest way to jumpstart your project. Just describe what you want to build — for example, “a task manager for students” or “a recipe app that filters by ingredients” — and the AI Template Generator will create a starter app with:

  • Screens and layouts

  • Functional components

  • Basic logic

After your prompt previews your starting point, you can immediately start to customize and expand the project as much as you like.

📘 See our Docs

hashtag
2. Start from Scratch

If you want complete creative control or already know how you want your app to work, start with a blank project. You’ll build your UI, add logic, and connect data sources step by step.


hashtag
The Thunkable Design + Blocks Interface

Thunkable’s editor has two key areas:

  • Design Tab: Drag and drop components like buttons, images, lists, maps, and more to visually build your app’s UI.

  • Blocks Tab: Add logic to your app using code blocks — no syntax required.

You can switch between these tabs anytime as you build.

hashtag
The Design Editor

Designing the visual aspect of your app is accomplished with screens, , and . You can combine, style and customize them to give your app personality and style that best suits your brand.​

hashtag
The Blocks Editor

Thunkable are the building blocks of a great experience for your app users. Every component has its own set of blocks to start or trigger an event and set and change properties.


hashtag
Preview and Test Your App

As you build, you can preview your app in real time:

  • Use the button in the top-right corner to open a web preview.

  • Download the mobile app on iOS or Android to test directly on your phone.


hashtag
Next Steps

Here are some great ways to keep learning:

  • 📘 View tutorials in the

  • 💬 Join the

  • 📺 Check out our page

circle-check

Have feedback on this doc? Please take a moment to share your feedback here: . Your valuable insights will help us improve and better serve you in the future.

AI Edit Mode

The AI Editor in Thunkable is available in both the Design tab and the Blocks tab, helping you build screens and generate logic with ease.

The AI Editor on the Blocks tab in Thunkable is a fast and convenient way to build your app by generating blocks using natural language. Powered by ChatGPT, this feature helps you quickly create functionality without manually searching for each block, so you can focus more on your app’s logic and design.

hashtag
What is the AI Blocks generation?

AI Blocks Generation is an in-app tool that lets you describe what you want your app to do, and it automatically creates the necessary blocks for you. Integrated directly into the Thunkable platform, it uses ChatGPT to understand your requests and generate working blocks in real-time.

hashtag
Key Benefits

  • Instant block creation based on natural language instructions.

  • Accessible anytime via the Blocks tab in your project.

  • AI finds and inserts blocks for you.

hashtag
How it Works

To use the AI Editor to generate blocks:

  • Open your project

  • Go to the Blocks tab

  • Click the AI icon

  • Describe the functionality you need

  • Keep interacting, asking for additions, or more features.

hashtag
Example Questions

Try asking:

  • Create navigation for all labels to screens with matching names

  • Sign in using email and password from Text_Input1 and show the Google profile

  • When button is clicked, loop through each item in list and display them in label

circle-info

Using AI features requires tokens. You can check your token balance in the lower-left corner of your project screen.

AI Chatbot Helper

The AI Chatbot in Thunkable is a fast and convenient way to get answers to your questions about app development using the Thunkable platform. Powered by ChatGPT, this tool provides real-time responses to help you keep building without delays.

hashtag
What Is the AI Chatbot?

The AI Chatbot is an in-app feature that connects you with ChatGPT, trained to understand and answer questions related to Thunkable. It’s designed to assist with how the platform works, provide block suggestions, and clarify app development concepts.

hashtag
Key Benefits

  • Instant support for basic questions and common tasks without waiting for a human support response

  • Available anytime within your project workspace

  • Follow-up capable, so you can keep asking questions as needed

hashtag
How it Works

To use the AI Chatbot:

  1. Open your project

  2. Go to the Block tab or Design tab

  3. Click the AI icon

  4. Write your question

hashtag
Example Questions

How do I create a sign-in logic?

How can I add a video to my app?

What’s the process to publish my app?

hashtag
When to use the Chatbot vs Contacting Thunkable team

Use the AI Chatbot when you need help with how to use Thunkable or build something with blocks, or when you’re looking for general guidance, suggestions, or best practices.

Contact the Thunkable team, when you have a billing-related question, encounter an issue after publishing your app (e.g., an error received via email), or an unresolved issue.

circle-info

AI features require tokens to operate. You can view your token balance in the lower-left corner of your project screen.

Undo Redo

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

hashtag
Keyboard Shortcuts

circle-info

“⌘” should be replaced with “Ctrl” for non-macOS environments.

hashtag
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

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

Thunkable Account

You can create a Thunkable account with a Google account or with any other email address.

hashtag
Sign Up

To get started with Thunkable, visit our sign uparrow-up-right 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.

hashtag
Sign In‌

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

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

hashtag
Sign in with Google

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

hashtag
Sign in with Apple

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

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

Sample Apps

Don't know where to start on your project? Start building quickly with our sample projects.

Thunkable Inventory - Inventory Managementarrow-up-right

Book Reviewsarrow-up-right

Event Plannerarrow-up-right

Sign In + Sign Outarrow-up-right

Web API - Weather Apparrow-up-right

ThunkableDoodle - drawing apparrow-up-right

Image Recognizerarrow-up-right

How to Build a Translation App in Thunkable

In this tutorial, we’ll build a translation app that translates the user’s text input from one language to another.

Implement Text Input Validation

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

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.

User Sign-Up, Sign-In, Sign-Out, and Auth

In this tutorial, we’ll show you how to use Apple to authenticate your users and allow them to sign in and out of your app.

Use the Device’s Camera as a QR or Barcode Scanner

Tapping into a mobile device’s camera opens up a world of possibilities for Thunkable Creators. In this tutorial, we’ll add the functionality to scan a barcode or QR code with the device's camera.

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/2659502arrow-up-right

Customize a Data Viewer

In this tutorial, we’ll show you how to customize a Thunkable data viewer so you can display your data in a way that meets your user’s needs and reflects your brand design.

How to Use the Visibility Property to Create Modals in Thunkable

In this tutorial, we'll show you how to use the UI component visibility property to create a modal, a temporary screen overlay, in your Thunkable project.

How to Read Data in a Firebase Realtime Database

In this tutorial, you’ll learn how to read data from a connected Firebase Realtime Database.

Template app: https://x.thunkable.com/projectPage/6577a8b65b4895de24de1e45arrow-up-right

How to Design a Thunkable App

Having a great app design is critical for enabling your users to navigate the features of your app effectively. In this video, we'll create the look and feel for our app directly in Thunkable.

Sign up for free: https://x.thunkable.com/signuparrow-up-right

Download the Thunkable Live app to live test your app on a device: https://thunkable.com/#/mobilearrow-up-right

How to Create a Text-to-Speech App in Thunkable

Incorporating text-to-speech functionality brings written words to life by converting them into spoken audio. In this tutorial, we’ll add text-to-speech functionality to a translation app.

See the Thunkable Docs for a list of supported text-to-speech languages: https://docs.thunkable.com/blocks/app-features/speech#supported-text-to-speech-languagesarrow-up-right

Connect Your Thunkable App to a Web API

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.

How to Create Three-Button Alert Messages

In this tutorial, you’ll learn how to build a three-button alert in your Thunkable app to prompt your users.

2022 - Build a Scavenger Hunt App

Join us in this Hour of Code activity to build a Scavenger Hunt app for you and your friends.

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/arrow-up-right

How to Connect a Thunkable App to a Data Source

Connecting your app to a data source allows you to build a dynamic app that updates continuously with data stored in Airtable, Google Sheets, Webflow, or a local table.

Sign up for free: https://x.thunkable.com/signuparrow-up-right

Download the Thunkable Live app to live test your app on a device: https://thunkable.com/#/mobilearrow-up-right

2023 - Build a Translator and Text-to-Speech App

Join us in this Hour of Code activity to build a translator app that can read your translations out loud with text-to-speech technology.

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.comarrow-up-right

How to Use the Device’s Video Camera

In this tutorial, you’ll use Thunkable camera app features to create an app that records a video with the device's camera.

Thunkable UI Components and App Features

In this video, we’ll explore a variety of versatile Thunkable user interface components and app features that will have you transforming your app from bland to grand in no time.

Sign up for free: https://x.thunkable.com/signuparrow-up-right

Download the Thunkable Live app to live test your app on a device: https://thunkable.com/#/mobilearrow-up-right

How to Update Data in a Firebase Realtime Database

In this tutorial, you’ll learn how to update data in a connected Firebase Realtime Database.

Display Alert Messages in Your Thunkable App

In this tutorial, we’ll show you how to build alerts in your Thunkable app to display important information, warnings, or prompts to users.

How to Make A Thunkable App Interactive with Blocks

Once your data is flowing between your data source and app, you’ll need to add app functionality.

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/signuparrow-up-right

Download the Thunkable Live app to live test your app on a device: https://thunkable.com/#/mobilearrow-up-right

How to Use the Device’s Camera

In this tutorial, you’ll use Thunkable camera app features to create an app that takes a photo with the device's camera.

Getting Started with Thunkable

By the end of this Thunkable platform overview, you will have designed, developed, and tested a simple app that allows users to navigate from one screen to another.

Sign up for free: https://x.thunkable.com/signuparrow-up-right

Download the Thunkable Live app to live test your app on a device: https://thunkable.com/#/mobilearrow-up-right

Store and Access Cloudinary Files in Your Thunkable App

In this tutorial, you’ll learn how to use files stored in Cloudinary in your app and how to upload files directly from your app to Cloudinary.

AI tools

hashtag
Overview

These new AI features accelerate your app development process. They can assist with understanding how Thunkable works, suggest useful block combinations, help design screens, or identify problems in your blocks.

hashtag

Prompt Engineering

hashtag
Overview

Prompt engineering is the practice of designing clear and effective instructions or questions for an AI system to improve the quality of its responses. It involves choosing the right words, structure, and context to help the AI better understand what is being asked and provide accurate, relevant answers.

Prompt engineering helps Thunkable AI tools generate more accurate and relevant outputs based on user input. By crafting effective prompts, users can improve app functionality and create more intuitive user experiences.

AI Text and Image Generation

circle-exclamation

Note: Each AI tool consumes a portion of your monthly allotment of tokens. The number of tokens available each month depends on your Thunkable plan. See our guide for details.

hashtag
Overview

Design, Develop, Debug, and Deploy Your App

In this video, we’ll dig into the four D’s of Thunkable app creation: Design, Develop, Debug, and Deploy.

Sign up for free:

Download the Thunkable Live app to live test your app on a device:

Understanding Thunkable's Drag and Drop Block Builder

In this video, we’ll explore Thunkable’s no code, drag and drop as we create an image recognition app.

Sign up for free:

Download the Thunkable Live app to live test your app on a device:

How to Create an Image Recognition App with Thunkable

In this tutorial, you’ll use Thunkable camera app features to create an app that takes a photo with the device's camera and utilizes image recognition functionality to identify the photo’s content.

Read the response

  • Ask follow-up questions.

  • Flashcard Apparrow-up-right
    Travel Apparrow-up-right
    Quote Estimatorarrow-up-right
    Expense Trackerarrow-up-right
    Landscape Material Calculatorarrow-up-right
    Building Materials Calculatorarrow-up-right
    Package Pickup - Customerarrow-up-right
    Package Pickup - Driverarrow-up-right
    Conversation-friendly, so you can continue asking for new features as needed.
    On button click, change the label's text to ‘clicked’
  • When an item in Simple List is clicked, change text color to yellow

  • When button is clicked, count with i from 1 to 5, repeat with j from 1 to 2, and set label's text to join i and j

  • sign inarrow-up-right

    ✅

    ❌

    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.

  • Shortcut

    Expected Behavior

    Design Tab

    Blocks Tab

    ⌘ + Z

    Undo

    ✅

    ❌

    ⌘ + Y or

    ⌘ + Shift + Z

    Redo

    You can also publish your app to the web or to app stores once it’s ready.
    AI Project Generatorarrow-up-right
    user interface (UI) components
    navigators
    blocks
    Live Test
    Thunkable Livearrow-up-right
    Thunkable Academyarrow-up-right
    Community Forumsarrow-up-right
    YouTubearrow-up-right
    Thunkable Docs Feedbackarrow-up-right
    AI Chatbot Helper

    The AI Chatbot, powered by ChatGPT, can answer questions related to app development, Thunkable blocks, and general platform usage.

    To use the AI Chatbot:

    1. Open your project

    2. On the Design or Blocks tab, click the icon

    3. Enter your question in the chat window.

    hashtag
    AI Debugger

    The AI Debugger helps identify and explain issues within your blocks. It provides feedback and suggestions to improve your logic or fix errors.

    To use the AI Debugger:

    1. Open your project

    2. Go to the Blocks tab

    3. Click the icon

    4. Turn the AI Debugger switch to true

    hashtag
    Token Usage

    All AI-powered features require tokens to operate. The number of tokens available depends on your Thunkable planarrow-up-right. You can see how many tokens you have used in the omnibararrow-up-right bottom, after selecting an AI tool.

    AI tool
    Token Cost Per Use

    Chatbot Helper

    ~ 200

    Style AI

    ~ 500

    AI Debugger

    ~ 300

    AI Image Generation

    hashtag
    Inline AI Generator

    There are two ways to access the inline AI generator for both image and text generation.

    1. Omnibar: In the Design tab, click the AI tools icon on the Omnibar and select Edit Image or Edit text.

    2. Component Selection: Click directly on the relevant component in your app.

      • For generating text, use components like Labels, click the AI Text Editor icon and enter your prompt in the pop-up.

      • For generating images, click on an Image component, click the Generate Image icon and type your prompt in the pop-up that appears.

    See the example images below (from left to right): the AI tools on the Omnibar, a Label component example, and an Image component example.

    AI tools Omnibar
    Label Component
    Image Component

    hashtag
    Generation

    When generating text or images with AI in Thunkable, the more detail you provide, the better the results. You don’t need perfect grammar or full sentences—just focus on clearly describing your idea.

    Quick, short phrases are key when writing prompts. The better you prompt the AI, the better the results will be. Start with instructions, then context, lastly any special request (for example, if you want it to reply in a certain format or word it in a particular manner).

    Quick, short phrases or keywords are especially important for image generation. Key factors to consider include resolution (e.g., 4K, 1080p, pixel art), level of detail (realistic, cartoon, simplistic, minimalistic), the art style, and a clear description of the image. The more specific information you provide, the better the AI can generate an image that matches your expectations.


    hashtag
    Project Generation

    When generating a project, it's important to have a clear understanding of your app's concept. To get the most out of the AI project generator tool, describe the main purpose of the app in the prompt field, and specify the types of screens you want included—such as a sign-in screen, home screen, or any other key interfaces.

    📘 For more information on creating a project with AI, see our AI Project Generator Docs

    This new AI feature accelerates your app development process by generating text and images throughout your apps.

    hashtag
    AI Text Generator

    Get a first draft of your app's text fast with AI text generation.

    hashtag
    Generate AI Text Directly in the Designer

    1. Drag a label component onto a project screen.

    2. Click the AI Text Editor icon

    3. In the provided text input, type a description of the text you want to generate.

    4. Click the upward arrow to submit your prompt.

    5. Click Use Suggestion to populate the label component with the generated text.

    6. Click Return to generate a fresh text suggestion.

    For more on working with the label component, see here: Label Component.

    hashtag
    AI Image Generator

    With a simple text prompt, generate one-of-a-kind illustrations, images, or art to use as assets in your project.

    hashtag
    Generate an AI Image Directly in the Designer

    1. Drag an image component onto a project screen.

    2. Click the Generate Image icon

    3. In the provided text input, type a description of the image you want to generate.

    4. Click the upward arrow to submit your prompt.

    5. Click the generated image you want to add to your app.

    6. Click Use this to populate the image component with the generated image.

    7. Click Return to generate fresh image suggestions.

    For more on working with the image component, see here: Image Component.

    hashtag
    AI Image Editor

    With a simple text prompt, edit an image in your project.

    hashtag
    Edit an Image Directly in the Designer

    1. Drag an image component onto a project screen.

    2. Select a Picture from the Assets or use AI to generate an image.

    3. Click the AI Image Editor

    4. In the provided text input, type a description of the image you want to generate.

    5. Click the Change to submit your prompt.

    6. Click the generated image you want to add to your app.

    7. Click Use this to populate the image component with the generated image.

    8. Click Return to generate fresh image suggestions.

    token usage
    https://x.thunkable.com/signuparrow-up-right
    https://thunkable.com/#/mobilearrow-up-right
    https://x.thunkable.com/signuparrow-up-right
    https://thunkable.com/#/mobilearrow-up-right

    Versioning

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

    Accelerate and 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: .

    hashtag
    Video Tutorial

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

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

    2. Click the Version History clock icon in the upper right.

    Each auto version’s name reflects the date and time the version was created.

    hashtag
    Version actions

    Click the version’s vertical ellipsis to access its version actions.

    hashtag
    Restore

    The Restore option reverts your current project to this version.

    hashtag
    Manual versioning

    hashtag
    Create an app version

    To save a version of your project:

    1. Access the Design tab of your project.

    2. Click the Version History clock icon in the upper right.

    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.

    hashtag
    Version actions

    Click the version’s vertical ellipsis to access its version actions.

    hashtag
    Restore

    The Restore option reverts your current project to this version.

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

    hashtag
    Delete

    The Delete option will permanently delete the selected version. This action can’t be undone.

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

    2021 - Build an Informational App

    Join us in this Hour of Code activity to build an app that displays information from a data table in a way that’s easy for people to see and understand.

    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/#/hourofcodearrow-up-right

    Learn more about Hour of Code here: https://hourofcode.comarrow-up-right

    AI Project Generator

    Tell us what you want to build — we’ll show you how to start.

    Skip the blank screen and get building faster. The AI Project Generator jumpstarts your app by creating a set of screens and logic based on your idea — no setup required. Just describe what you want to make, and we’ll turn your concept into a working app in seconds.

    Whether you’re a first-time creator or looking to save hours of setup, the AI Project Generator helps you explore what’s possible and brings your vision to life instantly.


    hashtag

    Omnibar

    The Omnibar is your all-in-one access point for Thunkable’s AI-powered tools, designed to help you build and edit your app faster and more intuitively. Located inside the Project Editor, the Omnibar consolidates key AI features like StyleAI, AI Debugger, AI Chat Helper, and Rewrite This into a single, easy-to-access menu.

    Whether you're looking to generate content, redesign a screen, debug app behavior, or refine copy, the Omnibar brings these capabilities together so you can stay focused and productive. This guide will walk you through what each icon in the Omnibar does and how to use them effectively in your project.

    circle-exclamation

    Note: Each AI tool consumes a portion of your monthly allotment of tokens. The number of tokens available each month depends on your Thunkable plan. See our

    Local Table Data Source

    Connecting your project to a data source allows you to work with the information that you have stored in Airtable, Google Sheets, Webflow or a local table.

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

    ~ 400

    AI Text Generation

    ~ 100

    AI Template Generator

    ~ 1000

    AI Edit Mode

    ~ 200

    To change the name of a version, click in the version name field and type your preferred version name.

    Thunkable pricingarrow-up-right
    What Is the AI Project Generator?

    Thunkable's AI Project Generator is a tool that creates a multi-screen app based on a short text description. You tell us what kind of app you want to build, and we generate a fully editable starting point you can customize.

    Think of it as an instant launchpad for your ideas.


    hashtag
    Key Benefits

    • Removes the blank page problem — Ideal for beginners and non-technical users.

    • Saves hours of work — Quickly generates multiple screens with example layouts and blocks for logic.

    • Sparks inspiration — See what’s possible and get ideas for features and flows.


    hashtag
    How It Works

    hashtag
    1. Go to the Thunkable project dashboard

    Go to your Thunkable project dashboardarrow-up-right.

    hashtag
    2. Describe Your App Idea

    Type a short, clear description of what you want to build. For best results, be specific about the app’s purpose or features.

    Examples:

    • “A to-do list app with reminders and categories”

    • “A fitness tracker for logging workouts and viewing progress”

    • “A travel planner with a home screen, calendar, and checklist”

    🔍 The more detail you give, the better your project will match your idea.

    hashtag
    3. Let AI Do the Work

    Click Generate Project and wait a few seconds. Thunkable’s AI will analyze your idea and build a project with multiple screens, components, and sample logic.

    hashtag
    4. Review and Customize

    Explore your new app:

    • Review the structure and layout

    • Rename screens and components

    • Add your own data and branding

    • Review or logic blocks to add new features

    This is your app — the AI just got you started.


    hashtag
    Tips for Better Results

    • Use simple, specific language: “A budgeting app with charts” works better than “Something for money.”

    • Mention the screens you want: For example, “A login screen, a dashboard, and a settings page.”

    • Start small: You can always expand your app after generation.


    hashtag
    Frequently Asked Questions

    hashtag
    Can I edit everything the AI creates?

    Yes! Everything is fully customizable — screens, components, design, and blocks.

    hashtag
    What if the generated app doesn’t match what I wanted?

    You can regenerate the project with a revised description, or start from the generated screens and modify them to fit your needs.

    hashtag
    How many screens does the AI generate?

    Typically 3–5 screens, depending on the complexity of your prompt.

    hashtag
    Can I use this on a Free plan?

    Yes, AI-generated projects are available on all plans, though usage limits may apply.


    hashtag
    What’s Next?

    Once your AI-generated app is created, you can:

    • Add more Blocks to your project

    • Add more screens or additional UI components

    • Connect to data sources

    • Publish to the App Store or Google Play ( required)

    • your project with other Thunkers!


    The AI Project Generator is designed to give you momentum. Start with an idea — end with an app.

    👉 Create your first AI-powered app nowarrow-up-right

    guide for details.

    hashtag
    Using the Omnibar: Design vs. Blocks Tab

    The Omnibar adapts depending on whether you’re in the Design or Blocks tab of the Project Editor. While the Design tab focuses on layout and visual components, the Blocks tab enables AI-assisted block generation.

    hashtag
    Omnibar in the Design Tab

    hashtag
    Icon Overview

    Icon
    Name
    Description

    Select

    Use this tool to select and interact with components on the screen.

    Pan

    Click and drag to move around the canvas. Helpful for navigating large projects.

    In the Design tab, clicking the AI tools icon , opens a menu of AI tools focused on layout, UI, and content creation:

    Tool
    Function

    Edit App

    Apply layout or design changes across the screen.

    Make an Image

    Generate original AI images to use in your app.

    Edit Image

    Modify existing images using a prompt.

    Rewrite This

    Each tool is optimized for visual creation — no code required.

    hashtag
    Omnibar in the Blocks Tab

    When you're in the Blocks tab, clicking the AI Tools icon opens an AI prompt field to help generate blocks with natural language.

    How it works:

    1. Click the icon to open the AI input box.

    2. Type a prompt describing what you want your app to do. Example:

      • Text: when the screen opens, set its background color to green

      • Expression: 1 + 2 * 3

    3. AI will interpret your prompt and suggest corresponding blocks.

    4. Click the upward arrow to submit your prompt.

    5. Use the suggested blocks directly in your app!

    token usage
    hashtag
    Video Tutorial

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

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

    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.

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


    circle-check

    Have feedback on this doc? Please take a moment to share your feedback here: Thunkable Docs Feedbackarrow-up-right. Your valuable insights will help us improve and better serve you in the future.

    Data Viewer Componentschevron-right

    Account Management

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

    circle-info

    If you upgrade your account within a current billing cycle, the new plan cost will be prorated. You will only pay the difference between the cost of the two plans and not the entire cost of the new plan.

    • Credit/Debit - the proration is automatic.

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

    circle-check

    You will continue to have access to your plan for the remainder of your payment period.

    circle-exclamation

    If you downgrade your account to Free, we maintain your account and projects unless you request your account be deleted. Existing private projects become read-only and remain private unless you change them to public. Once public, you can edit the project, but note that a public project can't be changed to private again unless you are on a paid plan again.

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

    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.

    circle-exclamation

    If you have published any of your apps to the Play Store or the App Store, you must export the keystores of the published apps and import them into the copy of the app in your new account. Instructions are available here: .

    circle-info

    Your Thunkable Community account history cannot be transferred to the new email address.

    hashtag
    Access Invoices

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

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

    hashtag
    PayPal

    1. Sign into your PayPal account.

    2. Navigate to your PayPal dashboard.

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

    hashtag
    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 . Refunds are assessed on a case-by-case basis and are not guaranteed.

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

    circle-info

    You can use Google Chrome to translate the Thunkable Designer by following the instructions here: .

    Preview and Test your App

    Preview and test your Thunkable project with the Thunkable Live app or Web Preview.

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

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

    You can also preview any public app, directly from the app's Project Detail Page.

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

    hashtag
    Video Tutorial

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

    hashtag
    Download the Thunkable Live App

    Links to download Thunkable Live for Android and iOS are available here:

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

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

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

    hashtag
    If changes that you make cause the app to crash...

    • Close the app and reopen it.

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

    Data Sources

    Connecting your project to a data source allows you to work with the information that you have stored in Airtable, Google Sheets, Webflow or a local table.

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

    Google Sheets Data Sourcechevron-rightAirtable Data Sourcechevron-rightLocal Table Data Sourcechevron-right

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

    circle-info

    You can also connect a data source in a data viewer's properties panel. Learn more here: .

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

    hashtag
    Sort

    1. Open a data source.

    1. Click on a Filter View.

    1. Click Sort icon.

    1. Select column.

    1. Select Ascending or Descending.

    hashtag
    Delete a Data Source

    There are multiple methods to delete a data source.

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

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

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

    hashtag
    Related Docs

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

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


    circle-check

    Have feedback on this doc? Please take a moment to share your feedback here: . Your valuable insights will help us improve and better serve you in the future.

    Webflow Data Source

    Connecting your project to a data source allows you to work with the information that you have stored in Airtable, Google Sheets, Webflow or a local table.

    circle-exclamation

    The option of connecting a Webflow data source was removed. Because of changes to how the Webflow API will functionarrow-up-right, we have removed the ability to use Webflow as a data source and replaced the existing tables with local tables. We suggest you update your data source to either Airtable or Google Sheets at your earliest convenience.

    hashtag
    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

    hashtag
    Video Tutorial

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

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

    circle-info

    To protect the quality of its service, the Webflow CMS API default rate limit is 60 requests/minute. Exceeding this limit will result in an error on the Thunkable platform, so please keep this in mind as you build your app.

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

    circle-info

    To protect the quality of its service, the Webflow CMS API default rate limit is 60 requests/minute. Exceeding this limit will result in an error on the Thunkable platform, so please keep this in mind as you build your app.

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


    circle-check

    Have feedback on this doc? Please take a moment to share your feedback here: . Your valuable insights will help us improve and better serve you in the future.

    Google Sheets Data Source

    Connecting your project to a data source allows you to work with the information that you have stored in Airtable, Google Sheets, Webflow or a local table.

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

    Airtable Data Source

    Connecting your project to a data source allows you to work with the information that you have stored in Airtable, Google Sheets, Webflow or a local table.

    hashtag
    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 as the data source.

    circle-info

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

    Data Viewer Components
    Data Viewer Componentschevron-right
    Data Sources Blockschevron-right
    Thunkable Docs Feedbackarrow-up-right
    paid planarrow-up-right
    Share
    spinner
    spinner
    spinner

    To delete columns, click the x in the column’s title box.

    Click the trash can icon to delete the data source from your project.

    PayPal - the entire cost of the new plan is charged, and a refund will be issued for the difference in fees.

    Choose the free plan.

  • Confirm your selection.

  • Share a Fully Editable Copy of Your App Project.arrow-up-right
    Export and Import a Keystorearrow-up-right
    [email protected]envelope
    Change Chrome languages & translate webpagesarrow-up-right
  • Open the Thunkable Live app on your device.

  • Sign in with the same Google account.

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

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

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

  • Publish as a Web App
    https://thunkable.com/mobilearrow-up-right
    set up an emulator

    Select Webflow.

  • Click the API Key tab.

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

  • Click the Integrations tab.

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

  • Copy the Webflow API token.

  • Return to your Thunkable tab.

  • Paste the copied Webflow API token into the corresponding field.

  • Click Refresh to see your Webflow sites.

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

  • Click Create.

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

  • Select Webflow.

  • Click the OAuth tab.

  • Click Connect to Webflow.

  • A Webflow authorization screen opens.

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

  • Click Authorize app.

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

  • Data Viewer Componentschevron-right
    Thunkable Docs Feedbackarrow-up-right

    The first row in your sheet must be a header row, and every column must have a header.

  • Your Google Sheet must be sharablearrow-up-right so that Thunkable can access the data.

  • hashtag
    Video Tutorial

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

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

    circle-exclamation

    If you are using a G Suite for Education account and experience issues connecting to Google Sheets, contact your G Suite administrator to review your security settings.

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

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

    hashtag
    Reset Your Google Sheets Connection

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

    hashtag
    Windows

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

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

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

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

    hashtag
    Reset from Google

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

    1. Navigate to https://myaccount.google.com/securityarrow-up-right

    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.


    circle-check

    Have feedback on this doc? Please take a moment to share your feedback here: Thunkable Docs Feedbackarrow-up-right. Your valuable insights will help us improve and better serve you in the future.

    Data Viewer Componentschevron-right
    Effective February 1, 2024, Airtable no longer supports connecting via API key. You must connect your Thunkable project to Airtable via OAuth.

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

      circle-info

      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.

      circle-info

      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.

    12. Indicate if you'd like to use a custom view. Learn more here: .

    13. Click Create.

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

    circle-check

    Once you've connected your Airtable account to your Thunkable account via OAuth, API keys are no longer used.

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

    hashtag
    Authorization Header For Block

    circle-info

    This block is only necessary for Creators who use web API blocks to communicate with Airtable.

    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.

    circle-exclamation

    If you're transitioning from connecting via API keys to OAuth, you must do the following to ensure the changes take effect:

    • Do a hard refresh on your browser. You can learn more here: Hard Refresh Your Browserarrow-up-right.

    • Re-download or re-publish your app.

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

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


    circle-check

    Have feedback on this doc? Please take a moment to share your feedback here: Thunkable Docs Feedbackarrow-up-right. Your valuable insights will help us improve and better serve you in the future.

    Airtablearrow-up-right
    Data Viewer Componentschevron-right

    Zoom In

    Zoom in to get a closer view of your project layout.

    Zoom Out

    Zoom out to get a broader view of your project layout.

    Fit to Screen

    Automatically adjusts zoom to fit the entire currently selected screen on the canvas.

    Improve or reword text on labels, buttons, or other UI components.

    Keyboard Shortcuts

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

    hashtag
    Design Tab

    hashtag
    Blocks Tab

    hashtag
    Keyboard Shortcuts

    Shortcut
    Expected Behavior
    Design Tab
    Blocks Tab
    circle-info

    “⌘” should be replaced with “Ctrl” for non-macOS environments.

    Use a Custom View

    ✅

    ✅

    Esc

    When in Web Preview, the equivalent of clicking Back to editing.

    ✅

    ✅

    F

    Access the Designer's Focus tool.

    ✅

    D

    Live Test on Device. Equivalent to clicking the Live Test icon.

    ✅

    ✅

    Press and hold spacebar + drag cursor

    Mac touchpad:

    Press and hold spacebar + two-finger move cursor

    Pan around the screen.

    Note: The cursor must remain in the screen area in order to continue panning.

    ✅

    ⌘ + C

    Copy screens, components, and blocks.

    ✅

    ✅

    ⌘ + V

    Paste copied screens, components, and blocks.

    ✅

    ✅

    Arrow keys

    Move the selected UI component—small nudge.

    ✅

    Shift + arrow keys

    Move the selected UI component—larger nudge.

    ✅

    ⌘ + K

    Toolbox search in Blocks tab.

    ✅

    ⌘ + F

    Workspace search in Blocks tab.

    ✅

    ⌘ + ⬆

    Select the previous component in the component tree.

    ✅

    ⌘ + ⬇

    Select the next component in the component tree.

    ✅

    ⌘ + ⬅

    Go to previous screen.

    ✅

    ✅

    ⌘ + ⮕

    Go to next screen.

    ✅

    ✅

    Delete or Backspace

    Delete selected component.

    ✅

    ✅

    ⌘ + Z

    Undo

    ✅

    ✅

    ⌘ + Y or

    ⌘ + Shift + Z

    Redo

    ✅

    ✅

    T

    Toggle between the Design and Blocks tabs.

    ✅

    ✅

    P

    Web Preview. Equivalent to clicking the Web Preview icon.

    Organizations

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

    hashtag
    Organization Management

    circle-info

    This feature may only be available for Creators on certain Thunkable plans. Please refer to our pricing page for more information: .

    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)

    hashtag
    Roles and Permissions Summary

    Action
    Org. Admin
    Project Owner
    Editor
    Viewer

    hashtag
    Admin Dashboard

    The Organizations Admin Dashboard is available for an organization’s Admins. This is where they can add, remove, and modify members' roles.

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

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

    hashtag
    Add Member

    1. Click Add Member.

    2. Input the invitee’s email address.

    3. Indicate their role (Admin or Member).

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

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

    hashtag
    Assigning a Project to an Organization

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

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

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

    circle-info

    hashtag
    Transferring Editing Access

    Only one project member can be in editing mode at a time.

    circle-exclamation

    If the member currently in editing mode is offline, no other member can edit the project. The member currently in editing mode must return online and grant access to a different member.

    hashtag
    Sharing and Updating Permissions

    To share a project with a user in your organization:

    1. Click the Share icon.

    2. Select Project Sharing.

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

    To update the permissions of a user in your organization:

    1. Click the Share icon.

    2. Click the user's existing permission level (EDITOR or VIEWER) and select Editor, Viewer, or Remove.

    hashtag
    Collaborating with Comments

    Organization members can collaborate on projects by adding comments to UI components.

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

    circle-info

    Each UI component is limited to 25 comments, and each comment has a maximum character count of 2000.

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

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


    circle-check

    Have feedback on this doc? Please take a moment to share your feedback here: . Your valuable insights will help us improve and better serve you in the future.

    Publish

    -

    Yes

    Yes

    No

    Share

    -

    Yes

    No

    No

    Download

    -

    Yes

    Yes

    No

    Access project settings

    -

    Yes

    Yes

    No

    Grant Edit Access

    -

    Yes

    No

    No

    Remix project

    -

    Yes

    Yes

    No

    Duplicate project

    -

    Yes

    No

    No

    Delete project

    -

    Yes

    No

    No

    Figma import

    -

    Yes

    No

    No

    Versioning

    -

    Yes

    No

    No

    Click Add.

    Confirm the removal.

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

  • Click Duplicate into Organization.

  • You are the owner of the newly created project in the selected organization. There are no other members with permissions on this project yet.

  • To request editing access, a member in viewing mode must click the chevron next to VIEWING.

  • Click Request Edit.

  • The member currently in editing mode is notified that another member has requested editing access.

  • When the member currently in editing mode switches to viewing mode, the member requesting editing access is switched to editing mode and can make changes to the project.

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

  • Click Add.

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

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

  • Click the send button.

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

  • Click the Comment icon to close the comment panel.

  • Comments are displayed in the order they were added, with the most recent comment appearing at the bottom of the UI component's comments.

  • UI components with the most recent comments appear at the top of the comment panel, making it easier to find the most recent discussions.

  • Click the Comment icon to close the comment panel.

  • Locate the comment you want to delete.

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

  • Click Delete.

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

  • Click the Comment icon to close the comment panel.

  • Add/Remove members

    Yes

    No

    No

    No

    Thunkable pricingarrow-up-right
    Thunkable Docs Feedbackarrow-up-right