# What is Thunkable AI?

Thunkable AI is a vibe coding mobile app development platform that enables anyone with an idea to build and launch native mobile apps to Apple’s App Store or Google Play.

***

## Overview

The AI Project Generator lets you turn a plain-text description into a production-ready mobile or web app in real time. Just describe what you want to build and Thunkable AI handles the screens, logic, and design for you. Once your project is ready, you can customize and test it on the web or on your device using the Thunkable Live mobile app, then publish when you're ready.

***

## Getting Started Video

{% embed url="<https://www.youtube.com/watch?v=Q07PWJTnwhU>" %}

***

## Prompting

Just like any powerful AI tool, Thunkable AI works best when you give it a clear, detailed prompt. The more context you provide, the smarter your results.

Compare:

* “I want a food tracker.”\
  vs.
* “I want an app that lets me scan barcodes of the foods I’m eating. My goal is to lose weight, so I need to track calories and other nutrients, and set goals and targets over time.”<br>

Both will generate an app, but the second unlocks a far richer, more tailored experience.

<figure><img src="/files/stLuoRtuAPKR9dxfrmNv" alt=""><figcaption></figcaption></figure>

#### **Input options**

Before submitting, you can customize how your app is generated:

* **Private** — Keep your app private so it's only visible to you.
* **Plan mode** — Toggle this on to have the AI outline a plan for your app before building it, giving you a chance to review and refine the direction first.
* **Attach image** — Attach one or more reference images (such as UI mockups, sketches, wireframes, screenshots, logos, or inspiration) to help the AI better understand your vision and generate a more accurate app. Images can be uploaded using the **+** button next to the prompt input.
* **Database** — Choose where your app's data is stored. Save data locally on the user's device for offline and personal apps, or use **Supabase** cloud storage for apps that require user accounts, shared data, or synchronization across devices.

<figure><img src="/files/vyDoseiX3kU7VbLrGpRP" alt=""><figcaption></figcaption></figure>

#### **Start With an Idea**

Not sure where to begin? Click any of the example prompts below the input box to instantly load it as your starting point. Edit it to fit your needs, or submit it as-is to see what Thunkable AI builds.

<figure><img src="/files/5C8ALHPEC7d2RqgjHz42" alt=""><figcaption></figcaption></figure>

***

### Start from a Template

If you already have a clear idea of the type of app you want to build, you can start with one of Thunkable AI's pre-built templates instead of generating an app from scratch.

Templates provide a fully functional foundation for common app categories, allowing you to customize the design, content, and functionality to match your specific requirements. This can significantly reduce development time and help you get started faster.

To use a template:

1. Open [ai.thunkable.com/hikari](https://ai.thunkable.com/hikari)
2. Scroll down to the **Start from a template** section.
3. Browse the available templates.
4. Remix the template you want to use.
5. The template will open as a new project, ready for you to customize.

Each template includes pre-built screens, navigation, and sample content that you can modify using AI or the visual editor.

## AI Tokens

Each Thunkable plan will grant different allotments of tokens to be used in project generation, which will be replenished at the start of each billing cycle for monthly plans, and on the 1st of each month for Yearly plans.&#x20;

* **Free** - 2,000 tokens per month
* **Accelerator** - 20,000 tokens per month
* **Builder** - 50,000 tokens per month
* **Advanced** - 100,000 tokens per month

For each Build Prompt and response on Thunkable AI, roughly 250 tokens will be deducted from your balance. Each Discuss Mode Prompt will cost 100 tokens.&#x20;

#### Getting Support

You will be able to seamlessly connect with Thunkable Support wherever you run into issues.&#x20;


# Quickstart

New to Thunkable AI? This Quickstart Guide will take you through everything you need to know to get started and bring your ideas to life.

## App Building Video Guide

{% embed url="<https://www.youtube.com/watch?v=7KgI9tzSlAc>" %}

***

## Project Generation Prompt

The prompt box on the home page is the starting point for creating your first mobile application.

For your first prompt, **be as detailed as possible**. A sample prompt is below for creating a travel app for visiting San Francisco.

Color Palettes: Using a tool like [coolers.co](http://coolers.co) for inspiration is recommended

```
// Prompt Example
Create a travel app based on a San Francisco trip, with three tabs: Home, Tips, and Settings.

Home:
A 2x3 grid of neighborhood tiles — Mission, SoMa, Richmond, Sunset, North Beach, and Chinatown — each with a photo and name.
Tapping a tile opens a dedicated neighborhood screen (without the bottom nav). Each neighborhood screen includes:

- A map with 3 restaurants and 3 attractions pinned
- A short description of the neighborhood
- A list of all 6 locations, each with a title, brief description, and star rating
- A link per location that opens a full-screen detail view with photos, a longer write-up, and a Google Maps link


Tips:
A guide covering how to prepare for your trip, getting around, what to eat, and useful apps to download.

Settings:
General preferences like dark mode.

Color palette follows Spotify's scheme: #1DB954, #212121, #121212, #535353, #B3B3B3.
```

### Plan Mode&#x20;

In addition to the ability to simply enter a prompt to get started, Plan Mode provides additional perspective on features you may find valuable on your app's first iteration.&#x20;

Below you'll find additional considerations for an app using the above example: *Create a travel app using my most recent trip to San Francisco.*

The presented questions allow for a deeper level of customization from the start of your project.&#x20;

* "Who will use this app—just you, or do you want to share your trip with others?"
* "What matters most for your San Francisco trip experience?"
* "Should your trip data and photos stay on your device, or would you like them backed up?"

While Plan Mode offers these additional perspectives, you'll only need to answer questions relevant to your vision. Answer what matters - skip the rest.

<figure><img src="/files/gqlttJrciMpMscS6MPXY" alt=""><figcaption></figcaption></figure>

## Builder Screen Components

### **Prompt Box**

The prompt box is the primary area where you build and modify your mobile app. Your prompts will generate code that your app is built on.

As a general rule, be as specific and detailed as possible when prompting.

<figure><img src="/files/Jtjq5U08pbBtBLqPHQiC" alt=""><figcaption></figcaption></figure>

### Voice Input

Voice Input allows you to speak your prompt instead of typing it. This makes it faster and easier to describe the app you want to build, especially for longer requests or when you're away from your keyboard.

To use Voice Input, click the **microphone icon** in the prompt box, speak your request, and your speech will automatically be converted into text that you can review before submitting.

{% hint style="info" %}
To use Voice Input, you should approve microphone permission.
{% endhint %}

### **Attach image**

The **Attach image** option lets you upload images to provide visual context for your prompt. This is useful for sharing UI mockups, wireframes, sketches, screenshots, logos, or design inspiration so the AI can better understand what you want to build.

To attach an image, click the **+** button in the prompt box and select one image from your device. Uploaded images will appear above the prompt and will be analyzed together with your text when generating the app.

### Tokens Left

The **Tokens Left** indicator shows how much of your available AI context is left for the current conversation. As you send prompts and receive responses, the available tokens decrease.

Monitoring your remaining tokens helps you understand when you're approaching the conversation limit and when it may be beneficial to start a new chat for the best AI performance.

### **Discuss Mode**

Discuss Mode allows you to work with our AI agent to plan the next update to your app and is most effective in troubleshooting. This is important for two reasons:

* *Speed* - the AI agent response is faster and can help plan your next code prompt
* *Accuracy* - by planning your next prompt with our agent, it makes the implementation and result of your next prompt more accurate

<figure><img src="/files/0KF6QFU2uAtqhcHokgvn" alt=""><figcaption></figcaption></figure>

### Choose AI model

The AI Model selector lets you choose which AI model is used for your next prompt. It is available in the chat composer footer, next to the Tokens Left indicator, in both Modify and Discuss modes.

* *Standard -* is the default model for every new chat session. It provides fast responses with the same behavior and token cost as the existing AI experience.
* *Max* - uses a more capable AI model designed for more demanding tasks.

Choose **Max** when you need:

* More accurate and detailed responses.
* Better reasoning for complex features.
* Higher-quality code generation.
* More effective troubleshooting and planning.

{% hint style="info" %}
Using Max consumes more tokens than Standard, typically around 1.5× on Modify mode and 2× on Discuss mode.
{% endhint %}

### Mention Components in Chat

You can reference existing components in your app directly in the chat when prompting the AI.

To mention a component, select the component you want to reference by clicking on it in edit mode..

When a component is selected, the chat enters **Apply to** mode, indicating that any requested changes will be applied to the selected component.

<div align="left"><figure><img src="/files/bBx46PEaZe3vJEsYG8YK" alt=""><figcaption></figcaption></figure></div>

### Mention Screens in Chat

You can reference existing project screens directly in the chat when prompting the AI.

To mention an asset:

1. In the chat input, type **@**.
2. Select **Screens** from the dropdown.
3. Choose the **Screen** you want to reference or type the screen name.

Once selected, the screen is inserted into your message as a tag rather than plain text, making it easy to identify and ensuring the AI references the correct screen.

{% hint style="info" %}
Only screens that already exist in your project are available from the **@** menu.
{% endhint %}

## Navigation Bar Components

### **App Icon**

The image that represents your app on your users' mobile devices.&#x20;

To customize your app’s icon:

1. Click the plus icon (+) at the left of your project name.

<figure><img src="/files/FohQOc8PhxAEH4EtwZdp" alt=""><figcaption></figcaption></figure>

2. Click **Click or drag an icon to upload** to select an image from your device, or drag the files into the provided drop window.

<div align="left"><figure><img src="/files/gnetrCMZ7Bqwpj0TyjL6" alt="" width="321"><figcaption></figcaption></figure></div>

{% hint style="info" %}
This feature may only be available for Creators on certain Thunkable plans. Please refer to our [pricing page](https://thunkable.com/#/pricing) for more information.
{% endhint %}

### **Project Privacy**

Indicates whether your project is private or publicly viewable.&#x20;

Private projects are only available in our Paid Plans

<figure><img src="/files/mbTQYQhz4CMgYqIv6hAf" alt=""><figcaption></figcaption></figure>

### **Show/Hide Panel**

Toggles the visibility of the side panel with the prompt box and code generation streaming

<figure><img src="/files/SoL8ezNk5PUPftUTaxLh" alt=""><figcaption></figcaption></figure>

### **App Secrets**

Opens and closes the API keys panel, where you can view and edit the keys for any APIs connected to your app.

<figure><img src="/files/PO7383Ui55vV1Cgmnkrs" alt=""><figcaption></figcaption></figure>

### **Edit View**

Sets the canvas to Edit View, which shows all screens in your mobile app and updates with each code change via prompt or manual update

<figure><img src="/files/mHrgjDs8HCVQAKDiudyE" alt=""><figcaption></figcaption></figure>

### Preview Mode

Sets the canvas to Preview Mode, showing a single screen and allowing users to test the app by interacting with buttons, content, and navigating between screens

<figure><img src="/files/VnBLg5kINUR9m3eQ3LWT" alt=""><figcaption></figcaption></figure>

### **Code View**

Sets the view to show the underlying code for your mobile app. Users can directly edit the code

<figure><img src="/files/F0iRXtbwIhrjdRXKOWRQ" alt=""><figcaption></figcaption></figure>

### **Screen Navigator**

Allows users to navigate and set the active screen via drop down menu select.

<figure><img src="/files/EiusuAajreAd9hsPFSke" alt=""><figcaption></figcaption></figure>

### &#x20;**App Preview**

Enables users to preview their mobile app in the official Thunkable Mobile App

<figure><img src="/files/lRPvwVdMOkwn8YieczwU" alt=""><figcaption></figcaption></figure>

### &#x20;**Share**

When you generate a share link, it creates a copy of your app project at the point in time you generate the link. If you update your app and want your collaborators/remixers to have the latest copy, you'll have to generate a new link.

### **Download App**

iOS: Detailed instructions found [here](https://docs.thunkable.com/settings/manage-your-projects/download/iosdownload#download-ios-app)

Android: Sends an email link to [download an APK](/ai/downloading/android-downloading) to install on your Android device

<figure><img src="/files/4NhXKrwqRbjPayR1HjYe" alt=""><figcaption></figcaption></figure>

### **Publish App**

Allows users to publish their app on iOS, Google Play, or as a Web App.

iOS: Sends a build to your App Store Connect account to publish to Apple’s App Store (Developer Account required)

Android: Sends a link to download an Android App Bundle (AAB) for you to upload to your Google Play Developer account

Web App: Publishes your app as a web app accessible via browser.

<figure><img src="/files/aFtowUgwU0CmLiMYRHpd" alt=""><figcaption></figcaption></figure>

## Code Editor

### Navigating to Code Editor

Users can edit the code for their app directly by navigating to the Code View from the Nav Bar

<figure><img src="/files/ibGlJbE48t74QQdbitE6" alt=""><figcaption></figcaption></figure>

### Editing Code

Users can edit their app code directly from the code editor, which includes useful features such as color pickers for updating their app's color palette.

{% hint style="info" %}
**Tip:** Use Discuss Mode to ask our AI agent where to find elements in your app to update directly. Common prompts include "Where in code can I update an image?" or "Where in code can I update a description?"
{% endhint %}

<figure><img src="/files/LRAFlYG8UytptQgmdSku" alt=""><figcaption></figcaption></figure>


# Tips and Tricks

Clear, structured prompts and thoughtful testing are key to getting the most out of **Thunkable AI**. When you clearly explain what you want, provide organized inputs, and test changes step by step, the AI can better understand your intent and deliver more accurate results.

This guide is here to support you along the way. It walks you through how to write effective, easy-to-understand prompts, use AI features intentionally, and steer clear of common mistakes that can slow you down. Whether you’re just getting started or refining an existing project, these best practices will help you work more efficiently, reduce frustration, and build higher-quality apps with confidence.

{% hint style="success" %}
Take your time with prompts. Re-check everything. Break work into small tasks. The more precise your inputs, the better your outputs.
{% endhint %}

### 1. Explain your goal in one paragraph

Write one clear paragraph with a few sentences that explain exactly what you want the AI to do.

**Send a specific and clear paragraph:**

> ✅ Please make an app for math calculations with 3 screens to help students deal with math problems. I need a page to set the problems, one page with math exercises history, and one for the settings.

**Avoid multiple-paragraph prompts. For example**:

> ❌ Create a Math Learning mobile app that uses Firebase email and password authentication to manage user access. The app should provide a clean and simple user experience focused on learning and practicing mathematics.
>
> The app should include a Login Screen where users can enter their email and password and sign in using a Sign In button. Firebase Authentication (email/password) should be used to validate the user’s credentials and securely log them into the app.
>
> There should also be a Signup Screen that allows new users to create an account. This screen should include fields for email, password, and confirm password, along with a Sign Up button. Upon successful registration, the user should be authenticated using Firebase and redirected into the app.
>
> After a successful login or signup, the user should be taken to the Home Screen, which serves as the main math dashboard. This screen can display math lessons, quizzes, or practice activities. The Home Screen must include a Logout button that allows the user to sign out of the app.

### 2. Specific prompts

Clearly describe what should change, where it should happen, and what the expected result is.

**Good examples:**\
✅ *Add a cat image on the first screen.*\
✅ *On the first screen, calculate the total number of posts from the list.*

**Avoid generic prompts:**\
❌ *Update the style to be more modern and add some images*\
❌ *Can we improve it?*\
❌ *Change the user interface*

### 3. Use natural language

Write prompts the same way you would explain a task to another person.

**Good example:**\
✅ *Please make a math learning app with a home screen, a favorites screen, and a settings screen.*

**Avoid technical or HTML-style prompts:**\
❌### \[PROJECT: SOVEREIGN\_V10\_SPECTER\_CORE\_ALPHA] ### \[CLEARANCE: ADMIN\_0097\_ROOT\_GRANTED] ### \[ASSEMBLY\_DATE: JANUARY\_24\_2026] --- #### I. THE FRAMEWORK (Secured Binary & Obfuscation Layer) - \*\*Package Name\*\*: `com.android.test` (Disguise: "System AI Resource Controller"). - \*\*Pattern Analysis Avoidance\*\*

### 4. Write a whole sentence&#x20;

Always use complete sentences so the AI understands the context of your request.

**Good example:**\
✅ *Add a home screen that displays user posts and includes a button to add new posts.*

**Avoid short or vague prompts:**\
❌ *Try again*\
❌ *Continue*\
❌ *Game app*

### 5. Ask for specific changes

Clearly state exactly what should be added, removed, or modified.

**Good examples:**\
✅ *Remove the submit button from the settings screen.*\
✅ *On the profile screen, the latest posts should appear first.*

**Avoid sending AI error codes or vague messages:**\
❌ *Error Code: AIERR\_AI\_RESPONSE\_INVALID*\
❌ *Something went wrong.*

### 6. Manage simple adjustments in the code

For simple updates, it is faster and safer to [edit the code](/ai/getting-started/quickstart#id-4-code-editor) manually instead of asking the AI.

**Examples of safe manual changes:**

* Colors
* App name
* Version number
* Image URLs

<figure><img src="/files/zGtJnGKP8xxW0hGIMlEU" alt=""><figcaption></figcaption></figure>

**Avoid asking the AI for these changes:**\
❌ *Change the background color to red*\
❌ *Change the version number to two*

### 7. Download/Publish the app <a href="#id-6-use-github--version-control-wisely" id="id-6-use-github--version-control-wisely"></a>

Use the built-in features to [generate an APK](/ai/getting-started/quickstart#download-app), [AAB file, or publish your app](/ai/getting-started/quickstart#publish-app).

If you ask the AI to create an APK, AAB file, or publish the app for you, an error will be returned, as these actions must be handled through the platform’s publishing tools.

### 8. Keep a backup

Create a duplicate project as a backup before making major changes.

To make a copy of your project:

1. Open [Projects Page](https://ai.thunkable.com/hikari/)
2. Click the project's vertical ellipsis.
3. Select **Duplicate**.

<figure><img src="/files/gjTXIJcgYpFOON1vz9Q6" alt=""><figcaption><p>Open Projects Page, Click the project's vertical ellipsis, Select Duplicate.</p></figcaption></figure>

**Avoid asking the AI to preserve everything:**\
❌ *Don’t delete anything*\
❌ *Keep everything the same*

### 9. Read the docs first

Review Thunkable’s official documentation to understand features, limitations, and best practices before using AI.

This helps you write better prompts and avoid common mistakes.

### 10. Contact support when needed

Use Thunkable Support to report bugs, ask questions, or provide feedback.

This ensures issues are handled correctly and helps improve the platform.


# Toolbar Management

Thunkable AI provides several different tooltips for viewing, editing, publishing, and more. Each tool tip is designed to help guide you along the way from app idea to publication and is available at on your screen's top bar.&#x20;

<figure><img src="/files/LDccYYZxI5cSXPp96roP" alt=""><figcaption></figcaption></figure>

#### **App Icon**

The image that represents your app on your users' mobile devices.&#x20;

<div align="left"><figure><img src="/files/DIUYvss6CepL6nUpgVd0" alt="" width="362"><figcaption></figcaption></figure></div>

To customize your app’s icon:

1. Click the plus icon (+) at the left of your project name.

<figure><img src="/files/FohQOc8PhxAEH4EtwZdp" alt=""><figcaption></figcaption></figure>

2. Click **Click or drag an icon to upload** to select an image from your device, or drag the files into the provided drop window.

<div align="left"><figure><img src="/files/gnetrCMZ7Bqwpj0TyjL6" alt="" width="321"><figcaption></figcaption></figure></div>

{% hint style="info" %}
This feature may only be available for Creators on certain Thunkable plans. Please refer to our [pricing page](https://thunkable.com/#/pricing) for more information.
{% endhint %}

#### Public/Private

By default each project you work on in Thunkable will be public and available to share and review with friends. However by toggling the Public/Private button you can make your app private and only visible to your eyes. While sharing a link to your project will not allow others to make changes to it, they will be able to see it for themselves.&#x20;

<figure><img src="/files/qYB2pftQbPNil3mdRII2" alt=""><figcaption></figcaption></figure>

#### Collapse

The Collapse icon expands your view of the project by minimizing the prompt box. By clicking the button again, you can bring back the prompt box.&#x20;

<figure><img src="/files/pfJ7QYle6Lo4kD87VahO" alt=""><figcaption></figcaption></figure>

#### Edit

The Edit icon allows you to enter edit mode where most of your work is completed. You'll be able to make changes and expand on ideas for your app. Through the use of Discuss mode, your ability to fine tune your app is even greater.&#x20;

<figure><img src="/files/m7aYUQTo8nvUJvouCTsb" alt=""><figcaption></figcaption></figure>

#### Preview

The Preview icon enters preview mode, allowing for quick tests of your app from within ai.thunkable.com. From your first draft until completion, this feature gives you insight into the state of the app.&#x20;

<figure><img src="/files/ZeSIR5JJN9js5Y4VoTDa" alt=""><figcaption></figcaption></figure>

Preview mode also allows you to switch between different device types, making it easy to see how your app will appear on various screen sizes:

* **Mobile** – Preview the app as it would appear on a smartphone.
* **Tablet** – Test the layout and responsiveness on a tablet-sized display.
* **Desktop** – View how your app adapts to a desktop browser.

Switching between device previews helps ensure your app provides a consistent and responsive experience across all supported devices before publishing.

<figure><img src="/files/BN1CYBkk479O54BCIV2J" alt=""><figcaption></figcaption></figure>

#### Code

The Code icon opens up our code interface for a look behind the curtains at how your app is built. Minor edits within the code are also permitted.&#x20;

<figure><img src="/files/4IZVjLYJMkqNn3WWBxO6" alt=""><figcaption></figcaption></figure>

#### Live Test

Live Test is one of the most important features in Thunkable AI. The difference between the testing capability in the Preview screen is that Live Test is completed on your mobile device itself, allowing a more authentic test environment.&#x20;

<figure><img src="/files/S7aWfdVbF74i4aldaZZg" alt=""><figcaption></figcaption></figure>

#### Share <a href="#generate-a-share-link" id="generate-a-share-link"></a>

When you generate a share link, it creates a copy of your app project at the point in time you generate the link. If you update your app and want your collaborators/remixers to have the latest copy, you'll have to generate a new link.

1. Click the **Share** icon in the top right corner of your project.
2. Click **Share App**.
3. Click to place a checkmark in the associated box if you want to share your project with API keys and passwords included.
4. Click **Generate Link.**

   <div align="left"><img src="https://docs.thunkable.com/~gitbook/image?url=https%3A%2F%2F1223006790-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-LAn5scXl2uqUJUOqkJo-84897653%252Fuploads%252FtFL0Jndto5DbYVq4yztK%252FScreen%2520Shot%25202023-03-13%2520at%25203.41.55%2520PM.png%3Falt%3Dmedia%26token%3D32d2a3e1-5201-4a45-91d2-b92b977fe27f&#x26;width=768&#x26;dpr=3&#x26;quality=100&#x26;sign=daf65d7&#x26;sv=2" alt="" width="563"></div>
5. You will be given a share link and an expiry date. The share link will no longer work after this date.

{% hint style="warning" %}
These links expire after 60 days. If you want Creators to have access to your public project for a longer period, share the Project URL by copying it from the top of your browser.
{% endhint %}

#### Download

The Download icon will allow you to download the app to your device only. Either for personal use, or additional testing. There are different steps involved in downloading to an iOS device vs. an Android device.&#x20;

Downloading your app to an iOS device requires an Apple Developer account. The process requires Apple Developer account. We recommend having each open in a separate browser tab so you can easily navigate between them.

All Android apps built with Thunkable are built with Android API 35 and target Android 15.

To download your app to an Android device:

1. Click the **Download** icon.
2. Select **Download Android**.

   <figure><img src="/files/9G8XDssJd5P86HOrDmTp" alt="" width="375"><figcaption></figcaption></figure>

   The number of monthly downloads you are allowed varies per [Thunkable plan](https://thunkable.com/pricing). This number resets when your next billing cycle begins
3. Enter your email address in the provided field
4. Click **Send**.

You will be sent an email with a link to download your app.

<figure><img src="/files/ZlXgAiKcaqoYqIRl1LdV" alt=""><figcaption></figcaption></figure>

#### Publish

The Publish icon allows you to push your app out into the world. Now that you've successfully built your app from scratch, follow along the Publishing path to officially launch.

For more information on publishing, check out our [Publishing docs](https://aidocs.thunkable.com/publishing/publishing-overview).&#x20;

<figure><img src="/files/Jxbu5jYzVCgP3iO6rD9h" alt=""><figcaption></figcaption></figure>


# App Testing

Testing your Thunkable AI app ensures a smooth and intuitive user experience. By identifying potential bugs or performance issues that will frustrate your end users, you're set up for success with the ability to test prior to publication.&#x20;

#### How to Live Test

The phone icon in the top-right corner of your display will allow you to connect with your project via the Thunkable mobile app. You can test your app through two methods: Through the Thunkable Live App simply login to your account and start testing (Google SSO & Apple SSO supported). Alternatively, you can generate a unique code to enter into your browser to begin testing without logging in.&#x20;

Testing is supported across many Android and Apple devices so that you can determine your apps performance and appearance across different screensizes, resolutions, and operating systems.&#x20;

#### Download the Thunkable Live App

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

<figure><img src="/files/EneYXdpD7aHLAAXcc11b" alt=""><figcaption></figcaption></figure>

#### Why Test?&#x20;

By testing your application prior to its publication you're able to stay ahead of the curve. This provides you the opportunity to identify bugs before your users so that you can avoid unnecessary updates, allows you to test features before going through approvals by the iOS App Store and Google Play Store, and prevents negative reviews.&#x20;


# Drag and Drop

This guide is for users who are currently on ai.thunkable.com and need to access the Drag and Drop platform, or who previously created projects on that platform and cannot find them.

If this does not apply to you, we strongly recommend continuing to use the AI platform, as it is our most advanced environment and provides access to the advanced AI app builder and code.

To get immediate access to the Drag and Drop platform, please follow the steps below:

### Where to Find the Drag and Drop Platform

The Drag and Drop platform is available at:

<https://x.thunkable.com>

### Old Drag and Drop account

If you have used the Drag and Drop platform before:

1. Open <https://x.thunkable.com> on a tab in your browser or click the button: “Go to x.thunkable.com”
2. Sign in.

You should see all of your existing projects there.

### New account

To enable access to the Drag and Drop platform with your current account, follow these steps:

1. Open your account settings:\
   <https://ai.thunkable.com/account/settings>
2. Click on the Danger zone button to open <https://ai.thunkable.com/account/danger>
3. Find the section “Switch to Thunkable X”
4. Click “Switch”.
5. Select Switch on the pop-up.
6. Choose one of the available sign-in options to access the Drag and Drop platform.

### Access the AI Platform

To enable access to the AI platform with your account, follow these steps:

1. Open your account settings: <https://x.thunkable.com/account/settings>
2. Click on the Danger zone button to open ​<https://x.thunkable.com/account/danger>
3. Find the section labeled “Looking for Thunkable AI?”
4. Click “Try Thunkable AI”.
5. Choose one of the available sign-in options to access the AI platform.

{% hint style="info" %}
Projects cannot be moved between platforms:

AI platform projects cannot be transferred to the Drag and Drop platform.

Drag and Drop platform projects cannot be transferred to the AI platform.
{% endhint %}


# Project Settings

### Overview <a href="#overview" id="overview"></a>

App settings is where you configure and customize various aspects of your app.

To view or change your app settings:

* On your project page, click the **gear icon** in the left sidebar.

### 1. Shared Settings <a href="#id-1.-project-settings" id="id-1.-project-settings"></a>

#### App Name <a href="#app-name" id="app-name"></a>

The app name is the public name you choose for your app. It is what is displayed on the Google Play Store or Apple App Store and that users see when they install your app on their device.&#x20;

The best practice is to select a short one or two-word app name. The maximum length of an app name is 30 characters.

The app name is different from the project name, which is displayed at the top of your project. While the project name is Thunkable-specific and may include details specific to your team, the app name is user-facing.

#### App Icon <a href="#app-name" id="app-name"></a>

Your app icon is the image that represents your app on your users' mobile devices. This icon will also appear on your listing in the Google Play Store or Apple App Store and as your project icon on Thunkable.

{% hint style="info" %}
This feature may only be available for Creators on certain Thunkable plans. Please refer to our [pricing page](https://thunkable.com/#/pricing) for more information.
{% endhint %}

For publishing to the iOS [App Store](https://docs.thunkable.com/publishing/publish-to-app-store-ios#upload-an-icon-and-enter-your-build-number-and-version-number), you will also need an app icon that does not have any transparency, or it may cause an error.

For publishing your app to the Google Play and Apple App Stores, you will need to create a separate icon with a higher resolution. For [Google Play](https://developer.android.com/google-play/resources/icon-design-specifications#creating_assets), the current requirement is 500 x 500 px. For the [App Store](https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/app-icon#app-icon-sizes), it's 1024 x 1024 px.

{% hint style="info" %}
**Note:** Your app icon image will be used on the splash screen.
{% endhint %}

### 2. Android Settings <a href="#id-2.-publishing-settings" id="id-2.-publishing-settings"></a>

#### Package name <a href="#app-bundle-id" id="app-bundle-id"></a>

This is a unique identifier for your app on the Play Store. This field is auto-populated upon project creation, but if you choose to modify it, please ensure you follow the requirements below.

**App (Bundle) ID Requirements:**

* The maximum length is 155 characters.
* It must have at least two segments (one or more dots) - ex. `com.domain.creatorname.appname`
* Each segment must start with a letter (i.e. none of the segments can begin with a number).
* All characters must be alphanumeric or an underscore.
* A character cannot have an accent (e vs ë).

**Version Name**

Set a version name for this version of your Android app.

**Version Code**

Set a version code for this version of your Android app.

### 3. iOS Settings <a href="#id-2.-publishing-settings" id="id-2.-publishing-settings"></a>

#### Bundle ID <a href="#app-bundle-id" id="app-bundle-id"></a>

This is a unique identifier for your app on the App Store. This field is auto-populated upon project creation, but if you choose to modify it, please ensure you follow the requirements below.

**App (Bundle) ID Requirements:**

* The maximum length is 155 characters.
* It must have at least two segments (one or more dots) - ex. `com.domain.creatorname.appname`
* Each segment must start with a letter (i.e. none of the segments can begin with a number).
* All characters must be alphanumeric or an underscore.
* A character cannot have an accent (e vs ë).

**Version Number**

Set a version number for this version of your iOS app.

**iOS Permissions**

When you add components that require permissions to your app, such as the camera, you must add purpose strings for any relevant components in your app if you want to publish it to the App Store.

**Tracking Usage Description**

If your app or any external service your app interacts with is gathering any type of identifiable information, this must be explicitly disclosed to the end user of your app using an in-app prompt. If you do not include this and your app engages in tracking, Apple will reject your submission and ask you to resubmit while including an appropriate tracking string.&#x20;

If your app does contain AdMob, you could set the following Tracking Usage Description:&#x20;

This identifier will be used to deliver personalized ads to you.


# Cloud Database

## Overview

Thunkable Cloud DB is the behind-the-scenes backbone that powers apps built with Thunkable AI. It handles user login and stores your app's data automatically with Supabase. When you describe the app you want to build, the AI will suggest how to organize your data, and you can approve it right in the chat. Your app will then be able to read and write data in real time as people use it. From there, anyone using your app can create an account and sign in with their email and password.

## Video Tutorial

{% embed url="<https://www.youtube.com/watch?v=Smb4uMn8EDE>" %}

## Getting Started

### Step 1: Connect Your Supabase Account

Before you can use Thunkable Cloud, you'll need a free Supabase account. Supabase is where your app's data will live.<br>

1. Go to [supabase.com](https://supabase.com) and create a free account if you don't have one
2. In Thunkable AI, access your Cloud Database in your [account settings](https://ai.thunkable.com/account/supabase) or by clicking on the dropdown next to your profile, then selecting 'Cloud Database'.

<figure><img src="/files/WLcHxAwKLCHrsVuvdImA" alt="" width="300"><figcaption></figcaption></figure>

3. Choose how to connect:

{% tabs %}
{% tab title="OAuth2 (recommended) " %}

<figure><img src="/files/Zd3L07weEDkGjaO20oCv" alt="" width="563"><figcaption></figcaption></figure>

1. Click 'Sign in with Supabase' to navigate to the Supabase website to connect with Thunkable
2. Select the Organization to connect to, then click 'Authorize Thunkable'
   {% endtab %}

{% tab title="Personal Access Token" %}

<figure><img src="/files/z53OutfMKiuzVrizgBRm" alt="" width="563"><figcaption></figcaption></figure>

1. Generate a token at [supabase.com/dashboard/account/tokens ](https://supabase.com/dashboard/account/tokens)

2. Paste it in Thunkable and then click 'Save'
   {% endtab %}
   {% endtabs %}

3. You'll see a green status indicator when the connection is active.

<figure><img src="/files/XewQgBn38pVmtIZS9Swk" alt="" width="563"><figcaption></figcaption></figure>

### Step 2: Start a Project with Cloud Database

1. Create a new project in Thunkable AI and switch to [Plan Mode](https://aidocs.thunkable.com/#input-options)
2. In your prompt, include the following dependant on the feature you want to add:

{% tabs %}
{% tab title="Auth (Sign-in and Sign-out)" %}

```
Add User Authentication with User Sign-up and Sign-in through the Cloud Database with Supabase
```

When prompted with such questions as 'How should people sign in?', it is recommended to select 'Email only'.

{% hint style="warning" %}
There are many other sign-in methods that Supabase offers, such as Google Auth, but they may not be functional on Thunkable or may require additional external setup.
{% endhint %}
{% endtab %}

{% tab title="Data Storage" %}

```
Save the data in the Cloud Database with Supabase.
```

When prompted with such questions as 'How should the entries be stored?', select 'Cloud
{% endtab %}
{% endtabs %}

The first time you use Cloud on a project, Thunkable AI sets up a dedicated database in your Supabase account. This takes about 2 minutes. A progress card in chat will keep you updated.&#x20;

## Review and Approve Schema Changes

When your app needs to store data, Thunkable AI will propose a database change in chat before applying anything.<br>

1. A schema card will appear in chat describing the proposed change — for example, "Add a Habits table with Title and Streak fields"
2. Review the proposed tables, columns, and permissions
3. Click Apply to save the change to your database, or Cancel to skip it

<figure><img src="/files/QrYpEQv31d5mbhxTiK6i" alt="" width="563"><figcaption></figcaption></figure>

{% hint style="danger" %}
Schema changes are permanent in V1. Once applied, they can't be removed from version history. You can always add new tables and columns, but renaming or deleting isn't supported yet.
{% endhint %}

## Managing Your Connection

### If Your Connection Goes Red

If your Supabase connection expires or is revoked:

1. Go to Account Settings → Supabase
2. Paste a new Personal Access Token, or click Connect via OAuth2 to re-authenticate
3. Your connection will restore automatically — no need to disconnect first

Your published apps are not affected by a disconnected Supabase connection. They continue running independently.

### Disconnecting Supabase

1. Go to Account Settings → Supabase
2. Click Disconnect
3. Confirm the prompt

Disconnecting removes Thunkable AI's access to manage your databases. Your Supabase projects and all data remain in your account, untouched.

<br>

<br>


# API

## Overview

An API, or Application Programming Interface, is a set of rules that allows different software entities to communicate with each other. It acts like a bridge that lets two applications talk to each other and request or send data.&#x20;

By integrating with various APIs, the app can securely fetch real-time weather updates, news articles, and other live data without the need to rebuild these services from scratch.

To see what public APIs are available, we recommend [this list from Todd Motto](https://github.com/toddmotto/public-apis).

### Video Tutorial <a href="#video-tutorial" id="video-tutorial"></a>

#### How to Connect Your Thunkable App to an API <a href="#how-to-connect-your-thunkable-app-to-a-web-api" id="how-to-connect-your-thunkable-app-to-a-web-api"></a>

{% embed url="<https://youtu.be/OFdxD5h_nIE>" %}

In this video, we will demonstrate how to add and utilize an API to connect with Firebase's API for user authentication. We'll guide you through the process of setting up the Firebase project and integrating it with your app to enable secure user login and registration functionalities.

#### Steps to Add an API to Your Thunkable App

1. **Identify an API**: First, choose an API you want to integrate with your app. Make sure it fits your app's requirements.

**Caution:** Never input your API key directly into the code or the chat. This is crucial for maintaining security.

## Add an API to Your App

The AI in Thunkable can connect your app to any third-party API. Follow the steps below to get started.

#### Step 1: Find an API

Locate the API you want to use and gather the relevant documentation. Most APIs provide a base URL, required headers, and sample code — collect these before moving on.

#### Step 2: Ask the AI to Add the API

In the AI chat, describe the API you want to connect to. For best results, include the sample code from the API's documentation in your prompt so the AI has a reference to work from.

{% hint style="warning" %}
**Never paste your API keys into the chat or directly into your code.**&#x20;

Your credentials should only be entered through the form that appears after the AI adds the integration. This form will always appear automatically.&#x20;
{% endhint %}

#### Step 3: Enter Your API Keys

Once the AI adds the integration code, a form will appear prompting you to enter your API credentials.

<figure><img src="/files/pneAK8q8Uj2MMqfehQuW" alt=""><figcaption></figcaption></figure>

#### Step 4: Save Your Credentials

Paste your API key into the form and click **Save**. Your app is now connected to the API.

## How to Edit Your API Keys

#### Step 1: Click the App Secrets Icon

To open the panel containing all the app keys for your app, click the App Secrets icon at the top of your screen.

<figure><img src="/files/xChcL4hqeTGpZQ1Z6x2r" alt=""><figcaption></figcaption></figure>

#### Step 2: Modify the Keys in the Panel

<figure><img src="/files/Vm4puy0Wiwu3R5uYm2Ef" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Access to this feature is available on Desktop.
{% endhint %}


# User Sign-up, Login, and Authentication via Firebase API

Thunkable AI can generate apps with full user authentication using the Firebase Authentication REST API. This includes sign-up, login, and session handling out of the box.

### **What you'll need**

* A Firebase project with Authentication enabled
* Your Firebase API key (found in your Firebase project settings)
* Email/password sign-in enabled in your Firebase Authentication settings

***

### Video Example

{% embed url="<https://youtu.be/OFdxD5h_nIE>" %}

### Sample Prompts

Copy any of the prompts below and paste it into the AI chat to add that feature to your app. It is recommended to start with Sign Up first.

#### Sign Up&#x20;

```
I want to use Firebase Auth API to handle account creation and login. 
This is the sample code from their API: curl 'https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=[API_KEY]' \ -H 'Content-Type: application/json' \ --data-binary '{"email":"[user@example.com]","password":"[PASSWORD]","returnSecureToken":true}'
```

#### Sign In

```
Use Firebase's Auth API to handle user login
This is the sample code from their API: curl 'https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=[API_KEY]'
-H 'Content-Type: application/json'
--data-binary '{"email":"[user@example.com]","password":"[PASSWORD]","returnSecureToken":true}'
```

#### Reset Password

```
Add a "forget password" that makes an api call. 
Here is the sample code: curl 'https://identitytoolkit.googleapis.com/v1/accounts:sendOobCode?key=[API_KEY]' \ -H 'Content-Type: application/json' \ --data-binary '{"requestType":"PASSWORD_RESET","email":"[user@example.com]"}'
```

#### Send Email Verification

```
When users create an account, send an email verification through an api call. 
The sample code is this: curl 'https://identitytoolkit.googleapis.com/v1/accounts:sendOobCode?key=[API_KEY]' \ -H 'Content-Type: application/json' \ --data-binary '{"requestType":"VERIFY_EMAIL","idToken":"[FIREBASE_ID_TOKEN]"}'
```

#### Confirm Email Verification

```
When trying to login, check to make sure that the email is verified before letting them login. 
Sample code here: curl 'https://identitytoolkit.googleapis.com/v1/accounts:update?key=[API_KEY]' \ -H 'Content-Type: application/json' --data-binary '{"oobCode":"[VERIFICATION_CODE]"}'
```


# Cloud Database

Thunkable AI can generate apps that connect to an external cloud database through a REST API. This guide uses Baserow as an example, but the same approach applies to any API-based database or backend

### **What you'll need**

* A cloud database with a REST API
* An API key or access token from your database provider
* Your API's base URL and endpoint structure<br>

***

### Video Guide

{% embed url="<https://www.youtube.com/watch?v=_FwCDqcmMUo>" %}

***

### Sample Prompt

Use the sample prompt below as a starting point, swapping in your own database name, record types, and API details. The more specific you are about what data you want to display and what actions users should be able to take, the better your generated app will be.

```
Build an app that connects to my [database name] via API. 
It should display a list of [records] on the home screen, allow users to [create/update/delete] entries, and sync changes in real time. 
Use [your API base URL] as the endpoint. 
Here is the sample code:
[sample request from the API doc here]
```


# Google Maps

**Generate a Google Maps API Key**

To generate your personal Google Maps API key, you need to:

1. Create a Google Cloud project for your app.
2. Create a billing account or enable billing for the project.
3. Click **Enable** to enable the Maps SDK for Android or Maps SDK for iOS.
4. Select **Enable all Google Maps APIs for this project**.&#x20;

<div align="left"><figure><img src="/files/RlSI5dFS09OJlw4obqdx" alt="" width="300"><figcaption></figcaption></figure></div>

5. Copy the provided API key.

If you close this pop-up message without copying your API key:

1. Navigate to **APIs & Services**.
2. Select **Credentials** from the left side menu.
3. Click **SHOW KEY**.

   <div align="left"><img src="https://docs.thunkable.com/~gitbook/image?url=https%3A%2F%2F1223006790-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-LAn5scXl2uqUJUOqkJo-84897653%252Fuploads%252FkAOsoKtT4W7haiMqz3M4%252FGoogle%2520Maps%2520API%2520show%2520key%25202.png%3Falt%3Dmedia%26token%3D77201280-d4f6-463b-83c1-57c9602d680f&#x26;width=768&#x26;dpr=3&#x26;quality=100&#x26;sign=4723469&#x26;sv=2" alt=""></div>

For more detailed instructions, please see here: [Google Maps Platform: Set up your Google Cloud project](https://developers.google.com/maps/documentation/android-sdk/cloud-setup).


# In-App Purchases with RevenueCat

### Overview <a href="#overview" id="overview"></a>

In-app purchases (IAP) refer to the ability to offer additional content or features within a mobile app for users to buy using real money. This provides a monetization strategy for app developers, allowing them to generate revenue from their apps. It's a way to offer users the option to enhance their app experience by purchasing extra items or features, such as digital goods, subscriptions, and premium content.

### **RevenueCat Account Setup** <a href="#id-1.-revenuecat-account-setup" id="id-1.-revenuecat-account-setup"></a>

#### What is RevenueCat? <a href="#what-is-revenuecat" id="what-is-revenuecat"></a>

[RevenueCat](https://www.revenuecat.com/?utm_medium=referral\&utm_source=techp\&utm_campaign=thunkable\&utm_content=partner) is a platform that is used to manage in-app subscriptions and purchases. It provides tools and services to handle subscription billing, manage user entitlements, and analyze revenue data. This platform simplifies implementing and managing in-app purchases and subscriptions, making it easier for you to monetize your apps effectively.

RevenueCat allows you to start for free with everything you need to build, maintain, and grow your subscription app. Once you surpass their defined earning threshold ($2,500 USD at the time of publishing), you will be required to pay. More information is available here: [RevenueCat Pricing](https://www.revenuecat.com/pricing/?utm_medium=referral\&utm_source=techp\&utm_campaign=thunkable\&utm_content=partner).

#### RevenueCat Setup <a href="#revenuecat-setup" id="revenuecat-setup"></a>

1. Create a [RevenueCat Account](https://app.revenuecat.com/login?utm_medium=referral\&utm_source=techp\&utm_campaign=thunkable\&utm_content=partner). Additional instructions are available here: [Revenue Cat SDK Quickstart](https://www.revenuecat.com/docs/getting-started/?utm_medium=referral\&utm_source=techp\&utm_campaign=thunkable\&utm_content=partner).
2. Configure your RevenueCat project and apps. Instructions are available here: [Revenue Cat SDK Quickstart](https://www.revenuecat.com/docs/getting-started/?utm_medium=referral\&utm_source=techp\&utm_campaign=thunkable\&utm_content=partner).

### 2. Connect Thunkable and RevenueCat <a href="#id-2.-connect-thunkable-and-revenuecat" id="id-2.-connect-thunkable-and-revenuecat"></a>

Connecting your Thunkable and RevenueCat accounts requires copying and pasting API keys between the two accounts. We recommend having two tabs open concurrently, one signed in to RevenueCat and the other to Thunkable with your project open.

To connect your Thunkable and RevenueCat accounts:

1. Navigate to your RevenueCat tab.
2. Click **Projects** in the header.

   ![](https://docs.thunkable.com/~gitbook/image?url=https%3A%2F%2F1223006790-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-LAn5scXl2uqUJUOqkJo-84897653%252Fuploads%252Fw5fpyylBrjYlz9yvVdSG%252FRevenueCat%2520-%2520API%2520Keys.png%3Falt%3Dmedia%26token%3D5f1fe772-9479-483a-8a4d-05edaf2db038\&width=768\&dpr=3\&quality=100\&sign=b8df50d9\&sv=2)
3. Select your project from the dropdown.
4. Click **API Keys** in the sidebar menu.
5. Your project's public API keys are created automatically and appear under the heading Public app-specific API keys.
6. Click **Show key** associated with your Android/iOS app.
7. Copy the provided Android/iOS key.


# Ads by AdMob

{% hint style="warning" %}
This feature may only be available for Creators on certain Thunkable plans. Please refer to our pricing page for more information: [Thunkable pricing](https://thunkable.com/pricing).
{% endhint %}

### 1. AdMob Overview <a href="#id-1.-admob-overview" id="id-1.-admob-overview"></a>

<div align="left"><img src="https://docs.thunkable.com/~gitbook/image?url=https%3A%2F%2F1223006790-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LAn5scXl2uqUJUOqkJo%252F-L_PGIzpCViBLwDvRa6d%252F-L_PGLWD3b_7aMuz41t1%252FWebp.net-resizeimage.png%3Falt%3Dmedia%26token%3D2260d8a1-9dfa-4ca6-985b-8ce0fc79f467&#x26;width=768&#x26;dpr=3&#x26;quality=100&#x26;sign=eefe0cac&#x26;sv=2" alt="" height="100" width="100"></div>

AdMob is the most popular ad network for monetizing mobile apps today.

Apps with large audiences can use AdMob to not only generate revenue for the creator, but in some cases, create better user experiences.&#x20;

We **highly recommend** that you only add ads to your app after it has been completed and you have a good idea of how users will move through your app. Once your app is complete, you can go back in find natural points to add the different types of ads for your users.

### 2. Setup Your AdMob Account <a href="#id-2.-setup-your-admob-account" id="id-2.-setup-your-admob-account"></a>

You need an [AdMob account](https://admob.google.com/home/get-started/) to show ads in your project.

Once you have created an app on AdMob platform, you will also need individual [Ad Unit IDs](https://support.google.com/admob/answer/7356431?hl=en) for each AdMob component in your project. To add an Ad Unit ID:

1. Click on the Apps tab in your AdMob Sidebar
2. Click View All Apps
3. Click the name of the app associated with the ad unit.
4. Click on the Add Ad Unit button
5. Select the type of ad you wish to add (Note: Thunkable only currently supports Banner, Interstitial, or Rewarded Ads).
6. Add a name for your Ad Unit (e.g. "Banner Ad")
7. Click the Create Ad Unit button.&#x20;
8. In the Implementation instructions window, click the **ad unit ID** in the second step.

   ![](https://docs.thunkable.com/~gitbook/image?url=https%3A%2F%2F1223006790-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-LAn5scXl2uqUJUOqkJo-84897653%252Fuploads%252Fv13dATHynmx2UqHnxrqB%252FAd%2520Mob%2520-%2520Implementation%2520instructions.png%3Falt%3Dmedia%26token%3D8ce61761-2239-48c0-aa5e-2264a896bfad\&width=768\&dpr=3\&quality=100\&sign=8d9861c1\&sv=2)

#### 3. Join Thunkable's MCM Network <a href="#id-3.-join-thunkables-mcm-network" id="id-3.-join-thunkables-mcm-network"></a>

To download and publish Thunkable apps that contain ads, you must first be a member of Thunkable's MCM (Multiple Customer Management) network.

An invitation to this network will be sent to you the first time you submit your app for review. If you do not change AdMob accounts, this only needs to be done once, when you [submit your first app for review](https://docs.google.com/forms/d/e/1FAIpQLSf3DSZ_Uon406Demqt_pxJb1fiQRc6IT49CYf19bJr8VG40SQ/viewform?pli=1).

By joining this network, you consent to sharing 10% of your AdMob revenue for all apps you have currently on AdMob with Thunkable to support maintenance costs.

#### 4. Submit Your App For Review <a href="#id-4.-submit-your-app-for-review" id="id-4.-submit-your-app-for-review"></a>

Thunkable has partnered with AdMob to ensure that apps created on our cross-platform use ads to monetize apps in a way that both provides high quality traffic to advertisers and a high quality user experience for end users of apps.

All apps with AdMob must be first approved by Thunkable before they can be downloaded or published. AdMob has its [own policies](https://support.google.com/admob/answer/7313578) that an app must comply with, including but not limited to:

* Inappropriate content that advertisers do not want to be associated with e.g. copyrighted, adult
* Invalid activity that lowers the quality of traffic to advertisers e.g. ad placements that encourage clicks

Thunkable will review apps for compliance with AdMob policies but will specifically **reject apps** that are:

* Incomplete apps - apps that are still in their early stages and won't show how ads will be used in the app
* Earning apps - apps that encourage users to click ads in exchange for some form of payment
* Auto-impression apps - apps that repeatedly load banner ads in the background of apps
* Apps that show an Interstitial ad or Video ad on startup - these ads must be implemented properly in your app

**Thunkable reserves the right to change an app's approval status subject to any violation of our guidelines.**

If your app is rejected, the Thunkable AdMob team will send an email to the address used in your submission and you will be provided with an explanation and a recommendation for changes to make to get your app approved upon re-submission.

You are welcome to submit the same app for approval multiple times.


# Push Notifications with OneSignal

### Overview <a href="#overview" id="overview"></a>

Push notifications are one of the biggest advantages of mobile apps over mobile websites since they can send messages to users without the app being open.

When a user first opens an app with push notifications enabled they receive an alert prompting them to enable push notifications. Once they accept they are a subscriber of your app's push notifications.

### Thunkable + OneSignal <a href="#thunkable--onesignal" id="thunkable--onesignal"></a>

Thunkable utilizes the services of [OneSignal](https://onesignal.com/) to facilitate push notifications from your app. OneSignal is a free service that supports unlimited devices and notifications. You can learn more about their features here: [OneSignal pricing page](https://onesignal.com/pricing).

To send push notifications to your app's users, you must link your Thunkable app to your OneSignal apps (iOS and/or Android). Once you've added your OneSignal App IDs into Thunkable, the work in Thunkable is done, and the remainder of the management takes place in third-party platforms (OneSignal, Apple Developer, and Firebase, depending on the platform).

### Push Notification Best Practices <a href="#push-notification-best-practices" id="push-notification-best-practices"></a>

Notifications that are irrelevant and too frequent are often dismissed or blocked. We highly recommend sending notifications only when the content is relevant to the user. Examples include an e-commerce app letting the user know about a sale, or a game app letting the user know about a new level or feature.

### Create a OneSignal Account <a href="#create-a-onesignal-account" id="create-a-onesignal-account"></a>

1. Go to [**OneSignal**](https://onesignal.com/).
2. Click **Sign Up**.
3. Create your account and complete the OneSignal onboarding.

### Create a OneSignal App <a href="#create-a-onesignal-app" id="create-a-onesignal-app"></a>

1. If you didn't create an app as part of the OneSignal onboarding, navigate to your OneSignal dashboard and click **+ New App/Website**.
2. Enter your **app name**. We recommend including the platform in your app name, for example, Employee Directory - Android or Employee Directory - iOS.
3. Select **Apple iOS (APNs)** or **Google Android (FCM)**.
4. Click **Next: Configure Your Platform**.
5. Follow the platform-specific configuration instructions below.
   1. Android Configuration
   2. iOS Configuration

### Android Configuration <a href="#android-configuration" id="android-configuration"></a>

A Google Service Account is a special type of account from Google that applications use to make authorized calls to a variety of APIs, including Firebase Cloud Messaging APIs. For more details, see Google's own [documentation on Service Accounts](https://cloud.google.com/iam/docs/service-account-overview). In order to send push notifications to Android devices, you will need a Service Account to generate a private key for OneSignal to utilize.

1. If you don't already have one, create a [**Firebase**](https://firebase.google.com/) account. Instructions for getting started with Firebase are available here: [Firebase Account Setup](https://docs.thunkable.com/sign-in#getting-started).
2. Follow OneSignal's instructions to generate Firebase Cloud Messaging API Credentials for sending Android App Notifications here: [Android: Firebase Credentials](https://documentation.onesignal.com/docs/generate-a-google-server-api-key).

   To continue sending messages in 2024, you need to provide updated authentication credentials from Firebase for all apps created in OneSignal before September 1, 2023:

   1. In your Firebase project, go to **Project settings** and the ***Service accounts*** tab to download your private key JSON.
   2. In your OneSignal App Settings, upload the private key file you just downloaded

   More information on these steps is available here: [Android: Firebase Credentials](https://documentation.onesignal.com/docs/generate-a-google-server-api-key).
3. Select **Native Android** as your target SDK.
4. Click **Save & Continue**
5. Copy **Your App ID**.

#### Android Testing <a href="#android-testing" id="android-testing"></a>

To test Android push notifications, download the app to your Android device and send a test message through OneSignal to see the push notification in action.

### iOS Configuration <a href="#ios-configuration" id="ios-configuration"></a>

#### Generate a p8 Certificate <a href="#generate-a-p8-certificate" id="generate-a-p8-certificate"></a>

1. Follow OneSignal's instructions to generate a p8 certificate: [iOS: p8 Token-Based Connection to APNs](https://documentation.onesignal.com/docs/establishing-an-apns-authentication-key).
2. When you get to the section titled "Provisioning Profiles," return to these instructions.

#### Add Push Notifications to the App Identifier <a href="#add-push-notifications-to-the-app-identifier" id="add-push-notifications-to-the-app-identifier"></a>

1. In your Apple Developer account, select **Identifiers** under the Certificates, IDs & Profiles heading.
2. Select your app from the list of Identifiers.
3. Scroll down the list of app capabilities, and place a checkmark next to **Push Notifications**.
4. Click **Save**.
5. Select your app from the list of Identifiers again.
6. Scroll down the list of app capabilities, until you get to **Push Notifications** again.
7. Click the associated **Configure** button.
8. Under Production SSL Certificate, click **Create Certificate**.
9. Under Upload a Certificate Signing Request, click **Choose File**.
10. Select the **Certificate Signing Request (CSR)** you downloaded from Thunkable as part of the publishing process.
11. Click **Continue**.
12. Click **Download** to download your iOS certificate.

#### Download your Provisioning Profile <a href="#download-your-provisioning-profile" id="download-your-provisioning-profile"></a>

1. Access your Apple Developer account’s [Profiles](https://developer.apple.com/account/resources/profiles/list).
2. Select your app from the list of Profiles.
3. Click **Edit**.
4. Click **Save**.
5. Click **Download**.

#### OneSignal <a href="#onesignal" id="onesignal"></a>

1. In OneSignal, select **Native iOS** as your target SDK.
2. Click **Save & Continue**.
3. Copy **Your App ID**.

#### Generate a Provisioning Profile <a href="#generate-a-provisioning-profile" id="generate-a-provisioning-profile"></a>

You require a new provisioning profile with push notifications enabled to publish to the App Store. See OneSignal's instructions here: [Generate a Provisioning Profile](https://documentation.onesignal.com/docs/establishing-an-apns-authentication-key#create-your-profile).

#### iOS Testing <a href="#ios-testing" id="ios-testing"></a>

To test iOS push notifications, you have to publish to TestFlight. This requires the provisioning profile with push notifications enabled.


# OpenAI

### Overview <a href="#overview" id="overview"></a>

An artificial intelligence research and deployment company,[ OpenAI](https://openai.com/) focuses on the creation of safe, artificial, general intelligence. Their latest AI model, called ChatGPT, has the ability to interact with a user in a conversational tone.

When prompted, it composes responses relevant to the topic requested. Thunkable creators can utilize this model in their own apps and tap into the power of AI and natural language generation.

{% hint style="info" %}
OpenAI no longer provides Free Trial credits. An OpenAI paid account is required to make API calls. Please see [OpenAI pricing](https://openai.com/pricing#language-models).
{% endhint %}

#### Create an OpenAI account and generate a secret API key <a href="#create-an-openai-account-and-generate-a-secret-api-key" id="create-an-openai-account-and-generate-a-secret-api-key"></a>

To use the OpenAI ChatGPT model in your Thunkable app, you need to generate a personal Open AI API key. To do this:

1. Navigate to <https://openai.com/api/>
2. Click **Sign Up**.
3. On the Overview page, click your avatar to show the menu and select **View API Keys**.
4. Select **Create new secret key**.
5. Copy the secret key that is provided in the pop-up window. You will need to paste this into your Thunkable project.

{% hint style="warning" %}
You will only be able to see your OpenAI API key once. You will not be able to copy it after the initial modal closes.
{% endhint %}


# Versioning

## Overview

Thunkable’s versioning functionality allows you to access versions of your app from a previous prompt 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.

### Prompt-Based Versioning <a href="#auto-versioning" id="auto-versioning"></a>

Never worry about losing your app progress with auto versioning. Thunkable automatically backs up your projects every time you submit a new prompt to edit your app.

To access the most recent versions of your app:

1. From the left navigation menu, click **Versions**.

Each auto version’s description will feature an AI-generated summary of the previous changes.

### Version actions <a href="#version-actions" id="version-actions"></a>

When you click on a previous version you will be able to view the app as it was when that particular prompt was entered, and you will have two options.&#x20;

**Restore**

The Restore Version option reverts your current project to this version.

**Back to latest**

The Back to latest option will not revert your change but instead take you back to the most recent version created.

### Additional considerations <a href="#additional-considerations" id="additional-considerations"></a>

* If you downgrade your subscription plan, you will lose your oldest versions up to your new limit.
  * For each prompt that is submitted, a new version is created.
    * A version includes the date as well as an AI summary of what your prompt changed
  * Free plan: Users can restore only the last 3 versions (latest, latest – 1, latest - 2)
  * Other paid plans: Users can restore any version (no version limit)


# Integrations

### Overview

Integrations allow you to add native device capabilities to your app without writing custom code. Using the **Integrations** panel, you can quickly enable features such as Camera, Video Recording, Video Playback, Audio Recording, and more.

When you add an integration, Thunkable AI guides you through a short setup flow to understand how the feature should behave in your app. Based on your answers, the AI automatically configures the integration and generates the necessary functionality.

### Steps to Add an Integration

#### Step 1: Open the Integrations Panel

From the left navigation menu, click **Integrations**.

The Integrations page displays a list of available native features that can be added to your project.

#### Step 2: Select an Integration

Find the feature you want to add and click **Add to App**.

#### Step 3: Describe How the Integration Should Work

The AI will ask a series of questions to understand your intended user experience.

Choose the options that best match your use case.

Depending on the integration, additional settings may be available.

#### Step 4: Submit the Configuration

After completing the setup questions, click **Submit**.

The AI will generate and configure the integration based on your selections.

### Using "Decide for Me"

If you're unsure which option to choose, click **Decide for me**.

The AI will recommend sensible defaults based on your app's intended use case and best practices.

This option is available throughout the integration setup process.


# Images

How Images Work In Ai-generated Apps

To help you create higher-quality apps right from the start, we’ve added support for images in AI-generated projects. This means your apps include visuals automatically when they’re created, and you can easily update or replace those images at any time.

### Creating a Project with Images

#### New Projects

When you [create a new project](/ai/getting-started/quickstart#id-1-project-generation-prompt), the AI automatically adds images to your app.

* If you want images included, simply mention this in your prompt.
* Be as specific as possible about the type of images you want (for example, illustrations, photos, backgrounds, or icons).

#### Existing Projects

To add images to an existing project:

* Write a clear prompt explaining exactly what images you want the AI to add.
* The AI will generate and place the images based on your instructions.

### Updating images

To update an existing image:

1. Click on the image in your project.
2. A pop-up will appear.
3. Choose a new image from Unsplash or upload your own image.

As always, you can also [ask the AI to update images](/ai/getting-started/quickstart#id-2-builder-screen-components) for you or [make changes directly in the code](/ai/getting-started/quickstart#editing-code).

### Image Size Limits

* **Maximum size per image:** 5 MB
* **Total app assets size:** 50 MB

If you exceed the total asset size limit:

1. Open the **Project Assets** tab in the pop-up.
2. Hover over an image.
3. Click the delete icon to remove it.

### Other types of images

Some images, such as icons used in navigators, buttons, or other UI elements, are handled differently.

* To update these images, ask the AI to make the change for you **or** [edit the code directly](/ai/getting-started/quickstart#editing-code).

**App Icon**

You can set your app’s icon when you [publish your app to Android or iOS](/ai/publishing/publishing-overview) by clicking on the Upload icon button:

<div align="left"><figure><img src="/files/oqlZcFfkeycLdVyXYfGa" alt="" width="563"><figcaption></figcaption></figure></div>

<figure><img src="https://docs.thunkable.com/~gitbook/image?url=https%3A%2F%2F1223006790-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-LAn5scXl2uqUJUOqkJo-84897653%252Fuploads%252FgYoZav1W78dzrp8ns410%252FPublish%2520ios.png%3Falt%3Dmedia%26token%3D9a9341a9-f367-4f89-91f5-90c70d3f4667&#x26;width=768&#x26;dpr=3&#x26;quality=100&#x26;sign=5e497f77&#x26;sv=2" alt=""><figcaption></figcaption></figure>


# Color Schema

Color Schemas allow you to quickly apply a coordinated color palette to your project. Selecting a schema updates the primary colors used throughout your app interface, helping you maintain a consistent visual style without manually configuring individual components.

#### How to Apply a Color Schema

1. Open your project in **Thunkable AI**.
2. Click on **Theme**.
3. Browse the available palettes.
4. Click on a palette to apply it to your project.

The change is applied immediately and can be previewed in the **Preview** panel.

**Tip:** Hover over a theme to temporarily preview how it will look in your app before applying it. This lets you compare different color palettes without making permanent changes.

The currently applied theme is highlighted with an **Applied** label.

#### Available Schemas

Each schema provides a curated set of colors designed for different visual styles:

* **Base** – A neutral palette suitable for most applications.
* **Ocean Blue** – Cool blues for a calm, modern interface.
* **Forest** – Greens inspired by natural tones.
* **Sunset** – Warm oranges and browns for vibrant designs.
* **Earthy Tones** – Soft natural colors with a grounded feel.
* **Coral Sunset** – Coral and teal accents paired with dark neutrals.
* **Electric Magenta** – High-contrast magenta and deep purple for bold designs.
* **Monochrome** – Minimalist black, white, and grey palette.

### Customize Theme

Selecting **Customize This Theme** opens the Theme Editor, where you can fine-tune every color in your app.

#### Generate a Theme from Your Brand

If you already have a brand color, enter or select it in the **Brand Color** field and click **Generate Theme**.

Thunkable AI will automatically generate a cohesive color palette based on your brand color while maintaining visual harmony across your application.

***

### Editing Individual Colors

Select any color role (such as **Primary**, **Accent**, or **Background**) to edit it.

The section displays the colors currently used by your app, including:

* **Primary** – The main brand color used for buttons, headers, and key UI elements.
* **Accent** – A secondary color used for highlights and interactive elements.
* **Background** – The primary background color of the app.
* **Surface** – The background color used for cards, dialogs, and other elevated surfaces.
* **Text** – The primary text color.
* **Text 2** – A secondary text color used for supporting content.

Click on each color you would like to edit individually.

The editor provides:

* A visual color picker.
* A hue slider.
* Quick shade suggestions.
* Manual HEX color input.

Once you're satisfied with your changes, click **Apply** to save them or **Reset** to discard your current edits.

***

### Accessibility Indicators

Each color displays an accessibility rating to help you create readable interfaces.

* **AA** indicates the color combination meets recommended accessibility contrast guidelines.
* Lower contrast ratios (such as **2.6:1**) indicate that the color may not provide sufficient readability and should be adjusted for better accessibility.

***

### Undo Changes

If you recently applied a different theme or color, click **Undo** at the top of the Theme panel to revert your most recent change.

***

### Restore from History

At the bottom of the Theme panel, click **Restore from history** to open the **Versions** tab.

From there, you can browse previous versions of your project and restore an earlier version if you want to revert theme changes or recover a previous state of your app.

#### Notes

* Applying a new schema updates the project's theme colors but does not change existing custom styles you have manually applied to components.
* You can switch schemas at any time to experiment with different looks.


# Assets

### Overview <a href="#overview" id="overview"></a>

Assets refer to multimedia files or resources integral to an app's design and functionality, such as images, audio files, videos, and fonts.

### Managing Assets <a href="#managing-assets" id="managing-assets"></a>

#### Assets Panel <a href="#assets-panel" id="assets-panel"></a>

Use the Assets panel to upload, rename, and manage all assets in your project.

To access your project's Assets panel:

1. Click **Assets** in the Chat Toolbar.

In the Assets panel, you can view:

* The total asset size for your project
* The size of each asset
* Whether an asset is stored in your project or hosted externally
* Whether an asset is currently being used

<div align="left"><figure><img src="/files/MOtKJnoDd79ySks5IA8J" alt="" width="344"><figcaption></figcaption></figure> <figure><img src="/files/hIcBCzJhM0a1ZTOwko3i" alt="" width="297"><figcaption></figcaption></figure></div>

#### Import Assets <a href="#import-assets" id="import-assets"></a>

**Upload a File**

To upload a file to your Thunkable project assets:

1. Click Assets in the Chat Toolbar.
2. Click **Drop files here or click to upload** to select a file from your computer, or drag the files into the provided drop window.&#x20;

**Import an Image, Audio File, or Video from a URL**

To import an **Image, Audio, or Video from a URL** into your Thunkable project:

1. Click Assets in the Chat Toolbar.
2. Click **+ Add image, + Add audio, or + Add video**.
3. Paste the URL and optionally set the Display name and the Description. The URLs must end in a file extension.&#x20;

<div align="left"><figure><img src="/files/mGNI1eV3EVJnQKvk7kMD" alt=""><figcaption></figcaption></figure></div>

4. Click **Import from URL**.

{% hint style="info" %}
In this dialog, you can also upload a file instead of importing it from a URL.
{% endhint %}

#### Edit Assets <a href="#delete-assets" id="delete-assets"></a>

To edit an **Image, Audio, or Video**:

1. Click **Assets** in the Chat Toolbar.
2. Click the **ellipsis** (**...**) next to the asset.

<div align="left"><figure><img src="/files/mz3HLhM370ihYCSXWihT" alt=""><figcaption></figcaption></figure></div>

3. Click Edit.

<div align="left"><figure><img src="/files/eEu0qpAw7ub7YcVN5UeW" alt=""><figcaption></figcaption></figure></div>

4. Update the Display name and/or Description.

<div align="left"><figure><img src="/files/1Gxe70mSg2CRPP9Xi0Db" alt=""><figcaption></figcaption></figure></div>

5. Click **Save**.

#### Change Source file <a href="#delete-assets" id="delete-assets"></a>

To change an **Image, Audio, or Video**:

1. Click **Assets** in the Chat Toolbar.
2. Click the **ellipsis** (**...**) next to the asset.
3. Click **Change source**.
4. Either:
   * Paste a URL, and then click **Save Changes**, or
   * Upload a new file.

For images, you can also select an **Unsplash Stock Photo** and then click **Replace Image**.

<figure><img src="/files/YgyCb2TgGcJq3JuQbebs" alt=""><figcaption></figcaption></figure>

#### Save a File to Your Project <a href="#delete-assets" id="delete-assets"></a>

To save an asset that was imported from a URL into your project:

1. Click **Assets** in the Chat Toolbar.
2. Click the **ellipsis** (**...**) next to the asset.
3. Click **Save to project**.

<div align="left"><figure><img src="/files/2vHWtThOhZZhmvt6YrV4" alt=""><figcaption></figcaption></figure></div>

#### Delete Assets <a href="#delete-assets" id="delete-assets"></a>

To delete an asset from your Thunkable project:

1. Click **Assets** in the Chat Toolbar.
2. Click the **ellipsis** (**...**) next to the asset.
3. Click **Delete**.

### Account Storage Limits <a href="#account-storage-limits" id="account-storage-limits"></a>

Each plan has a limited account storage capacity.

| Free  | Accelerator | Builder | Advanced  |
| ----- | ----------- | ------- | --------- |
| 100MB | 250MB       | 1GB     | Unlimited |

You can view your total account storage size in your account settings.

### App Limits <a href="#app-limits" id="app-limits"></a>

Each plan has a limited project storage capacity.

| Free | Accelerator | Builder | Advanced |
| ---- | ----------- | ------- | -------- |
| 50MB | 100MB       | 100MB   | 200MB    |

### Mention Assets in Chat

You can reference existing project assets directly in the chat when prompting the AI.

To mention an asset:

1. In the chat input, type **@**.
2. Select **Images**, **Audio**, or **Video** from the dropdown.
3. Choose the asset you want to reference.

Once selected, the asset is inserted into your message as a tag rather than plain text, making it easy to identify and ensuring the AI references the correct asset.

{% hint style="info" %}
Only assets that already exist in your project are available from the **@** menu.
{% endhint %}

#### How to Store and Access Files in Cloudinary <a href="#how-to-store-and-access-cloudinary-files-in-your-thunkable-app" id="how-to-store-and-access-cloudinary-files-in-your-thunkable-app"></a>

To store and access Cloudinary Files:

1. Create a free Cloudinary account here: [cloudinary.com](https://cloudinary.com/).
2. Click on the **Upload** button to open the [upload Widget](https://cloudinary.com/documentation/upload_widget).
3. Upload your files. There is also an option to upload assets from Google Drive into Cloudinary.
4. Click on the uploaded file.
5. Click **Share.**
6. Click **Embed.**
7. Copy the URL.


# iOS Downloading

### Overview <a href="#overview" id="overview"></a>

Downloading your app to an iOS device requires an Apple Developer account. The process involves actions in your Thunkable project and your Apple Developer account. We recommend having each open in a separate browser tab so you can easily navigate between them.

{% hint style="info" %}
Please note that while the images and instructions from the Apple Developer account are accurate at the time of this doc’s publishing, they may change slightly over time.
{% endhint %}

### Register Your App with Apple <a href="#register-your-app-with-apple" id="register-your-app-with-apple"></a>

To register an App ID:

1. Open your [Apple Developer account page](https://developer.apple.com/account).
2. Under the **Certificates, IDs & Profiles** heading, select **Identifiers**.
3. Click the blue **+** icon to add a new identifier to your account.
4. Choose **App IDs** from the list of options.
5. Click **Continue**.
6. Select **App**.
7. Click **Continue**.
8. On the **Register an App ID** screen, complete or take note of the following fields:
   1. **Description** - This is the name you want to give your app. It appears next to the app icon when downloaded on a user's device. It must be unique to the App Store and cannot use special characters such as @, &, \*, "
   2. **Bundle ID** - This is also unique to your app, but not visible to your app users. Apple recommends reversing your domain name to create your bundle ID, i.e. *com.yourDomainName.yourAppName* to avoid conflicts with other apps.

      Uploading apps to the App Store requires an Explicit Bundle ID. Wildcard bundle IDs are no longer accepted.
   3. **App ID Prefix (Team ID)** - Record your App ID Prefix or Team ID. This automatically created, unique identifier is linked to your Apple Developer Program membership. The same ID can be used for every app you publish.

      ![](https://docs.thunkable.com/~gitbook/image?url=https%3A%2F%2F1223006790-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-LAn5scXl2uqUJUOqkJo-84897653%252Fuploads%252FlvpJj0Q9b2Qa3HgfbCod%252Fpublish_register_app_id.png%3Falt%3Dmedia%26token%3Dddabf6a8-b711-4501-a3fc-e68196705ff8\&width=768\&dpr=4\&quality=100\&sign=5590e1e3\&sv=2)
9. Click **Continue**.
10. Confirm that the details are correct.
11. Click **Register**.
12. The new App ID you created is included in your list of Identifiers. Click the app's name to review its Description, App ID Prefix (Team ID), or Bundle ID.

#### Start the Downloading Process in Thunkable <a href="#start-the-publishing-process-in-thunkable" id="start-the-publishing-process-in-thunkable"></a>

To begin the process:

1. Open your Thunkable project.&#x20;
2. Click the **Download** icon.
3. Select **Download iOS** from the drop-down menu.
4. Click the **Get Started** button.
5. Select **iOS Provisioning Method:** Manual Provisioning or Automated Provisioning
6. Click the **Next** button.

#### &#x20;<a href="#start-the-publishing-process-in-thunkable" id="start-the-publishing-process-in-thunkable"></a>

### Automated Provisioning: <a href="#start-the-publishing-process-in-thunkable" id="start-the-publishing-process-in-thunkable"></a>

To use automated provisioning, you must first configure your App Store Connect API credentials. Configure it by following the steps here: <https://ai.thunkable.com/account/appstore>

**Register app**

1. Input your **App Name**, **Team ID**, and **Bundle ID** from when you completed these steps: [Register Your App with Apple](https://docs.thunkable.com/publishing/publish-to-app-store-ios/user-guide#register-your-app-with-apple).

![](/files/V2dVx9IVWYtb8W3cEe80)

2. Click **Next**.

#### Register Devices <a href="#register-devices" id="register-devices"></a>

You must specify registered devices in your Apple Developer account to create a provisioning profile for app testing and ad hoc distribution. This process is necessary because iOS devices have security mechanisms in place to ensure that only authorized apps are installed and run on them.

{% hint style="warning" %}
Removing a registered device from your account will continue to count against your device limit. At the start of your new membership year, Account Holders and Admins can remove listed devices and restore the available device count.
{% endhint %}

#### Register a Single Device <a href="#register-a-single-device" id="register-a-single-device"></a>

To register a single device to your Apple Developer account:

1. Open your[ Apple Developer account page](https://developer.apple.com/account).
2. Under the **Certificates, IDs & Profiles** heading, select **Devices**.
3. Click the blue **+** icon to add a new device to your account.
4. Ensure the **iOS platform** is selected.
5. Give your device a **name**.
6. Provide the device’s **UDID**. See here for instructions for locating your device's UDID: [Locating Your Device’s UDID](https://docs.thunkable.com/settings/manage-your-projects/download/iosdownload#locating-your-devices-udid).
7. Click **Continue**.

#### Register Multiple Devices <a href="#register-multiple-devices" id="register-multiple-devices"></a>

To register multiple devices to your Apple Developer account:

1. Open your[ Apple Developer account page](https://developer.apple.com/account).
2. Under the **Certificates, IDs & Profiles** heading, select **Devices**.
3. Click the blue **+** icon to add a new device to your account.
4. Under **Register Multiple Devices**, click **Download sample files**.
5. Create your file containing the devices you wish to register. A maximum of 100 devices can be included in your file, and it may take a few minutes to process.
6. Click **Choose File**.
7. From your computer, select the file you created in step five above.
8. Click **Open**.
9. Click **Continue**.

#### Register Test Devices&#xD; <a href="#locating-your-devices-udid" id="locating-your-devices-udid"></a>

Click the  **+ Add Device** button to add a new device to your account or the **Sync from Apple** button: ![](/files/6d6uREbCqRGx8C8IyzCL)

#### Locating Your Device’s UDID <a href="#locating-your-devices-udid" id="locating-your-devices-udid"></a>

Every iPhone, iPod touch and iPad has a unique identifier number associated with it, known as a UDID (Unique Device ID). This is either a 40-character alphanumeric ID on older devices or a 24-character ID (excluding hyphen) on newer devices, consisting of eight digits, a hyphen, and 16 alphanumeric characters.

Please see here for instructions on locating your device’s UDID: [bjango: Finding your iPhone, iPod touch or iPad unique ID (UDID)](https://bjango.com/help/iphoneudid/).

**App Info**

* **Version Number:** The version number is visible to your users when they download a new version of your app. See here for additional information: Set a Version Number.

When the necessary fields are populated, click **Send**.

### **Manual Provisioning:**

1. ​Set Apple ID (Your App Store account's email, it does not need to be the same as your Thunkable account's email)
2. ​Click the **Next** button.

​**Register app**​

1. ​Input your **App Name**, **Team ID**, and **Bundle ID** from when you completed these steps: Register Your App with Apple.
2. Click **Next**.

### Create an iOS Distribution Certificate <a href="#create-an-ios-distribution-certificate" id="create-an-ios-distribution-certificate"></a>

Follow these instructions to create a distribution certificate: [Create an iOS Distribution Certificate](https://docs.thunkable.com/publishing-apps/publish-to-app-store-ios#create-an-ios-distribution-certificate).

### Create an Ad Hoc Provisioning Profile <a href="#create-an-a-d-hoc-provisioning-profile" id="create-an-a-d-hoc-provisioning-profile"></a>

Apple requires a provisioning profile to install an app on a device. You need to create and download an Ad Hoc provisioning profile in your Apple Developer account and then return to Thunkable to upload this file.

1. Open your[ Apple Developer account page](https://developer.apple.com/account).
2. Under the **Certificates, IDs & Profiles** heading, select **Profiles**.
3. Click the blue **+** icon to add a new certificate to your account.
4. Under the **Distribution** heading, select **Ad Hoc**.
5. Click **Continue**.
6. Select the **App ID** for the app you want to publish.
7. Click **Continue**.
8. Select the certificate you wish to include in this provisioning profile.
9. Click **Continue**.
10. Select the device(s) you wish to include in this provisioning profile.
11. Click **Continue**
12. Name your provisioning profile.
13. Click **Generate**.
14. Click **Download** to save the provisioning profile to your computer.
15. Return to Thunkable.
16. Click **Upload Ad Hoc Provisioning Profile**.
17. From your computer, select the .mobileprovision file you just downloaded.
18. Click **Next**.

### Review App Information <a href="#review-app-information" id="review-app-information"></a>

1. Review your app’s information in the modal provided. Detailed instructions are available here: [Publish iOS: App Info](https://docs.thunkable.com/publishing-apps/publish-to-app-store-ios#app-info).
2. Click **Submit**.
3. Congratulations! You will receive an email from Thunkable when your iOS app is available to download. This may take up to an hour.

### Download iOS App <a href="#download-ios-app" id="download-ios-app"></a>

When you receive the email with the download link:

1. Open the email on your iPhone or iPad.
2. Click the **Download App Project** button.
3. Select your preferred browser.
4. Click **Download**.
5. In the pop-up prompt, click **Install**.
6. Open your iOS device's **Settings**.
7. Navigate to **Privacy & Security**.
8. Click **Developer Mode**.
9. Toggle the Developer Mode switch to true.
10. Click **Restart**.
11. Once your device has restarted, click **Turn On** to enable Developer Mode.
12. Enter your device’s **passcode**.
13. Click on your app's icon to test the app.

{% hint style="warning" %}
If there are issues with your app build, you will receive an email outlining what you need to fix.
{% endhint %}

### Troubleshooting <a href="#troubleshooting" id="troubleshooting"></a>

#### App Cannot be Built <a href="#app-cannot-be-built" id="app-cannot-be-built"></a>

If you receive an email saying that your app cannot be built, it may be the result of one of the following:

* Ensure your app icon image:
  * does not have the same name as another project asset
  * is an image file
  * does not contain transparent pixels. Apple does not allow icons with transparent colors.
* Ensure your App (Bundle) ID adheres to the following:
  * It is a series of short strings of text separated by periods (e.g. com.thunkable.creator.app).
  * It is all lowercase.
  * It begins with a letter.
* Ensure your asset names only contain Roman alphabet characters (with no accents) and numbers.
  * Examples of asset names that could cause errors: image(1).jpg, imãge.jpg
  * Examples of asset names that won't cause errors: image1.jpg, image.jpg
* We are having trouble with our build servers. Please try again in 30 minutes.


# Android Downloading

To download your app to an Android device:

1. Click the **Download** icon.
2. Select **Download Android**.

{% hint style="warning" %}
The number of monthly downloads you are allowed varies per [Thunkable plan](https://thunkable.com/pricing). This number resets when your next billing cycle begins
{% endhint %}

3. Enter your email address in the provided field
4. Click **Send**.

You will be sent an email with a link to download your app.

For some [Thunkable plans](https://thunkable.com/pricing), the number of monthly downloads varies per download type.

We offer two types of downloads for Android:

a. Testing downloads (expire after 72 hours)

b. Distribution downloads (these do not expire).

<figure><img src="/files/f5EuRBwiGG99YTyRIPEF" alt=""><figcaption></figcaption></figure>

### Download Android App <a href="#download-android-app" id="download-android-app"></a>

When you receive the email with the download link:

1. Open the email on your Android device.
2. Click the **DOWNLOAD YOUR APK** button.

{% hint style="info" %}
Google Chrome's browser settings may prevent you from downloading the APK file. If you have an issue, open the email in Firefox or Safari and download your APK file.
{% endhint %}

3. Select your preferred browser.
4. Click **Download**.

#### Trust Thunkable <a href="#trust-thunkable" id="trust-thunkable"></a>

To install the app on your Android device, you must indicate that you trust Thunkable. To do that:

1. Open your Android device's **Settings** menu.
2. Navigate to **Lock Screen and Security**.
3. Set the **Unknown Sources** option to true.

<figure><img src="/files/taQUThXfrsDlhchOkgkx" alt=""><figcaption></figcaption></figure>

In addition, you may be alerted that Play Protect has blocked an unsafe app. This is because you are downloading the app outside of the Play Store. If that is the case:

1. Select the APK file you downloaded to your device.
2. Click **Install**.
3. Click **More details**.
4. Click **Install anyway**.
5. Click **Open**.

<figure><img src="/files/7WReIAAnkloq3GTUVGO9" alt=""><figcaption></figcaption></figure>


# Publishing Overview

While app building with Thunkable AI is easy, it's still important that you complete all of the steps below before you can publish your app.

<figure><img src="/files/sn0JTcqt5yOooXKeanvP" alt=""><figcaption></figcaption></figure>

#### Publishing

You've prompted and edited your way to a completed app. Now, you're ready to publish! Since Thunkable allows you to build one app that works both on Android and iOS devices, most Creators who want to distribute their app with larger audiences choose to publish in both the Apple App and Google Play Stores.

#### App Publishing Limits

The amount of active published apps a Creator may have depends on their plan. Please refer to our pricing page for more information: [Thunkable pricing](https://thunkable.com/pricing).&#x20;

Active App Publishing Limits are based on the App (Bundle) ID used in your project.

To view your current active published apps:

1. Click your **account avatar** in the upper right.
2. Navigate to Setting
3. Select **Published Apps**.

<figure><img src="/files/TfvB6SPshYlyut918fYr" alt="" width="145"><figcaption></figcaption></figure>

<figure><img src="/files/SsBOlkPq7V4Jg88DRSXu" alt=""><figcaption></figcaption></figure>

The published Apps page is only available to paid plans (builder and advanced).

From here, you will see how many published apps you have available and be able to select which published app you wish to keep active.

![](https://docs.thunkable.com/~gitbook/image?url=https%3A%2F%2F1223006790-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-LAn5scXl2uqUJUOqkJo-84897653%252Fuploads%252FttkLE9riL80ri4EgIWmZ%252Fpublished_apps_start.png%3Falt%3Dmedia%26token%3D7c839145-7973-48a4-8fd0-dda686699737\&width=768\&dpr=4\&quality=100\&sign=412e4de4\&sv=2)

Depending on which Thunkable [plan](https://thunkable.com/pricing) you have, you will be able to select which apps are active for publishing. Only users on our Builder and Advanced plans will have a limit to their Active Published Apps.

You will receive a reminder each time you publish a new app that you may need to unpublish any active apps beyond the limit of your plan.

![](https://docs.thunkable.com/~gitbook/image?url=https%3A%2F%2F1223006790-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-LAn5scXl2uqUJUOqkJo-84897653%252Fuploads%252Fykzg93w4xoE7teCEDN8H%252Fbundle_id_limit.png%3Falt%3Dmedia%26token%3D06004b6c-e0ea-424c-a074-d74429ba7527\&width=768\&dpr=4\&quality=100\&sign=a98dbcae\&sv=2)

Please note, if you try to select more active apps for publishing than your account allows, you will receive an error:

![](https://docs.thunkable.com/~gitbook/image?url=https%3A%2F%2F1223006790-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-LAn5scXl2uqUJUOqkJo-84897653%252Fuploads%252FSlky15QXMlkjI779xvaj%252Faccount_settings_published_apps_error.png%3Falt%3Dmedia%26token%3D615d2384-2dd6-44d9-a39b-399065eb2385\&width=768\&dpr=4\&quality=100\&sign=c5507a36\&sv=2)

To deactivate an app so that you can activate another one, toggle the switch next to the name of the app. An active app will be toggled to blue, and inactive toggled to grey.

![](https://docs.thunkable.com/~gitbook/image?url=https%3A%2F%2F1223006790-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-LAn5scXl2uqUJUOqkJo-84897653%252Fuploads%252FhJsvyeVuwNHqEsdpYTzy%252Faccount_settings_published_apps.png%3Falt%3Dmedia%26token%3Ddac1652c-a05e-4dc3-a6bc-442e9d8bb316\&width=768\&dpr=4\&quality=100\&sign=f6198e3a\&sv=2)

If you downgrade plans and exceed the available limit of active apps, you must immediately comply with the new thresholds, and any active published apps not activated in your account settings will become inaccessible.

If you have recently downgraded, you will see an error on your published app. Please use the Usage Limits guidelines from our pricing page to ensure the correct app is available to your users if your plan allows for a certain number of active published apps. **It can take up to 24 hours to update your account and remove this warning from your published app**.

![](https://docs.thunkable.com/~gitbook/image?url=https%3A%2F%2F1223006790-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-LAn5scXl2uqUJUOqkJo-84897653%252Fuploads%252FT5cuvvXoDlv57pI7ozHk%252FBrick%2520Screen%2520downgraded.png%3Falt%3Dmedia%26token%3D0ba2b7e5-12e9-4aad-bfa7-22bb8209c8b6\&width=768\&dpr=4\&quality=100\&sign=e05826ae\&sv=2)


# Publishing Checklist

The publishing process requires certain features and assets to complete. Here’s a checklist for both the App Store and Play Store to help you prepare all the creative assets and features needed.

<table><thead><tr><th width="199.33333333333331"></th><th width="274">Publish to App Store (iOS)</th><th>Publish to Play Store (Android)</th></tr></thead><tbody><tr><td>App Name</td><td>An app name can be 30 characters long.</td><td>An app name can be 30 characters long.</td></tr><tr><td>Subtitle (App Store) or<br>Short Description (Play Store)</td><td>Your app’s subtitle is intended to summarize your app in a concise phrase. A subtitle can be up to 30 characters long and appears below your app’s name throughout the App Store.</td><td>The Google Play short description is a sentence that appears in the first impression of your Google Play product page below the screenshot. It can have up to 80 characters.</td></tr><tr><td>Description (App Store) or<br>Long Description (Play Store)</td><td>Provide an engaging description that highlights the features and functionality of your app. The ideal description is a concise, informative paragraph followed by a short list of the main features.</td><td>Provide an engaging description that highlights the features and functionality of your app. The ideal description is a concise, informative paragraph followed by a short list of the main features.</td></tr><tr><td>Privacy Policy URL</td><td>Link to your privacy policy on your website.</td><td>Link to your privacy policy on your website is required for certain apps that require sensitive information e.g. access to phone camera.</td></tr><tr><td>Account Deletion Option</td><td>n/a</td><td>If you allow users to create an account through your app, you must now allow users to request that their account also be deleted - <a href="https://community.thunkable.com/t/new-publishing-requirement-google-play-app-account-deletion/2671776">details here</a> in our community</td></tr><tr><td>App Icon</td><td><p>The app icon appears when a user downloads your app from the App Store. </p><ul><li>Recommended size: 192 x 192 px </li><li>This icon must not have any transparent pixels</li></ul></td><td><p>The app icon appears when a user downloads your app from the Play Store. </p><ul><li>512 x 512 pixels </li><li>Up to 1MB in size</li></ul></td></tr><tr><td>Feature Graphic</td><td>n/a</td><td><p>Feature graphics are images for highlighting Android apps on Google Play. They are not mandatory but are highly recommended since they are required for featured placement on Google Play.</p><ul><li>1024 x 500 pixels </li><li>Up to 1MB in size</li></ul></td></tr><tr><td><p>Screenshots (App Store) or </p><p>Phone Screenshot (Play Store)</p></td><td><p>Use images captured from your app’s UI to communicate your app’s user experience visually.</p><ul><li><a href="https://help.apple.com/app-store-connect/#/devd274dd925">Apple's Screenshot Specification Document</a></li><li><a href="https://docs.thunkable.com/generate-screenshots">Generating screenshots with Thunkable</a></li></ul></td><td><p>Use images captured from your app’s UI to communicate your app’s user experience visually.</p><ul><li><a href="https://support.google.com/googleplay/android-developer/answer/9866151?hl=en#zippy=%2Cscreenshots">Play Console's Screenshot Specification Document</a></li><li><a href="https://docs.thunkable.com/generate-screenshots">Generating screenshots with Thunkable</a></li></ul></td></tr><tr><td><p>*Optional*</p><p>Promotional Text (App Store) or</p><p>Promotional Content (Play Store)</p></td><td>Your app’s promotional text appears at the top of the description and is up to 170 characters long. You can update the promotional text anytime without submitting a new version of your app. Consider using this to share the latest news about your app, such as limited-time sales or upcoming features.</td><td>Promotional content are self-serve merchandising units on Google Play that feature fresh and timely content such as special offers, limited-time events, new content, and major updates.</td></tr></tbody></table>


# Generate Screenshots

By adding app screenshots that showcase your app's features and functionality on its store listing page, you can help your app attract new users on the Apple App Store and Google Play Store. They are a requirement of the publishing process.

To generate app screenshots, the instructions vary depending on whether you are able to create a responsive web app or not.

### Using a responsive web app <a href="#using-a-responsive-web-app" id="using-a-responsive-web-app"></a>

To generate screenshots using a responsive web app:

1. Publish your app as a responsive web app. See instructions here: [Responsive Web App](https://docs.thunkable.com/publishing-apps/publish-as-a-web-app-pro#responsive-web-app)
2. Copy the Web App URL link.
3. Open the link in Google Chrome.

   <div align="left"><figure><img src="/files/k9OjgKnQ42xldWM3YzEH" alt="" width="563"><figcaption></figcaption></figure></div>
4. Click the **vertical ellipsis** in the upper right of your Chrome browser to access Chrome Settings.
5. Click **More Tools**.
6. Click **Developer Tools** to view the app in developer mod&#x65;**.**

   <div align="left"><figure><img src="/files/WKTn6SNMLwZrUKBzCccy" alt="" width="563"><figcaption></figcaption></figure></div>
7. In the top left-hand corner of the developer tools, click the icon that looks like a laptop and a phone.

   <div align="left"><figure><img src="/files/8CUbpPOgBreYByTjbDxo" alt="" width="563"><figcaption></figcaption></figure></div>
8. Use the drop-down menu at the top of the screen to select different devices and screen orientations.

   <div align="left"><figure><img src="/files/WbWbHcdMLPca1B7fxkJj" alt="" width="563"><figcaption></figcaption></figure></div>

   Refresh your screen each time you select a new device to ensure the selection is applied to your responsive web app.
9. If the device you need isn't listed, click **Edit...** at the bottom of the selection list and add additional devices as necessary.
10. Alternatively, if you know the device dimensions, select **Responsive** from the device menu and enter the dimensions manually.
11. To generate the screenshot, click the **vertical ellipsis** to the left of the developer's tools console.
12. Click **Capture screenshot**.

    <div align="left"><figure><img src="/files/EgQFgGYwhcIhZti1uRAP" alt="" width="563"><figcaption></figcaption></figure></div>
13. Repeat for required devices.

We recommend that you create a folder on your computer to save and organize all of the assets you will require for publishing your app.

### Using a mobile web app <a href="#using-a-mobile-web-app" id="using-a-mobile-web-app"></a>

1. Publish your app as a [mobile web app](/ai/publishing/web-publishing#mobile-web-app).
2. Capture a screenshot of your mobile web app. You don't need to worry about the grey border.
3. Use a design tool such as [AppMockUp](https://app-mockup.com/) to create all the required screenshots.

### **Required screenshot sizes for App Store** <a href="#required-screenshot-sizes-for-app-store" id="required-screenshot-sizes-for-app-store"></a>

[Here](https://developer.apple.com/help/app-store-connect/reference/screenshot-specifications) is a list of screenshot sizes you need to publish to the App Store.

To get all of the screenshot sizes you need, create screenshots using the following device settings. Each device name will be followed by its corresponding screen size in the screenshot doc linked above.

iPhone X (5.8 inch screenshots)

iPhone 6/7/8 Plus (5.5 inch screenshots)

iPad Pro (12.9 inch screenshots - suitable for iPad Pro 3rd gen and iPad Pro 2nd gen screenshots described in doc)

5.8 inch screenshots are used as an alternative to 6.5 inch screenshots. There are two ways to upload these iPhone X screenshots to your App Store listing:

**Upload 5.8 inch screenshots in Media Manager**

When you look at your screenshot upload window, you will see the text ‘View All Sizes in Media Manager’. Click here. In the iOS tab, you will see a segment that says ‘6.5-inch display’. At the bottom of this segment you will see the text ‘5.8-inch display’. Next to this, you will see a checkbox with the text ‘Use 6.5-inch Display’. Uncheck this box and expand the ‘5.8-inch Display’ segment. Click on ‘Choose File’, and upload your 5.8-inch screenshots.

**Resize 5.8 inch screenshots to 6.5 inch screenshots**

Use an image editor of your choice to resize your iPhone X screenshots from 1125 x 2436 pixels (5.8-inch Display) to 1242 x 2688 pixels (6.5-inch Display). Upload your new 6.5-inch screenshots to the App Store.


# iOS Publishing

While app building with Thunkable AI is easy, it's still important that you complete all of the steps required from Apple before you can publish your app.

## Create an Apple Developer Account <a href="#create-an-apple-developer-account" id="create-an-apple-developer-account"></a>

You need an Apple Developer Account to publish an app to the App Store. To get a Developer Account, you must enroll in the [Apple Developer Program](https://developer.apple.com/programs/). Enrollment is approximately $99 USD (or in local currency where available) per membership year.

## Each time you create a new app <a href="#each-time-you-create-a-new-app" id="each-time-you-create-a-new-app"></a>

### App Icon

Set the App Icon in the [project settings](/ai/getting-started/project-settings). &#x20;

### Register your App ID&#x20;

To register an App ID:

1. Access your [Identifiers](https://developer.apple.com/account/resources/identifiers/list)
   1. Open your [Apple Developer account page](https://developer.apple.com/account).
   2. Under the **Certificates, IDs & Profiles** heading, select **Identifiers**.
2. Click the blue **+** icon to add a new identifier to your account.\
   \
   ![](/files/Q4WfsBlXX7afta9hluyj)<br>
3. Choose **App IDs** from the list of options.
4. Click **Continue**.
5. Select **App**.
6. Click **Continue**.
7. On the **Register an App ID** screen, complete the following fields:
   1. **Description** - This is the name you want to give your app. It appears next to the app icon when downloaded on a user's device. It must be unique to the App Store and cannot use special characters such as @, &, \*, "
   2. **Bundle ID** - This is also unique to your app, but not visible to your app users. Apple recommends reversing your domain name to create your bundle ID, i.e. *com.yourDomainName.yourAppName* to avoid conflicts with other apps.

      Uploading apps to the App Store requires an Explicit Bundle ID. Wildcard bundle IDs are no longer accepted. **Note down your Bundle ID for later steps.**
   3. **\[Only for Manual Provisioning] App ID Prefix (Team ID)** - Record your App ID Prefix or Team ID. This automatically created, unique identifier is linked to your Apple Developer Program membership. The same ID can be used for every app you publish.<br>

      <figure><img src="/files/fAHIy5Fxi0m7lP2XQdD5" alt=""><figcaption></figcaption></figure>
8. Click **Continue**.
9. Confirm that the details are correct.
10. Click **Register**.
11. The new App ID you created is included in your list of Identifiers. Click the app's name to review its Description, App ID Prefix (Team ID), or Bundle ID.

### Create an App Listing on App Store Connect <a href="#create-an-app-listing-on-app-store-connect" id="create-an-app-listing-on-app-store-connect"></a>

Your app listing on App Store Connect is where you will manage your submission to the App Store.

1. Go to the [App Store Connect website](https://appstoreconnect.apple.com/login) and log in.
2. Click **Apps**.

![](https://docs.thunkable.com/~gitbook/image?url=https%3A%2F%2F1223006790-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-LAn5scXl2uqUJUOqkJo-84897653%252Fuploads%252Fq7gHw3kaiCBPZ55jLy7D%252Fapp_store_connect_my_apps.png%3Falt%3Dmedia%26token%3Ded6d3cfa-9d56-4bd3-8b04-6faf25ac8144\&width=768\&dpr=4\&quality=100\&sign=3ddcaa02\&sv=2)

1. Click the blue **+** button next to the heading **Apps**.
2. Select **New App** from the provided menu.
3. Complete the New App modal.
   1. **Platforms** - iOS
   2. **Name** - The name you gave your app when you registered it. This is how it will appear on the App Store. It can't be longer than 30 characters.
   3. **Primary Language** - If localized app information isn’t available in an App Store country or region, the information from your primary language will be used instead. [Learn more](https://developer.apple.com/help/app-store-connect/manage-app-information/localize-app-store-information).
   4. **Bundle ID** - Select the Bundle ID you registered previously.
   5. **SKU** - A unique ID for your app that is not visible on the App Store. This is an identifier you create to track your apps on the App Store. You should stick to a pattern with your apps' SKU numbers to better organize them and keep track of app versions. Characters a-z, A-Z, 0-9, underscores, periods and dashes are all allowed.
   6. **User Access** - You can limit which users see the app in App Store Connect. If you select Full Access, all users will have access to the app. Users with the Admin, Finance, and Reports roles cannot have their app access limited.

      ![](https://docs.thunkable.com/~gitbook/image?url=https%3A%2F%2F1223006790-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-LAn5scXl2uqUJUOqkJo-84897653%252Fuploads%252FtQIRVLsyvcIg7VTjYKSr%252FApp%2520Store%2520Connect%2520-%2520New%2520App%2520modal.png%3Falt%3Dmedia%26token%3D5cbda024-a994-44be-bc6c-9191448b2030\&width=768\&dpr=4\&quality=100\&sign=47170d2b\&sv=1)
4. Click **Create**.

## Publishing Process in Thunkable <a href="#start-the-publishing-process-in-thunkable" id="start-the-publishing-process-in-thunkable"></a>

Thunkable enables you to send your build directly to the App Store without the need for any specialized software or hardware.&#x20;

There are two methods to publish your Thunkable app, **Automated Provisioning** and **Manual Provisioning**. Each method has their own requirements and steps and is located in their respective section. **Automated Provisioning** is **highly recommended** for its simplicity.

## Automated Provisioning (Recommended) <a href="#start-the-publishing-process-in-thunkable" id="start-the-publishing-process-in-thunkable"></a>

To use automated provisioning, you must first configure your App Store Connect API credentials. Configure it by following the steps here: <https://ai.thunkable.com/account/appstore>

### Configure App Store Connect API

{% hint style="warning" %}
If you already configured your App Store Connect API, you should skip these steps and proceed to **Publishing with Automated Publishing**.
{% endhint %}

1. Access your [App Store Connect API settings](https://ai.thunkable.com/account/appstore).
   1. Click on the dropdown icon next to your profile image.\ <img src="/files/9zFZx68f9sgyC58ssRzY" alt="" data-size="original">
   2. Select App Store Connect API.
2. Select **Continue to Setup.**
3. In a new tab, access your [Apple API Integration](https://appstoreconnect.apple.com/access/integrations/api).
4. &#x20;Click the blue **+** icon next to **Active.**
5. Fill out the fields in thee **Generate API Key** form.\
   \ <img src="/files/XN761oqx5HrbQRiDhPhd" alt="" data-size="original">
   1. Give your key a name (e.g., "Thunkable Provisioning").
   2. Select Admin access level (required for managing certificates and provisioning profiles).
   3. Click **Generate** to create your new API Key.
6. Download the private key (.p8 file) and save it. This file can only be downloaded once.<br>

   <figure><img src="/files/CMn01DxinHeNpK1nuJCZ" alt=""><figcaption></figcaption></figure>
7. Note down the following:
   1. **Key ID** - Found in the same row as the API key just created & downloaded.
   2. **Issuer ID** - Found at the top of the [API Integrations](https://appstoreconnect.apple.com/access/integrations/api) page.
8. Back in Thunkable, click **Continue to Enter Credentials.**\ <br>

   <figure><img src="/files/DD3CdOZzQEAY7Aay2sk3" alt=""><figcaption></figcaption></figure>
9. Add your **Key ID**, **Issuer ID**, and upload the **private key (.p8 file)** downloaded earlier.
10. Click **Save Credentials.**

You have now successfully configured your App Store Connect API. You are now able to use **Automated Publishing**.

### **Publishing with Automated Publishing**

1. Access the publishing wizard.
   1. Click **Publish** to open the dropdown list.
   2. Click **Publish IOS.**\
      ![](/files/JR2VCvI1YYVlP1EPaKTb)
2. Click **Get Started**.
3. Select **Automated Publishing**, then click **Next**.\
   \
   ![](/files/lojMEPTFEssGoW4sPHrg)<br>
4. Input your **App Name** and **Bundle ID** from when you registered your [App Name](#create-an-app-listing-on-app-store-connect) and [App ID](#register-your-app-id).
5. Click **Next**.&#x20;
6. **(Optional)** Increment the version number. Thunkable automatically increments the version number. However, you may choose any version number you want as long as it is larger than the prior version number.
7. Click **Send**.

Congrats! You have just published your app! Your app now will be built and sent to your [App's page on Apple](https://appstoreconnect.apple.com/apps) automatically. The process will take about 45 minutes and you will receive an email upon completion.

## Manual Provisioning <a href="#start-the-publishing-process-in-thunkable" id="start-the-publishing-process-in-thunkable"></a>

1. Set Apple ID (Your App Store account's email, it does not need to be the same as your Thunkable account's email)
2. Click the **Next** button.

**Register app**

1. Input your **App Name**, **Team ID**, and **Bundle ID** from when you completed these steps: [Register Your App with Apple](https://docs.thunkable.com/publishing/publish-to-app-store-ios/user-guide#register-your-app-with-apple).

   ![](https://docs.thunkable.com/~gitbook/image?url=https%3A%2F%2F1223006790-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-LAn5scXl2uqUJUOqkJo-84897653%252Fuploads%252FbSDZfHnky0Xv9606bYe4%252Fios_publish_register.png%3Falt%3Dmedia%26token%3D06c4e248-aba7-403a-98a0-2d9cae062fd3\&width=768\&dpr=4\&quality=100\&sign=c7b21152\&sv=2)
2. Click **Next**.

These values will remain the same every time you publish or update this app, so record them somewhere safe.

#### Generate an app-specific password <a href="#generate-an-app-specific-password" id="generate-an-app-specific-password"></a>

You only need one app-specific password for Thunkable to send any build to App Store Connect on your behalf.

You do not need separate app-specific passwords for separate Thunkable projects.

1. Navigate to the [Apple ID account website](https://appleid.apple.com/#!\&page=signin).
2. Enter the **email address** and **password** associated with your Apple ID.
3. If prompted, enter your **two-factor** **authentication code**.
4. On the **Sign-In and Security** page, select **App-specific passwords**.

   ![](https://docs.thunkable.com/~gitbook/image?url=https%3A%2F%2F1223006790-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-LAn5scXl2uqUJUOqkJo-84897653%252Fuploads%252FRNHcvp5WtPu30qJjS0xm%252Fapple_id_app_specific_password.png%3Falt%3Dmedia%26token%3D852fa0b6-daf8-4625-b3d4-48ea9222a9e4\&width=768\&dpr=4\&quality=100\&sign=856c467d\&sv=2)
5. Click **Generate an app-specific password** if this is your first time creating an app-specific password or the **plus icon** if you've created an app-specific password previously.

   ![](https://docs.thunkable.com/~gitbook/image?url=https%3A%2F%2F1223006790-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-LAn5scXl2uqUJUOqkJo-84897653%252Fuploads%252FtWMKTHtgVANHjmwc0Rdi%252Fios_create_app_specific_password.png%3Falt%3Dmedia%26token%3D48f735fa-bd7e-4c7a-97b7-1ffc19f45864\&width=768\&dpr=4\&quality=100\&sign=eaa62528\&sv=2)
6. Give your app-specific password a meaningful name so you can recognize it later.

   Remember:

   * You can use the same app-specific password for all of your Thunkable projects.
   * Creating a new one every time you publish a new project is unnecessary and not recommended.
   * Creating a new one when you want to update an existing project is unnecessary and not recommended.
7. Your app-specific password is provided. You cannot retrieve this password once you close this modal, so make sure you save it somewhere safe.
8. Click **Done**.

#### Create an iOS Distribution Certificate <a href="#create-an-ios-distribution-certificate" id="create-an-ios-distribution-certificate"></a>

A CSR is an encoded file containing information about your app, which Apple uses to create a certificate to encrypt traffic to your app. The following instructions walk you through how to:

* Download a certificate signing request (CSR) from Thunkable
* Use the CSR to generate a certificate from Apple
* Download the certificate from Apple
* Upload the certificate in Thunkable

To generate an Apple certificate and upload it to Thunkable:

1. Click **Click to download CSR** to download a certificate signing request (CSR) file.
2. Open your [Apple Developer account page](https://developer.apple.com/account).
3. Under the **Certificates, IDs & Profiles** heading, select **Certificates**.
4. Click the blue **+** icon to add a new certificate to your account.
5. Choose **iOS Distribution (App Store Connect and Ad Hoc)** from the list.

![](https://docs.thunkable.com/~gitbook/image?url=https%3A%2F%2F1223006790-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-LAn5scXl2uqUJUOqkJo-84897653%252Fuploads%252Fc8J4X2U4iZSruFIm2UBh%252FCertificates%252C%2520Identifiers%2520%2526%2520Profiles%2520-%2520Apple%2520Developer.jpeg%3Falt%3Dmedia%26token%3Dee74b483-20f6-4ef8-9df2-804a3721a12d\&width=768\&dpr=4\&quality=100\&sign=47d87bb4\&sv=2)

1. Click **Continue**.
2. Click **Choose file**.
3. From your computer, select the **Certificate Signing Request (CSR)** you download from Thunkable.
4. Click **Continue**.
5. Click **Download** to save a copy of the certificate to your computer.
6. Return to Thunkable.
7. Click **Upload Certificate**.
8. From your computer, select the **`.cer`** file you just downloaded.
9. Click **Next**.

#### Create a Provisioning Profile <a href="#create-a-provisioning-profile" id="create-a-provisioning-profile"></a>

Apple requires a provisioning profile to install an app on a device. You need to create a `.mobileprovision` file in your Apple account and then return to Thunkable to upload this file.

1. Open your [Apple Developer account page](https://developer.apple.com/account).
2. Under the **Certificates, IDs & Profiles** heading, select **Profiles**.
3. Click the blue **+** icon to add a new certificate to your account.
4. Under the **Distribution** heading, select **App Store Connect**.
5. Click **Continue**.
6. Select the **App ID** for the app you want to publish.
7. Click **Continue**.
8. Select the certificate you wish to include in this provisioning profile.
9. Click **Continue**.
10. Name your provisioning profile.
11. Click **Generate**.
12. Click **Download** to save the provisioning profile to your computer.

Your provisioning profile name should only contain letters (A-Z, a-z), numbers (0-9), or spaces.

**App Credentials**

Upload the Distribution Certificate created in [Create an iOS Distribution Certificate](https://docs.thunkable.com/publishing/publish-to-app-store-ios/user-guide#create-an-ios-distribution-certificate)

1. Click **Upload Certificate**.
2. From your computer, select the **`.cer`** file you just downloaded.
3. Click **Next**.

   ![](https://docs.thunkable.com/~gitbook/image?url=https%3A%2F%2F1223006790-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-LAn5scXl2uqUJUOqkJo-84897653%252Fuploads%252F4e8cmShVKfFfDq5PoaE6%252Fios_publish_credentials_certificate.png%3Falt%3Dmedia%26token%3De42062d3-2a27-4bab-9248-d4fab9022d06\&width=768\&dpr=4\&quality=100\&sign=adbb9865\&sv=2)

Upload the Provisioning Profile created in Create a Provisioning Profile

1. Click **Upload Profile**.
2. From your computer, select the **`.mobileprovision`** file you just downloaded.
3. Click **Next**.

   ![](https://docs.thunkable.com/~gitbook/image?url=https%3A%2F%2F1223006790-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-LAn5scXl2uqUJUOqkJo-84897653%252Fuploads%252F2hlcm4XZRYOnFumwVLEI%252Fios_publish_upload_profile.png%3Falt%3Dmedia%26token%3D1438fc20-7c84-4fa7-be59-4db0db44bddd\&width=768\&dpr=4\&quality=100\&sign=bd0c86a7\&sv=2)

Enter your App Specific Password as created in Generate an app-specific password

1. **Paste your app-specific password** into the provided field in the Thunkable publishing modal.
2. Click **Next**.

   ![](https://docs.thunkable.com/~gitbook/image?url=https%3A%2F%2F1223006790-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-LAn5scXl2uqUJUOqkJo-84897653%252Fuploads%252FGgp6d5j4SdhUlkG5J9bc%252Fios_publish_copy_app_specific_password.png%3Falt%3Dmedia%26token%3D35884c6d-17ee-4d80-9d36-35aed07d78c4\&width=768\&dpr=4\&quality=100\&sign=f98c003f\&sv=2)

**App Store Connect**

1. Make sure that you have completed the previous step to create an App Listing on App Store Connect
2. Click **Next** to confirm you've created a new app with App Store Connect.

   ![](https://docs.thunkable.com/~gitbook/image?url=https%3A%2F%2F1223006790-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-LAn5scXl2uqUJUOqkJo-84897653%252Fuploads%252F1F3IxvCisjh8EBx3Tpp8%252FiOS%2520Publishing%2520Wizard%2520-%2520App%2520Store%2520Connect.png%3Falt%3Dmedia%26token%3D2ccb94cd-4ff8-4e1c-9bc2-bdb52480a79b\&width=768\&dpr=4\&quality=100\&sign=50865a52\&sv=1)

**App Info**

* **Version Number:** The version number is visible to your users when they download a new version of your app. See here for additional information: Set a Version Number.

![](https://docs.thunkable.com/~gitbook/image?url=https%3A%2F%2F1223006790-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-LAn5scXl2uqUJUOqkJo-84897653%252Fuploads%252FgYoZav1W78dzrp8ns410%252FPublish%2520ios.png%3Falt%3Dmedia%26token%3D9a9341a9-f367-4f89-91f5-90c70d3f4667\&width=768\&dpr=4\&quality=100\&sign=5e497f77\&sv=2)

When the necessary fields are populated, click **Submit**.

You should shortly receive an email from Thunkable informing you that your build is being sent to the App Store. There are still a number of steps you need to complete on App Store Connect before your app can be published, but that's everything completed from the Thunkable side of things - congratulations!

Because of Apple's thorough review process, app submissions are sometimes not approved on the first attempt. See here to assist you in troubleshooting the issues Apple flags with your submission: #troubleshooting.

## To update your app <a href="#to-update-your-app" id="to-update-your-app"></a>

Repeat the following steps each time you create a new app:

1. Start the Publishing Process in Thunkable, except for App Store Connect
2. (Optionally) Set a new Version Number
   1. Thunkable automatically handles this process but you may select your own number.
   2. The version number selected must be at least 1 higher than the previous version's number.

## After each successful build <a href="#after-each-successful-build" id="after-each-successful-build"></a>

Once your build has completed, you will receive several emails from Thunkable or Apple. The email from Thunkable will tell you if your build has been successfully sent to App Store Connect or if there is an issue. If there is an issue, follow the instructions in the email or Contact Support with your Reference ID for assistance.

## FAQ

#### **The uploaded build for \<App Name> has one or more issues.**

![](https://docs.thunkable.com/~gitbook/image?url=https%3A%2F%2F1223006790-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-LAn5scXl2uqUJUOqkJo-84897653%252Fuploads%252FwyKTjciltENFI0m8eNYT%252Fpublish_ios_entitlements_email.png%3Falt%3Dmedia%26token%3Db5d8e688-9508-4299-86cf-6074f2df81ed\&width=768\&dpr=4\&quality=100\&sign=3fcee84a\&sv=2)

This is merely a notice from Apple, no further action is necessary on your part. They send this because they detect a snippet of code for Push Notifications that is present, but always deployed, in every Thunkable app.


# Troubleshooting

#### Common iOS Publishing Issues <a href="#common-ios-publishing-issues" id="common-ios-publishing-issues"></a>

**Account Issues**

Apple ID or password were entered incorrectly. Since we don't store either one, there's no easy way for us to check so enter it slowly.

At regular intervals, Apple makes changes to their T\&C. In order to create or update your apps, you must accept them. You must accept Apple's new Apple ID and privacy terms or your build will fail. If you have not published or updated an app recently, login into your Apple Developer Account first and check for new terms and conditions. You can find these by accessing your [Agreement History Card](https://developer.apple.com/account#AgreementHistoryCard).

<figure><img src="/files/037brGltNWYdxj7bLSVR" alt=""><figcaption></figcaption></figure>

**App-Specific Password**

You will need your app-specific password to send each new build to your App Store listing in the future, so make sure to record it securely. If a developer uses a third-party platform like Thunkable to send an app build to App Store Connect, the developer must create an app-specific password.

Any time you change or reset your primary Apple ID password, all of your app-specific passwords are revoked automatically to protect the security of your account. You need to generate new app-specific passwords for any apps that you want to continue using.

**iOS Distribution Certificate**

One certificate from Apple is all you need for all the apps you publish from your account in a year. However, the certificate must be uploaded every time you update your app, so we recommend you rename it and save it somewhere you'll know to look for it next time.

When a certificate expires, it will not affect published apps, but you must create a new one and connect it to a new provisioning profile the next time you update a published app or publish a new app.

A certificate is specific to the email account that was used to generate it. Therefore, if you help another Creator publish their app, you must log in and publish from that Creator's account using their certificate.

Apple limits the number of certificates you are allowed per account, so you may need to revoke a certificate before creating a new one.

Since two-factor authentication is the default for Apple accounts, the instructions provided are for publishing with two-factor authentication enabled. If you need to enable it for your account, please see Apple's instructions here: [Turn on two-factor authentication for your Apple ID](https://support.apple.com/en-us/HT204915).

If you have an existing Apple Developer Program account with 2 iOS certificates, you'll have to revoke one. Apple only allows developers to have 2 iOS certificates at a time and Thunkable creates one when it publishes to your account.

**Provisioning Profile**

After you revoke your certificate, it is possible that one or more of your provisioning profiles will become inactive. To publish successfully, you'll also need to delete any inactive provisioning profiles

#### Removing your app from the App Store <a href="#removing-your-app-from-the-app-store" id="removing-your-app-from-the-app-store"></a>

If you want to remove your apps from being listed in the App Store, open your app listing on [App Store Connect](https://appstoreconnect.apple.com/apps) and follow these instructions:

1. On the “App Store” tab, click on “Pricing and Availability”
2. Click the “Remove from Sale” radio button
3. Then click the “Save” button to unpublish your app

You can see these buttons in the screenshot below:

<figure><img src="/files/UGLZSFythPyicNeovptq" alt=""><figcaption></figcaption></figure>

Please note that if your Apple Developer account expires, your apps will no longer be available for download in the App Store.

Removing your app from the App Store will not delete it from devices which have previously downloaded the app.


# Review Process

{% hint style="warning" %}
Apple holds a high standard for apps that are approved for distribution in the App Store so please [review Apple's policies and guidelines](https://developer.apple.com/app-store/review/guidelines/) to make sure your app is in compliance before you sign up for the Apple Developer Program.
{% endhint %}

### iOS App - Prepare for Submission <a href="#ios-app-prepare-for-submission" id="ios-app-prepare-for-submission"></a>

**iOS Previews and Screenshots**

Apple requires accurate screenshots of your app before publishing. By adding app screenshots that showcase your app's features and functionality on its store listing page, you can help your app attract new users on the App Store.

1. Click **\[version] Prepare for Submission** under the **iOS App** heading in the sidebar.
2. Under the heading **iOS Previews and Screenshots**, there is a tab for each required screenshot size.
3. Generate the required screenshots. For instructions, see here: [Generate Screenshots](/ai/publishing/publishing-overview/generate-screenshots).
4. Drag your screenshots into the corresponding tabs.

**Product Page Details**

Apple requires a lot of information before submitting your app for review.

1. Click **\[version] Prepare for Submission** under the iOS App heading in the sidebar.
2. Complete the following fields:
   1. **Promotional text** - Your app’s promotional text appears at the top of the description and is up to 170 characters long. You can update promotional text at any time without having to submit a new version of your app. Consider using this to share the latest news about your app, such as limited-time sales or upcoming features.
   2. **Description** - Provide an engaging description that highlights the features and functionality of your app.
   3. **Keywords** - Include one or more keywords that describe your app. Keywords make App Store search results more accurate. Separate keywords with a English comma.
   4. **Support URL** - A URL with support information for your app. This URL will be visible on the App Store.
   5. **Version** - The version number of the app you are adding. Numbering should follow software versioning conventions.
   6. **Copyright** - The name of the person or entity that owns the exclusive rights to your app, preceded by the year the rights were obtained (for example, "2008 Acme Inc."). Do not provide a URL.
   7. **Contact Information** - The person in your organization who should be contacted if the App Review team has any questions or needs additional information.
   8. **Sign-In Information** - This is a user name and password we can use to sign in to your app, so we can review all of its features. If users sign in using social media, provide information for an account we can use. Credentials must be valid and active for duration of review.
3. Click **Save** in the upper right.

For additional guidance, see here: [Apple: Creating your product page](https://developer.apple.com/app-store/product-page/).

#### App Information <a href="#app-information" id="app-information"></a>

1. Click **App Information** under the General heading in the sidebar.
2. Complete the following fields:
   1. **Subtitle** - Subtitle Your app’s subtitle is intended to summarize your app in a concise phrase. (More details available here: [Apple: Creating your product page](https://developer.apple.com/app-store/product-page/).)
   2. **Categories** - Categories on the App Store help users discover new apps to meet their needs.
   3. **Content Rights** - Click **Set Up Content Rights Information** and answer the questions provided.
   4. **Age Rating** - Click **Set Up Age Rating Across All Platforms** and answer the questions provided.
3. Click **Save** in the upper right.

#### Pricing and Availability <a href="#pricing-and-availability" id="pricing-and-availability"></a>

1. Click **Pricing and Availability** under the General heading in the sidebar.
2. Use this guide from Apple to complete your Pricing and Availability: [Manage app pricing](https://developer.apple.com/help/app-store-connect/manage-app-pricing/set-a-price).
3. Click **Save** in the upper right.

#### App Privacy <a href="#app-privacy" id="app-privacy"></a>

1. Click **App Privacy** under the General heading in the sidebar.
2. Click **Edit** next to Privacy Policy.
3. Input your **Privacy Policy URL**.
4. Click **Save**.
5. Click **Get Started** to provide some information about your app's data collection practices. Depending on your answer to these questions, you may be asked to answer more quations and provide additional details.
   1. Please note that if your app collects data, you will need to select "Yes, we collect data from this app".

      <div align="left"><figure><img src="/files/FmXufDyP6M5WLaougDLU" alt="" width="437"><figcaption></figcaption></figure></div>

      For most third-party data, this will be collecting location data or device ID. If your app is collecting user data and saving it (i.e Name, email address, etc.) you will also need to disclose this information.

      ![](https://docs.thunkable.com/~gitbook/image?url=https%3A%2F%2F1223006790-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-LAn5scXl2uqUJUOqkJo-84897653%252Fuploads%252FPgHPQPJ9RXbJ3vMO2AyO%252Fios_data_collection.gif%3Falt%3Dmedia%26token%3D8705390c-51fc-4ba5-8afb-97b7b9ada73d\&width=768\&dpr=3\&quality=100\&sign=11ee748d\&sv=2)
6. When you've completed the the necessary fields, click **Save** in the upper right.

#### Submit for Review <a href="#submit-for-review" id="submit-for-review"></a>

When you have completed all of the sections above:

1. Click **\[version] Prepare for Submission** under the iOS App heading in the sidebar.
2. Click **Add for Review** in the upper right.
3. Apple will let you know if there are any incomplete fields. Address these errors and click Add for Review again.
4. Confirm your submission is accurate and click **Submit to App Review**.
5. You will receive emails updating you on the progress of your submission.

#### Design assets <a href="#design-assets" id="design-assets"></a>

The final section requires screenshots for both iPhone and iPad and a high resolution icon.

The high resolution icon will be featured in the App Store listing and must be 1024 x 1024 px with no transparency. To generate this icon, we recommend a tool [like this](https://makeappicon.com/).

You can see the screenshots you need in Apple's [screenshot specifications document](https://help.apple.com/app-store-connect/#/devd274dd925).

{% hint style="info" %}
You can create your own iOS screenshots in your browser. Learn more here: [Generate Screenshots](/ai/publishing/publishing-overview/generate-screenshots)
{% endhint %}

#### Export compliance <a href="#export-compliance" id="export-compliance"></a>

You may need to answer a question about export compliance. Select **Yes** when asked if your app uses encryption. See more: [Overview of Export Compliance](https://developer.apple.com/help/app-store-connect/manage-app-information/overview-of-export-compliance/).

#### Advertising identifier <a href="#a-dvertising-identifier" id="a-dvertising-identifier"></a>

After submitting your app for review, you may be asked, "Does this app use the Advertising Identifier (IDFA)?"

The app will still be able to be published, but you will want to check the **following three boxes**:

* Attribute this app installation to a previously served advertisement
* Attribute an action taken within this app to a previously served advertisement
* I, YOUR\_NAME, confirm that this app, and any third party…

Note, you should **not** check the box labelled **Serve advertisements within the app**.


# Android Publishing

### Before you publish your first app <a href="#before-you-publish-your-first-app" id="before-you-publish-your-first-app"></a>

#### Required Assets <a href="#required-assets" id="required-assets"></a>

We recommend you compile the following assets before embarking on the publishing journey.

* **App Information**
  * \[Text] App Name To be shown in the Play Store.
  * \[Text] A Short Description of your app
  * \[Text] A Full Description of your app
* **App Icon**
  * \[Image] 512 x 512 pixels
  * Up to 1MB in size
* **Feature Graphic**
  * \[Image] 1024 x 500 pixels
  * Up to 1MB in size
* **Phone Screenshots**
  * \[Images] 16:9 or 9:16 aspect ratio
  * Each side between 320 and 3,840 pixels
  * Up to 8MB in size

### App Settings <a href="#app-settings" id="app-settings"></a>

To publish your app on Android, you'll need the following items, to be added once you're preparing to publish:

* App Name
* Icon
* Application ID

### App Icon

Set the App Icon in the [project settings](/ai/getting-started/project-settings). &#x20;

### Each time you create a new app <a href="#each-time-you-create-a-new-app" id="each-time-you-create-a-new-app"></a>

**Create a new app on the Google Play Console**

1. Sign-in to your [**Google Play Console**](https://play.google.com/console/) account.
2. Click **Create app** in the upper right.
3. Complete the requested **app details** fields. Note: The App Name is how your app will appear on Google Play.
4. Complete the required **declarations**.
5. Click **Create app**.

#### Upload your Android App Bundle (AAB) file to the Google Play Console <a href="#download-your-android-app-bundle-aab-file" id="download-your-android-app-bundle-aab-file"></a>

The Apple and Android publishing processes are quite different. To publish with Apple, you complete the process in the Thunkable publishing wizard and the app file is sent directly to your Apple TestFlight. To publish with Android, you receive an email from Thunkable with your app's AAB file, which you download and then upload to the Google Play Store (Note, an AAB file cannot be installed on an Android device).

#### Manual method:&#x20;

To download your Android App Bundle (AAB) file:

1. Within your Thunkable project, click the **Publish** icon in the top right corner of your display.
2. Select **Publish Android** from the drop-down menu.

<figure><img src="/files/Y8w2Pg3LtsV4h0TOLqD5" alt=""><figcaption></figcaption></figure>

3. A publishing modal is provided to guide you through the publication process.
4. Enter the **email address** you want the app download link sent to.
5. Set your Application ID, Version Name, and Version Code.
6. Click **Send**.
7. In approximately 30 minutes, you will receive your AAB file to the email address you provided.
8. When you receive the email, download the AAB file to your computer. Note: If you use Google Chrome, your browser settings may prevent you from downloading your AAB file. Simply open the email in Firefox or Safari to download your AAB file.

#### Automated method:&#x20;

To upload your Android App Bundle (AAB) file directly to the Google Play:

1. Setup Google Play API following the steps here: <https://ai.thunkable.com/account/playstore>
2. Within your Thunkable project, click the **Publish** icon in the top right corner of your display.
3. Select **Publish Android** from the drop-down menu.

<figure><img src="/files/Y8w2Pg3LtsV4h0TOLqD5" alt=""><figcaption></figcaption></figure>

4. A publishing modal is provided to guide you through the publication process:
5. Enter the **email address** you want the app download link sent to.
6. Set your Application ID, Version Name, and Version Code.
7. Click on the checkbox "Publish to Google Play after build":

<figure><img src="/files/qJryIdxJ7om5OAqNo2zF" alt=""><figcaption></figcaption></figure>

8. Click **Send**.
9. In approximately 30 minutes, your AAB file will be sent to the Google Play platform.

#### Manage your app signing <a href="#manage-your-app-signing" id="manage-your-app-signing"></a>

![](https://docs.thunkable.com/~gitbook/image?url=https%3A%2F%2F1223006790-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-legacy-files%2Fo%2Fassets%252F-LAn5scXl2uqUJUOqkJo%252F-MbKl54vHyH1-Kw3fqBM%252F-MbKvhB85b_I-diO0Ku-%252FPrepare-1.png%3Falt%3Dmedia%26token%3Da6647069-a2fc-4a7e-a04d-893d660075fb\&width=768\&dpr=4\&quality=100\&sign=51dff9d9\&sv=2)

Google will offer to protect your app signing key. You can click **Continue** to allow this to proceed. You will only be asked this the first time you publish a release.

If you don't want Google to manage your App Signing, you can do so yourself. This is not necessary.

Continue following the instructions in this document from Create and Publish a Release.

**App Dashboard**

While you're getting set up, the Google Play Console Dashboard shows you what you need to do to get your app up and running. This includes recommendations on how to manage, test, and promote your app. Once you've completed a task, return to the Google Play Console Dashboard to explore what else you need can do.

We'll focus on the following steps:

* Set up your app
* Publish your app on Google Play

**Set up your app**

In this section, you'll share with Google the content of your app, and manage how it is organized and presented on Google Play.

1. Click **View tasks** in the Set up your app section to see the tasks you must complete.
2. Click on a task.
3. Complete the required fields.
4. Click **Save**.
5. Click **Dashboard** above the task name in the upper left.
6. Repeat with the remaining tasks in the list.

Apps that request access to sensitive permissions or data (as defined in the [user data policies](https://play.google.com/about/privacy-security-deception/user-data/)) are required by the Google Play Store to include a privacy policy. All apps made on Thunkable request access to sensitive permissions or data, which means you will need to provide a privacy policy.

**Main store listing**

1. Click **Main store listing** under the Grow heading in the sidebar.
2. Complete the required fields and upload the required assets. See here for additional guidance: [Add preview assets to showcase your app](https://support.google.com/googleplay/android-developer/answer/9866151).
3. Click **Save**.

**Create and publish a release**

1. Return to the Google Play Console **Dashboard**.
2. Click **View tasks** in the Create and publish a release section to see the tasks you must complete.
3. Click the **Select countries** task.
4. Identify the countries you want your app to be available in.
5. Click **Create a new release**.
6. Upload the AAB file into the **App bundles** section. Instructions for downloading your AAB are available here: Download your Android App Bundle (AAB) file
7. Add **Release notes** for this update.
8. Click **Next**.

You may see some Accessibility, Performance, Stability, Security, and trust warnings on the Google Play Store, Pre-launch report. These notifications from Google about your app are simply some warnings, not errors--there is nothing wrong with your app and it should still appear on the Play Store.

### To update your app <a href="#to-update-your-app" id="to-update-your-app"></a>

### **Updating an existing app on the Play Store** <a href="#updating-an-existing-app-on-the-play-store" id="updating-an-existing-app-on-the-play-store"></a>

1. In your Google Play Console, click on the **Releases** tab.
2. Click the **Create New Release** Button
3. Upload the AAB file into the **App bundles** section. Instructions for downloading your AAB are available here: Download your Android App Bundle (AAB) file.
4. Add a **Release name** so you can identify this release. It isn't shown to users on Google Play.
5. Add **Release notes**. Let users know what's in your release.
6. Click **Next**.

If you are updating an existing app on the Google Play Store, your Thunkable project will need to have:

* The same package name as the published app
* An incremented version number (version number is higher than the version number of your published app). This can be updated in your project's code.

You will not need to change any app signing settings when updating a published app.


# Review Process

### Submit your app for review <a href="#submit-your-app-for-review" id="submit-your-app-for-review"></a>

#### Create a new app on the Google Play Console <a href="#create-a-new-app-on-the-google-play-console" id="create-a-new-app-on-the-google-play-console"></a>

1. Sign-in to your [**Google Play Console**](https://play.google.com/console/) account.
2. Click **Create app** in the upper right.
3. Complete the requested **app details** fields. Note: The App Name is how your app will appear on Google Play.
4. Complete the required **declarations**.
5. Click **Create app**.

#### App Dashboard <a href="#app-dashboard" id="app-dashboard"></a>

While you're getting set up, the Google Play Console Dashboard shows you what you need to do to get your app up and running. This includes recommendations on how to manage, test, and promote your app. Once you've completed a task, return to the Google Play Console Dashboard to explore what else you need can do.

We'll focus on the the following steps:

* Set up your app
* Publish Your app on Google Play

#### Set up your app <a href="#set-up-your-app" id="set-up-your-app"></a>

In this section, you'll share with Google the content of your app, and manage how it is organized and presented on Google Play.

1. Click **View tasks** in the Set up your app section to see the tasks you must complete.
2. Click on a task.
3. Complete the required fields.
4. Click **Save**.
5. Click **Dashboard** above the task name in the upper left.
6. Repeat with the remaining tasks in the list.

{% hint style="info" %}
Apps that request access to sensitive permissions or data (as defined in the [user data policies](https://play.google.com/about/privacy-security-deception/user-data/)) are required by the Google Play Store to include a privacy policy.&#x20;
{% endhint %}

#### Main store listing <a href="#main-store-listing" id="main-store-listing"></a>

1. Click **Main store listing** under the Grow heading in the sidebar.
2. Complete the required fields and upload the required assets. See here for additional guidance: [Add preview assets to showcase your app](https://support.google.com/googleplay/android-developer/answer/9866151).
3. Click **Save**.

#### Create and publish a release <a href="#create-and-publish-a-release" id="create-and-publish-a-release"></a>

1. Return to the Google Play Console **Dashboard**.
2. Click **View tasks** in the Create and publish a release section to see the tasks you must complete.
3. Click the **Select countries** task.
4. Identify the countries you want your app to be available in.
5. Click **Create a new release**.
6. Upload the AAB file into the **App bundles** section. Instructions for downloading your AAB are available here: [Download your Android App Bundle (AAB) file](/ai/publishing/android-publishing#download-your-android-app-bundle-aab-file).
7. Add a **Release name** so you can identify this release. It isn't shown to users on Google Play.
8. Add **Release notes**. Let users know what's in your release.
9. Click **Next**.

{% hint style="warning" %}
If you have a newly created personal Google developer account, you must run a closed test for your app with a minimum of 20 testers who have been opted-in for at least the last 14 days continuously. When you meet these criteria, you can apply for production access on the Dashboard. You can learn more [here](https://support.google.com/googleplay/android-developer/answer/14151465).
{% endhint %}

You can share your app for free in the Thunkable community and find people to test it.

Click **Start Rollout to Production** to publish your app!

Once your app has been reviewed, it will go live on the Google Play Store.


# Web Publishing

## Publish Web App

Click the Publish button and select **Publish Web App.**

<div align="left"><figure><img src="/files/N417jYwbr7mxNUXLzInA" alt="" width="438"><figcaption></figcaption></figure></div>

In the next modal you can:

* open the app in a new tab
* copy the app link
* select whether to publish as a [**Mobile web app**](/ai/publishing/web-publishing#mobile-web-app) or a [**Responsive web app**](#responsive-web-app)
* share your app through popular channels like Facebook, Twitter and Reddit&#x20;
* **unpublish** your app by clicking on `Disable published link` text

<figure><img src="/files/9S6ROecu0g0qq7PW0UtF" alt=""><figcaption></figcaption></figure>

🎉 Congratulations - your Thunkable project is now live on the internet as a published web app.

## Mobile Web App

![](/files/w0lBuEus5J2rh2JWsj17)

Mobile web apps are best experienced by opening the link directly on your phone. To make your mobile app feel more like a native app you can add it to the home screen directly from your mobile web browser.

If you preview a mobile web app on a desktop or laptop computer you will see a phone frame around the app. This is to give you a rough idea of its final proportions, but ultimately this will vary from device to device depending on factors such as screen size, aspect ratio, and pixel density.

To get an app that can respond to devices of any size, consider publishing as a [Responsive Web App](broken://pages/-M1kQWEX613cPmhEhxrq#responsive-web-app).

## Responsive Web App

<figure><img src="/files/1hNS8RpO2qJrQE4zy7s8" alt=""><figcaption></figcaption></figure>

Publishing your app as a responsive web app means that it will scale according to the size of the device that it is being opened on.&#x20;

If your app in designed only to be run on phones, consider publishing as a [Mobile Web App](broken://pages/-M1kQWEX613cPmhEhxrq#mobile-web-app).

## Updating your App

Each time you press publish, it’s similar to creating a new release of your app in one of the stores. This means you can make changes and updates to your site without worrying about users seeing a half-finished new feature that you’re still working on.

When you’re ready to release a new version, choose “Publish as a Web App” and then click the blue “Publish current version” to update your app. The URL will remain the same, but the project that it links to will be updated.

<figure><img src="/files/HK7GdBYDW6lsZQ5KuOsW" alt=""><figcaption></figcaption></figure>

## Embed your app in a webpage

If you host a webpage, you can embed your Thunkable web app in an iframe using the syntax

`<iframe src="https://thunkable.site/w/K0XDxMqwl" title="Chop Down the Tree Thunkable App" height = 1000 width = 500></iframe>`

You can read more about iframes [here](https://www.w3schools.com/tags/tag_iframe.ASP).

## Publish to a custom domain

{% hint style="info" %}
Publishing to a custom domain is available for Creators on certain Thunkable plans. Please refer to our pricing page for more information: [Thunkable pricing](https://thunkable.com/pricing).
{% endhint %}

### Configure your domain

You need to configure your domain before you can publish your app to that domain. To do so, add the Thunkable IP address (34.136.177.42) to the A record of your domain which you can usually find in the DNS section of your domain provider.

Here are the instructions from some popular domain name providers:&#x20;

* [Namecheap](https://www.namecheap.com/support/knowledgebase/article.aspx/319/2237/how-can-i-set-up-an-a-address-record-for-my-domain/)
* [AWS](https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/ResourceRecordTypes.html#AFormat)
* [Digital Ocean](https://docs.digitalocean.com/products/networking/dns/how-to/manage-records/)
* [Google Domains](https://support.google.com/a/answer/2579934?sjid=10421762873183766212-EU\&src=supportwidget0\&hl=en\&authuser=0)
* [GoDaddy](https://www.godaddy.com/help/add-an-a-record-19238)

DNS synchronization often takes less than an hour but may take up to 72 hours. If your domain is not connecting within 48 hours, we recommend the following troubleshooting steps:

* Confirm the IP address added to your A record is the correct IP (34.136.177.42).
* Ensure you are using `http://` and not `https://`.

### Publish to a custom domain

**Note:** The windows you see may look slightly different from the ones shown below. The windows and prompts vary based on whether or not you’ve published your app as a web app previously.

To publish your web app to a custom domain:

1. Click the **Publish** button.<br>
2. Select **Publish Web App**.<br>
3. Add your custom domain in the provided field and click **Add Domain**. Note: this must be the domain and not the URL.<br>
4. Click **Check Status**. <br>

   <figure><img src="/files/zfaurKEqbY99NNHvZVx0" alt=""><figcaption></figcaption></figure>
5. A green **Connected** tag will appear in the field when there is a successful connection. <br>
6. Ensure the box next to **Publish web app to this domain** is checked.<br>
7. Select a web app format (Mobile web app or Responsive web app).<br>
8. Click **Get link and publish** or **Publish current version**.\ <br>

   <figure><img src="/files/3KbB0BPnEDbI0cpIK8W6" alt=""><figcaption></figcaption></figure>
9. Click **Done**.


# Store listing

The **Store Listing** page helps you prepare your app for publishing to the **App Store** and **Google Play**. It combines automated validation, AI-assisted content generation, and store-specific requirements into a single workflow so you can identify and resolve publishing issues before submitting your app.

You can switch between the **App Store** and **Google Play** tabs at any time to configure the requirements for each platform independently.

## Store listing

Click the Publish button and select **Store listing**.

## App Store (iOS)

Before publishing to the Apple App Store, make sure all of the following requirements are complete.

#### Automated by Thunkable

These checks are completed automatically whenever possible:

* Account Plan allows publishing.
* Active App.
* Bundle ID.
* App version.
* App Store Connect API credentials.
* iOS permission descriptions.
* Bundle ID in Apple Developer.
* App version on the App Store.
* App Secrets.
* AdMob requirements (if applicable).
* App icon.
* Privacy Policy URL.
* Store screenshots.
* Store title.
* Store description.
* App Store keywords.
* App Store category.
* Support URL.
* App Review contact information.
* Reviewer sign-in requirements.

#### Manual in App Store Connect

The following steps must be completed manually in **App Store Connect**:

* App exists in App Store Connect.
* App Privacy questionnaire.
* Age Rating.
* Pricing & Availability.
* Content Rights information.

## Google Play (Android)

The following items are required before publishing your app to **Google Play**.

#### Automated by Thunkable

These checks are completed automatically whenever possible:

* Account Plan allows publishing.
* Active App.
* Package name.
* App version.
* Google Play service account.
* Automated Google Play publishing.
* App Secrets.
* AdMob requirements (if applicable).
* App icon.
* Privacy Policy URL.
* Feature graphic (1024 × 500).
* Store screenshots.
* Store title.
* Store description.
* Google Play short description.
* Support email.

#### Manual in Google Play Console

The following steps must be completed manually in **Google Play Console**:

* Data Safety form.
* Content Rating questionnaire (IARC).
* Play Store category.

{% hint style="info" %}
Selecting an incomplete item will guide you to the relevant section where it can be completed.
{% endhint %}

{% hint style="info" %}
AI-generated content consumes AI tokens.
{% endhint %}

#### Publish App

Click **Publish App** to submit your app for publishing using the current Store Listing configuration.

Before publishing, Thunkable validates your app against the selected platform's publishing requirements. If any required items are missing, you'll be prompted to complete them before continuing.

Once all requirements are met, Thunkable builds your app and uploads it to the selected app store using your configured publishing settings.

{% hint style="info" %}
You can follow the publishing progress directly in the chat. Thunkable will provide real-time status updates, notify you when each publishing step is completed, and guide you through any remaining manual actions required before your app is successfully published.
{% endhint %}


# Release Notes

#### June 22, 2026

* Enabled tagging [Assets](/ai/app-design/assets) on the chat
* Added Native Functionality Panel with suggested [Integrations](/ai/features/integrations).

#### June 15, 2026

* Enabled [Assets](/ai/app-design/assets) for AI projects.
* Added an [upload icon button](/ai/getting-started/toolbar-management#app-icon) on the project screen.
* Fixed an issue with colors appearing on Android.
* Resolved an issue where versions didn’t appear on some projects.

#### June 8, 2026

* Enabled AdMob for AI projects.
* Added Push Notification integration via OneSignal for AI projects.
* Activated the in-app purchases feature for AI projects.

#### June 1, 2026

* Enabled NFC for AI projects.
* Fixed an issue with sound playing for a limited number of times.

#### May 27, 2026

* Fixed an issue with Download Android
* Added [Cloud Database and Authentication via Supabase](/ai/features/cloud-database)

#### May 26, 2026

* Added Video component support for embedding and viewing video content inside apps.
* Enabled biometrics for AI projects.
* Implemented upload custom fonts feature for AI projects

#### May 11, 2026

* AI-generated apps can include WebView.
* Implemented [Google Play API for Automated publishing process](/ai/publishing/android-publishing#automated-method).

#### May 6, 2026

* Enabled Bluetooth integration for AI projects
* Activated sound and speech features for AI projects
* AI-generated apps can include Drawer Navigator
* Fixed an issue with images in downloaded AI apps
* Implemented undo keyboard shortcut for properties panel.

#### April 27, 2026

* Enabled Map integration for AI projects.
* Activated Download Android for mobile users.
* Added example projects that you can remix and use

#### April 13, 2026

* Enabled AI-generated apps to include share file features.
* Implemented API keys support for AI-generated apps.

#### April 6, 2026

* Resolved an issue where a new project was sometimes opened in Preview instead of Edit mode

#### March 30, 2026

* Launched a new [Publish iOS method with App Store Connect API](https://aidocs.thunkable.com/publishing/ios-publishing)

#### March 25, 2026

* Enabled AI-generated apps to access the device’s sensors
* AI-generated apps can include share features
* Added Drag and Drop capability of components on AI projects

#### March 17, 2026

* Improvements to Version Number field in iOS publishing
* Improvements to Unsplash API error classification
* Fix for color schemas applied to active icons
* Expansion of useCamera feature to support desktop photo capture
* Added the option to click on the screen’s components to edit them without using AI
* Launched a new Release Notes Announcements panel
* Added Follow-Up Questions before App Generation and Prompt Suggestions
* AI Docs connected to the platform

#### March 12, 2026

* Updated [token costs for Build & Discuss mode prompts](/ai#ai-tokens)

#### March 10, 2026

* Fixed bug where code generation continued after clicking Stop
* Improved Discuss Mode feedback readability
* Addition of an Apply button when Discuss Mode suggests an action
* Enabled AI-generated code to access the device location

#### March 4, 2026

* Fixed bug where users received "Unknown Error" response after the first prompt for their app.
* Fixed bug where only a portion of screens appears in drop-down menu.

#### March 3, 2026

* [Color Schema](/ai/app-design/color-schema) settings added.
* Enabled AI-generated code to access the device camera.

#### February 25, 2026

* Thunkable AI full release
* Fixed bug where permissions blocked some app publications to the Google Play Store.

#### February 23, 2026

* Improvement to mobile web layout
* Added an option to set the Version code on AI projects when [publishing the app on Android](https://aidocs.thunkable.com/publishing/android-publishing#download-your-android-app-bundle-aab-file).

#### December 16, 2025

* Thunkable AI released for beta testing.


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

***

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

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

***

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

***

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

***

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

***

### 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:\
   \&#xNAN;*“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.

***

## Additional Help Options

We are proud to offer you the following resources:

1. [**Thunkable Academy**](https://academy.thunkable.com/)\
   Not sure where to get started? Check out the Thunkable Academy!
2. [**Thunkable Community**](https://community.thunkable.com/)\
   Want to connect with other Thunkable Creators? Ask a question and join the conversation in the Community!
3. [**Instructional Videos**](https://www.youtube.com/@Thunkable)\
   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.&#x20;

<div align="left" data-full-width="false"><figure><img src="/files/Chw6n8xVkthBBsOZ2MCx" alt="Our help icon contains resources for all of your support and learning needs." width="287"><figcaption><p>The help icon contains resources for all of your support and learning needs.</p></figcaption></figure></div>

***

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

:robot: 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 Pricing](https://thunkable.com/pricing).

{% hint style="success" %}
**Have feedback on our Docs?** Please take a moment to share your feedback here: [Thunkable Docs Feedback](https://docs.google.com/forms/d/e/1FAIpQLSfCwn5L2xyla-LSLZX0DSWFcFeJ43qp-r1tELCacuVS2zduLA/viewform?usp=sf_link). Your valuable insights will help us improve and better serve you in the future.
{% endhint %}


# Help

## Help Options

We are proud to offer you the following resources:

1. [**Thunkable Academy**](https://academy.thunkable.com/)\
   Not sure where to get started? Check out the Thunkable Academy!
2. [**Thunkable Community**](https://community.thunkable.com/)\
   Want to connect with other Thunkable Creators? Ask a question and join the conversation in the Community!
3. [**Instructional Videos**](https://www.youtube.com/@Thunkable)\
   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.&#x20;

<div align="left" data-full-width="false"><figure><img src="/files/Chw6n8xVkthBBsOZ2MCx" alt="Our help icon contains resources for all of your support and learning needs." width="287"><figcaption><p>The help icon contains resources for all of your support and learning needs.</p></figcaption></figure></div>


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

***

### Create Your First App

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

#### 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.&#x20;

> 📘 See our[ AI Project Generator](https://docs.thunkable.com/getting-started/gen-ai/ai-template-generator) Docs

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

***

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

### **The Design Editor**

Designing the visual aspect of your app is accomplished with screens, [user interface (UI) components](/app-design/ui-components), and [navigators](/app-design/screens-and-navigators). You can combine, style and customize them to give your app personality and style that best suits your brand.​

{% @arcade/embed flowId="45waGxDSTGEy7WuYCfJT" url="<https://app.arcade.software/share/45waGxDSTGEy7WuYCfJT>" %}

### **The Blocks Editor**

Thunkable [blocks](/blocks/thunkable-blocks-overview) 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.

{% @arcade/embed flowId="nG71Y4lFtK06IfnPPmkt" url="<https://app.arcade.software/share/nG71Y4lFtK06IfnPPmkt>" %}

***

### Preview and Test Your App

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

* Use the [**Live Test**](/getting-started/live-test) button in the top-right corner to open a web preview.
  \*
* Download the [**Thunkable Live**](https://thunkable.com/mobile) mobile app on iOS or Android to test directly on your phone.
* You can also [**publish**](/publishing/publish) **your app** to the web or to app stores once it’s ready.

{% @arcade/embed flowId="jFbL6dHnRgiDmd0UAhEj" url="<https://app.arcade.software/share/jFbL6dHnRgiDmd0UAhEj>" %}

***

### Next Steps

Here are some great ways to keep learning:

* 📘 View tutorials in the [Thunkable Academy](https://academy.thunkable.com/)
* 💬 Join the [Community Forums](https://community.thunkable.com/)
* :tv: Check out our [YouTube](https://www.youtube.com/@Thunkable) page

{% hint style="success" %}
**Have feedback on this doc?** Please take a moment to share your feedback here: [Thunkable Docs Feedback](https://docs.google.com/forms/d/e/1FAIpQLSfCwn5L2xyla-LSLZX0DSWFcFeJ43qp-r1tELCacuVS2zduLA/viewform?usp=sf_link). Your valuable insights will help us improve and better serve you in the future.
{% endhint %}


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


# AI tools

### Overview <a href="#overview" id="overview"></a>

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.&#x20;

### AI Chatbot Helper <a href="#ai-text-generator" id="ai-text-generator"></a>

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 <img src="/files/xB0K9PYpUrLILwUos7fN" alt="" data-size="line"> icon&#x20;
3. Enter your question in the chat window.

<figure><img src="/files/EfleZ5VUoww0ffkspila" alt=""><figcaption></figcaption></figure>

### AI Debugger <a href="#ai-text-generator" id="ai-text-generator"></a>

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 <img src="/files/2kUc6b2s0k5fkmUQ8OTr" alt="" data-size="line"> icon
4. Turn the AI Debugger switch to true

<figure><img src="/files/Zg3ISAMtCHPYEVcMUZO1" alt=""><figcaption></figcaption></figure>

### Token Usage <a href="#ai-text-generator" id="ai-text-generator"></a>

All AI-powered features require tokens to operate. The number of tokens available depends on your [Thunkable plan](https://thunkable.com/pricing). You can see how many tokens you have used in the [omnibar](https://docs.thunkable.com/getting-started/gen-ai/omnibar) bottom, after selecting an AI tool.

| AI tool               | Token Cost Per Use |
| --------------------- | ------------------ |
| Chatbot Helper        | \~ 200             |
| Style AI              | \~ 500             |
| AI Debugger           | \~ 300             |
| AI Image Generation   | \~ 400             |
| AI Text Generation    | \~ 100             |
| AI Template Generator | \~ 1000            |
| AI Edit Mode          | \~ 200             |


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

***

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

***

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

***

### How It Works

#### 1. Go to the Thunkable project dashboard

Go to your [Thunkable project dashboard](https://x.thunkable.com/).

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

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

<div><figure><img src="/files/f42smPvN80wgeB4s2ngW" alt=""><figcaption></figcaption></figure> <figure><img src="/files/3io4JYeAmGyMCuraJutp" alt=""><figcaption></figcaption></figure></div>

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

***

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

***

### Frequently Asked Questions

#### Can I edit everything the AI creates?

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

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

#### How many screens does the AI generate?

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

#### Can I use this on a Free plan?

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

***

### What’s Next?

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

* Add more [Blocks](/blocks/thunkable-blocks-overview) to your project
* Add more [screens](/app-design/screen) or additional [UI components](/app-design/ui-components)
* Connect to [data sources](/getting-started/data-sources)
* Publish to the App Store or Google Play ([paid plan](https://thunkable.com/pricing) required)
* [Share](/settings/manage-your-projects/share-1) 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 now](https://x.thunkable.com/)


# 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 Debugge*r, *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.

{% hint style="warning" %}
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 [token usage](/getting-started/gen-ai/ai-tools#ai-text-generator-3) guide for details.
{% endhint %}

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

### Omnibar in the Design Tab

#### Icon Overview

| Icon                                                            | Name          | Description                                                                           |
| --------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------- |
| <img src="/files/06EUgeUKh34p5G2AdPcc" alt="" data-size="line"> | Select        | Use this tool to select and interact with components on the screen.                   |
| <img src="/files/7zvYn2ggk47vAeYZwI3a" alt="" data-size="line"> | Pan           | Click and drag to move around the canvas. Helpful for navigating large projects.      |
| <img src="/files/L5x7hdfwXswz4TxBrpPz" alt="" data-size="line"> | Zoom In       | Zoom in to get a closer view of your project layout.                                  |
| <img src="/files/qgQKBQMUq8iFJ4jGh30h" alt="" data-size="line"> | Zoom Out      | Zoom out to get a broader view of your project layout.                                |
| <img src="/files/H3HskCgvNobl1hBa1bt8" alt="" data-size="line"> | Fit to Screen | Automatically adjusts zoom to fit the entire currently selected screen on the canvas. |

In the Design tab, clicking the AI tools icon <img src="/files/ObTgqkbDz85miiQ7dcGs" alt="" data-size="line">, opens a menu of AI tools focused on layout, UI, and content creation:

<figure><img src="/files/m6FUB4ay9YjnGcz9eEO6" alt=""><figcaption></figcaption></figure>

| 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  | Improve or reword text on labels, buttons, or other UI components. |

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

### 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 <img src="/files/ObTgqkbDz85miiQ7dcGs" alt="" data-size="line"> 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!

<figure><img src="/files/5qA0iEzbMqakK9XGYxnb" alt=""><figcaption></figcaption></figure>


# 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.&#x20;

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.                                                               &#x20;

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

### Key Benefits

* Instant block creation based on natural language instructions.&#x20;
* Accessible anytime via the Blocks tab in your project.&#x20;
* AI finds and inserts blocks for you.
* Conversation-friendly, so you can continue asking for new features as needed.&#x20;

### How it Works

To use the AI Editor to generate blocks:

* Open your project
* Go to the Blocks tab
* Click the AI icon

<div align="left"><figure><img src="/files/KL13C94gPn8NBdIM1lii" alt="" width="131"><figcaption></figcaption></figure></div>

* Describe the functionality you need

<div align="left"><figure><img src="/files/YZ37wV2Kn2sQ4ojMSCKy" alt="" width="375"><figcaption></figcaption></figure></div>

* Keep interacting, asking for additions, or more features. <br>

### 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
* 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

{% hint style="info" %}
Using AI features requires tokens. You can check your token balance in the lower-left corner of your project screen.&#x20;
{% endhint %}


# AI Text and Image Generation

{% hint style="warning" %}
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 [token usage](/getting-started/gen-ai/ai-tools#ai-text-generator-3) guide for details.
{% endhint %}

## Overview

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

## AI Text Generator&#x20;

Get a first draft of your app's text fast with AI text generation.&#x20;

### Generate AI Text Directly in the Designer

1. Drag a label component onto a project screen.
2. Click the AI Text Editor icon <img src="/files/snjMqFAVa4Jr841XruH0" alt="" data-size="line">
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.&#x20;
6. Click **Return** to generate a fresh text suggestion.

For more on working with the label component, see here: [Label Component](/app-design/ui-components/basic-components/label).

## AI Image Generator &#x20;

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

### Generate an AI Image Directly in the Designer

1. Drag an image component onto a project screen.
2. Click the Generate Image icon <img src="/files/XUreWBJZTAwVUZcNNXeL" alt="" data-size="line">
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.&#x20;
7. Click **Return** to generate fresh image suggestions.

&#x20;For more on working with the image component, see here: [Image Component](/app-design/ui-components/basic-components/image-1).

## AI Image Editor &#x20;

With a simple text prompt, edit an image in your project.&#x20;

### 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 <img src="/files/DNrdEvb1Ru8Hw2KosAzf" alt="" data-size="line">
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.&#x20;
8. Click **Return** to generate fresh image suggestions.


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

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

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

### 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
5. Read the response
6. Ask follow-up questions.<br>

### 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?&#x20;

### 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.&#x20;

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.&#x20;

{% hint style="info" %}
AI features require tokens to operate. You can view your token balance in the lower-left corner of your project screen.
{% endhint %}


# Prompt Engineering

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

## 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 <img src="/files/ObTgqkbDz85miiQ7dcGs" alt="" data-size="line"> 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 <img src="/files/SxwILSscC3mn2ou58RrQ" alt="" data-size="line"> and enter your prompt in the pop-up.
   * For generating **images**, click on an **Image** component, click the Generate Image icon <img src="/files/8J0TQXHJvLmOJmS2sX3S" alt="" data-size="line"> 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.

<div><figure><img src="/files/RR2c6mgb6NwzVDX8CUFd" alt="" width="278"><figcaption><p>AI tools Omnibar</p></figcaption></figure> <figure><img src="/files/bis4PvlYsVop62KRhj4E" alt="" width="277"><figcaption><p>Label Component</p></figcaption></figure> <figure><img src="/files/oSnkMxoyAHlpOxVm5ANc" alt="" width="275"><figcaption><p>Image Component</p></figcaption></figure></div>

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

{% tabs %}
{% tab title="Text Generator" %}
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).&#x20;
{% endtab %}

{% tab title="Image Generator" %}
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.
{% endtab %}
{% endtabs %}

***

## 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](/getting-started/gen-ai/ai-project-generator)


# Keyboard Shortcuts

## Overview

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

### Design Tab

<figure><img src="/files/NaSbW3saptb6uHCaOu0m" alt=""><figcaption></figcaption></figure>

### Blocks Tab

<figure><img src="/files/F0i1Vl7iQ3B5T0GQCmFa" alt=""><figcaption></figcaption></figure>

## Keyboard Shortcuts

<table><thead><tr><th width="167">Shortcut</th><th width="326">Expected Behavior</th><th width="130">Design Tab</th><th>Blocks Tab</th></tr></thead><tbody><tr><td><p>T</p><p><br></p></td><td>Toggle between the Design and Blocks tabs.</td><td>✅</td><td>✅</td></tr><tr><td>P</td><td>Web Preview. Equivalent to clicking the Web Preview icon.</td><td>✅</td><td>✅</td></tr><tr><td>Esc </td><td>When in Web Preview, the equivalent of clicking Back to editing.</td><td>✅</td><td>✅</td></tr><tr><td>F</td><td>Access the Designer's Focus tool.<br><img src="/files/HrVo1Y3CV3n0pcsMWQJp" alt=""></td><td>✅</td><td><br></td></tr><tr><td>D</td><td>Live Test on Device. Equivalent to clicking the Live Test icon.<img src="/files/ryWkFM7mZTqocWoccPDb" alt=""></td><td>✅</td><td>✅</td></tr><tr><td><p>Press and hold spacebar + drag cursor</p><p></p><p>Mac touchpad:</p><p>Press and hold spacebar + two-finger move cursor </p></td><td><p>Pan around the screen. </p><p><img src="https://lh3.googleusercontent.com/5mXSuvjGvYffWCH_PQwj43tzPpQK5EjlCrYcUxG_eQjijt8BZOI2Uz--weYFzSgYu7gII5VN8RXJ8esc6N2bc5MEYDGMBTvtPvEHW37oYPti8qCdqTEpN36hWwEAQdZ2sQMQ4XOwWuF1GxGIq2hbKc8" alt=""></p><p></p><p>Note: The cursor must remain in the screen area in order to continue panning. </p></td><td>✅</td><td><br></td></tr><tr><td>⌘ + C</td><td>Copy screens, components, and blocks.</td><td>✅</td><td>✅</td></tr><tr><td>⌘ + V</td><td>Paste copied screens, components, and blocks.</td><td>✅</td><td>✅</td></tr><tr><td>Arrow keys</td><td>Move the selected UI component—small nudge.</td><td>✅</td><td></td></tr><tr><td>Shift + arrow keys</td><td>Move the selected UI component—larger nudge.</td><td>✅</td><td></td></tr><tr><td>⌘ + K</td><td>Toolbox search in Blocks tab.</td><td></td><td>✅</td></tr><tr><td>⌘ + F</td><td>Workspace search in Blocks tab.</td><td></td><td>✅</td></tr><tr><td>⌘ + ⬆</td><td>Select the previous component in the component tree.</td><td>✅</td><td></td></tr><tr><td>⌘ + ⬇</td><td>Select the next component in the component tree.</td><td>✅</td><td></td></tr><tr><td>⌘ + ⬅</td><td>Go to previous screen.</td><td>✅</td><td>✅</td></tr><tr><td>⌘ + ⮕</td><td>Go to next screen.</td><td>✅</td><td>✅</td></tr><tr><td>Delete or Backspace</td><td>Delete selected component.</td><td>✅</td><td>✅</td></tr><tr><td>⌘ + Z</td><td>Undo</td><td>✅</td><td>✅</td></tr><tr><td><p>⌘ + Y or</p><p>⌘ + Shift + Z</p></td><td>Redo</td><td>✅</td><td>✅</td></tr></tbody></table>

{% hint style="info" %}
“⌘” should be replaced with “Ctrl” for non-macOS environments.
{% endhint %}


# Undo Redo

## Overview

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

#### Keyboard Shortcuts

| Shortcut                             | Expected Behavior | Design Tab | Blocks Tab   |
| ------------------------------------ | ----------------- | ---------- | ------------ |
| ⌘ + Z                                | Undo              | ✅          | <p>❌<br></p> |
| <p>⌘ + Y or </p><p>⌘ + Shift + Z</p> | Redo              | ✅          | <p>❌<br></p> |

{% hint style="info" %}
“⌘” should be replaced with “Ctrl” for non-macOS environments.
{% endhint %}

#### Supported Cases

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

* component addition
* component renaming
* component positioning
* component resizing
* component removal
* pasting components
* edits within the Component Tree (e.g., renaming, changing hierarchy, deletion)
* component movement into Layout containers
* screen component addition or deletion
* screen deletion
* navigator addition or deletion
* connecting Data Source in the DVL/DVG dropdown.

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


# Thunkable Account

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

## **Sign Up**

To get started with Thunkable, visit our [sign up](https://x.thunkable.com/signup) page.&#x20;

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.&#x20;

We recommend using a Google or Apple account, which will make testing your app easier.

<figure><img src="/files/IsxQZzstpCwBW0GXZLjY" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/p9NeUQWqEBXdiT6Z6zIe" alt=""><figcaption></figcaption></figure>

If you choose to sign up with email, you will be sent an email like the image below.&#x20;

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.

<div align="left"><figure><img src="/files/w8mDDY39Svw16owEQfyi" alt=""><figcaption></figcaption></figure></div>

## **Sign In**‌

Returning users can go directly to our [sign in](https://x.thunkable.com/login) page to sign back into their Thunkable account.&#x20;

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

### **Sign in with Google**

This button will sign you in automatically with your Google account.&#x20;

### Sign in with Apple

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

### **Sign in with Email**

If you click **Sign in with email** you will be invited to type your email address in a text input.

When you click **Email me the link** we will send you a link that will sign you back into your account.


# Account Management

## Upgrade Your Account <a href="#h_f2813e613e" id="h_f2813e613e"></a>

To upgrade your account:

1. Click your **account avatar** in the upper right.

   <div align="left"><figure><img src="/files/vyZctwFCGoLXlS2FPv0H" alt="" width="137"><figcaption></figcaption></figure></div>
2. Select **Membership**.
3. Click **Change Plan**.
4. Choose your new plan.
5. Confirm your selection.

{% hint style="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.
* PayPal - the entire cost of the new plan is charged, and a refund will be issued for the difference in fees.
  {% endhint %}

## Downgrade Your Account <a href="#h_48335c466c" id="h_48335c466c"></a>

To downgrade your paid account plan to free:&#x20;

1. Click your **account avatar** in the upper right.

   <div align="left"><figure><img src="/files/vyZctwFCGoLXlS2FPv0H" alt="" width="137"><figcaption></figcaption></figure></div>
2. Select **Membership**.
3. Click **Change Plan**.
4. Choose the free plan.
5. Confirm your selection.

{% hint style="success" %}
You will continue to have access to your plan for the remainder of your payment period.
{% endhint %}

{% hint style="warning" %}
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.&#x20;
{% endhint %}

## Change Account Email Address <a href="#h_d74aeff2c6" id="h_d74aeff2c6"></a>

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

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

1. In your old account, generate share links for the projects you want to transfer. Learn more here: [Share a Fully Editable Copy of Your App Project.](https://docs.thunkable.com/settings/manage-your-projects/share-1#share-a-fully-editable-copy-of-your-app-project)
2. Use a private or incognito browser window to create a new Thunkable account with the desired email address.
3. Open the share links in the private or incognito browser window.

{% hint style="warning" %}
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: [Export and Import a Keystore](https://docs.thunkable.com/publishing-apps/publish-to-play-store-android#exporting-importing-a-keystore-to-your-app).
{% endhint %}

{% hint style="info" %}
Your Thunkable Community account history cannot be transferred to the new email address.
{% endhint %}

## Access Invoices <a href="#h_d74aeff2c6" id="h_d74aeff2c6"></a>

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

### Credit Card <a href="#h_d75144e3af" id="h_d75144e3af"></a>

1. Click your **account avatar** in the upper right.
2. Select **Membership**.
3. In the Billing history section, click **PDF** to view and/or print your monthly invoices.

### PayPal <a href="#h_015f5b0503" id="h_015f5b0503"></a>

1. Sign into your PayPal account.
2. Navigate to your PayPal dashboard.
3. Click to view and/or print your monthly invoices.

## Request a Refund <a href="#h_15ce6d996d" id="h_15ce6d996d"></a>

To be eligible for a refund, you must:

* Have not published an app to iOS, Android, or the web during that billing period.&#x20;
* Provide reasoning as to why you are requesting a refund.&#x20;

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

## Change Platform Language

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

1. Click your **account avatar** in the upper right.

   <div align="left"><figure><img src="/files/vyZctwFCGoLXlS2FPv0H" alt="" width="137"><figcaption></figcaption></figure></div>
2. Select **Settings**.
3. Select from language options.

   <div align="left"><figure><img src="/files/TGuG2VK1BRtO5yOJoEJS" alt="" width="563"><figcaption></figcaption></figure></div>

{% hint style="info" %}
You can use Google Chrome to translate the Thunkable Designer by following the instructions here: [Change Chrome languages & translate webpages](https://support.google.com/chrome/answer/173424?co=GENIE.Platform%3DDesktop\&hl=en).
{% endhint %}


# Preview and Test your App

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

## Overview

There are two ways to test and preview your Thunkable app: Web Preview in your computer's browser or on your mobile device with the Thunkable Live app. These tools aren't designed to check for errors but to allow you to preview your app's design and test its functionality in real time.

## Web Preview

You can test and preview your project directly within your browser. This is a great option when designing your app's user interface and building out the app's functionality with blocks.

<div align="left"><figure><img src="/files/JzpdbBq3psnHix2W2Bms" alt=""><figcaption></figcaption></figure></div>

<div align="left"><figure><img src="/files/C9vHXphOIJIgBkEM8VSh" alt=""><figcaption></figcaption></figure></div>

It is important to note, however, that Web Preview does not support some app features. This is because some app features require functionality only available on a mobile device, such as push notifications, accelerometer, and Bluetooth low energy. For a full list of features that cannot be tested with Web Preview, please see here: [Publish as a Web App](/publishing/publish-as-a-web-app-pro#unsupported-components).

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

![](/files/NROkJfCsIfCXyodXI8b2)

## **Thunkable Live App**

The Thunkable Live app connects the projects in your web browser to your mobile device. It allows you to preview and test your projects directly on your device. Any changes you make in your browser are displayed on your device immediately. You can also take your project on the go and show it off with the Thunkable Live app.

### **Video Tutorial**

#### How to Test and Troubleshoot with Thunkable Live App

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

{% embed url="<https://youtu.be/ucfNl2517VA>" %}

### **Download the Thunkable Live App**

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

If you don't have an iOS or Android device, you can also [set up an emulator](/additional-resources/emulators) on your computer that mimics what you would see on an actual device.‌

### **Testing and Previewing with Thunkable Live**

1. Open your project in your web browser.
2. Click the **Live Test on Device** icon.<br>

   <div align="left"><figure><img src="/files/PbiFgGBgjKFvkR3gAWWm" alt=""><figcaption></figcaption></figure></div>
3. If you're **signed in to Thunkable with Google**:
   1. Open the **Thunkable Live** app on your device.
   2. &#x20;Sign in with the same **Google** **account**.&#x20;
4. If you're **signed in to Thunkable with email**:
   1. Click **Enter my code**.
   2. Open the Thunkable Live app on your device.
   3. Click **Email sign in - Generate test code.**<br>

      <div align="left"><img src="/files/-MY3ixpqQm9hsQY4_Unn" alt="" width="188"></div>
   4. A test code is displayed on your device screen. Enter it into the provided field on your web browser. <br>

      <div align="left"><figure><img src="/files/d9Pgqq3ldfK0StU8eUiM" alt="" width="375"><figcaption></figcaption></figure></div>
   5. Click **Connect**.
5. Select the app you want to open from your list of Thunkable projects.<br>

   <div align="left"><figure><img src="/files/6i9bOcIADbbJF8QDBtnr" alt="" width="188"><figcaption></figcaption></figure></div>

### 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.&#x20;
* You cannot add a border to an image component containing a .gif asset.&#x20;
* If your app sets a text input's text to upper case, test with a device other than Samsung.&#x20;
* 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.&#x20;
* You may have an event triggered by a Screen. Start block, which may be causing the screen to crash.

#### **If changes that you make cause the app to crash...**

* Close the app and reopen it.&#x20;

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


# Versioning

## Overview&#x20;

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.&#x20;

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: [Thunkable pricing](https://thunkable.com/pricing).

## Video Tutorial

### How to Save Versions of Your Thunkable Project

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

{% embed url="<https://youtu.be/CXtBrjJ8Fw8>" %}

## 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:&#x20;

1. Access the **Design** tab of your project.&#x20;
2. Click the **Version History** clock icon in the upper right.\
   ![](/files/HORxFaB389tZNcIoyyZq)

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

### Version actions&#x20;

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

#### Restore&#x20;

The Restore option reverts your current project to this version.&#x20;

## Manual versioning

### Create an app version&#x20;

To save a version of your project:&#x20;

1. Access the **Design** tab of your project.&#x20;
2. Click the **Version History** clock icon in the upper right.\
   ![](/files/ozwk0dGPHDi4KDcWO4ir)
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.&#x20;
4. To change the name of a version, click in the version name field and type your preferred version name.

### Version actions&#x20;

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

#### Restore&#x20;

The Restore option reverts your current project to this version.&#x20;

#### Save As&#x20;

The Save As option saves that version as a new project. Select a name for your new project and then click Create. The newly created project is now available on your Projects Page, and the version will remain within the existing project.

#### Delete

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

## Additional considerations&#x20;

* If you downgrade your subscription plan, you will lose your oldest versions up to your new limit.&#x20;
* 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.


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

## 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.&#x20;

You can choose one of the following data sources:

{% content-ref url="/pages/fui2mXCzMYnfgbHduy2c" %}
[Google Sheets Data Source](/getting-started/data-sources/data-sources)
{% endcontent-ref %}

{% content-ref url="/pages/B9H4UP61BFET8f8FJwG3" %}
[Airtable Data Source](/getting-started/data-sources/data-sources-1)
{% endcontent-ref %}

{% content-ref url="/pages/S2dbMcSozVJWbrgEfjf4" %}
[Local Table Data Source](/getting-started/data-sources/data-sources-3)
{% endcontent-ref %}

## 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.&#x20;
3. You can select from previously added data sources or add a new data source. Click **Create New**.
4. Follow the data source-specific instructions to complete the connection:\
   \- [Google Sheets](/getting-started/data-sources/data-sources#connect-your-app-to-google-sheets)\
   \- [Airtable](/getting-started/data-sources/data-sources-1#connect-your-app-to-airtable-by-api-key)\
   \- [Local Table](/getting-started/data-sources/data-sources-3#create-a-local-data-source)

{% hint style="info" %}
You can also connect a data source in a data viewer's properties panel. Learn more here: [Data Viewer Components](/app-design/ui-components/data-components/data-viewers).
{% endhint %}

## Add Filter View

1. Open a data source.

<div align="left"><figure><img src="/files/cuyM2Oq4w2oFsBXIPB17" alt="" width="269"><figcaption></figcaption></figure></div>

2. Click **Add Filter View.**

<div align="left"><figure><img src="/files/NVDumESAqJoT3FgVW4Df" alt="" width="538"><figcaption></figcaption></figure></div>

3. Add one or more filter rules.

<div align="left"><figure><img src="/files/P4Kb35jWGTqGSJDJWQ4n" alt="" width="538"><figcaption></figcaption></figure></div>

4. Click **Create Filter View.**

<div align="left"><figure><img src="/files/JTHAeIZnY4KxFbZVJizy" alt="" width="553"><figcaption></figcaption></figure></div>

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

<div align="left"><figure><img src="/files/mcJfofRw8wa2zm2f8pW5" alt="" width="225"><figcaption></figcaption></figure></div>

## Sort

1. Open a data source.

<div align="left"><figure><img src="/files/HNSundDPoijB1aqTCCQf" alt="" width="563"><figcaption></figcaption></figure></div>

2. Click on a **Filter View.**

<figure><img src="/files/sTuz5c66izvR691YTvBY" alt=""><figcaption></figcaption></figure>

3. Click Sort icon.

<figure><img src="/files/KaIYqz2eXaeGlq0JfB20" alt=""><figcaption></figcaption></figure>

4. Select column.

<figure><img src="/files/NBPQIEjVDKemN59xQ5JF" alt=""><figcaption></figcaption></figure>

5. Select **Ascending** or **Descending**.

<figure><img src="/files/yxLUSrpMjoHN7sF5yOOL" alt=""><figcaption></figcaption></figure>

## Delete a Data Source

There are multiple methods to delete a data source.

### Method 1 - project's data source library

1. Open the project.
2. Click the **data icon** in the left side panel to access your project's data source library.
3. Click the **trash can** icon next to a data source you want to delete.\
   \
   ![](/files/dm2eFEr0pOORQAHYqdNy)

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

   <figure><img src="/files/3eap27R2bkqqj2fCOqI1" alt=""><figcaption></figcaption></figure>

## Related Docs

### Data Viewer Components

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

{% content-ref url="/pages/-MHHWq20P-EQjZx71iiZ" %}
[Data Viewer Components](/app-design/ui-components/data-components/data-viewers)
{% endcontent-ref %}

### 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.&#x20;

{% content-ref url="/pages/qsE75UbrqDiw4ZpStagv" %}
[Data Sources Blocks](/blocks/app-features/data-sources-blocks)
{% endcontent-ref %}

***

{% hint style="success" %}
**Have feedback on this doc?** Please take a moment to share your feedback here: [Thunkable Docs Feedback](https://docs.google.com/forms/d/e/1FAIpQLSfCwn5L2xyla-LSLZX0DSWFcFeJ43qp-r1tELCacuVS2zduLA/viewform?usp=sf_link). Your valuable insights will help us improve and better serve you in the future.
{% endhint %}


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

## Overview

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

In Google Sheets, the entire document is considered to be the data source. To use a Google Sheet as a data source, the following must be true:

* The first row in your sheet must be a header row, and every column must have a header.
* Your Google Sheet must be [sharable](https://support.google.com/docs/answer/2494822?hl=en\&co=GENIE.Platform%3DDesktop) so that Thunkable can access the data.&#x20;

## Video Tutorial

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

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

{% embed url="<https://youtu.be/0YsorQtDsvc>" %}

## 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.&#x20;
3. You can select from previously added data sources or add a new data source. Click **Create New**.
4. Select **Google Sheets**.&#x20;
5. Sign in to your Google account and grant permission for your Thunkable accoumt to access your Google Drive.<br>

   <div align="left"><img src="/files/-M5WVsV-XrpMPfzSGb1P" alt="" width="563"></div>
6. Click **Select a Sheet.**
7. Select your spreadsheet.<br>

   <div align="left"><img src="/files/-M5WW49s_8UHw3NCjWZs" alt="" width="563"></div>
8. Click **Select**.
9. Rename the data source, if you’d like.&#x20;
10. Indicate which row your column headers are in and which row is the first to contain data.
11. Click **Create**.&#x20;
12. Refresh your page to ensure the data is reflected in web preview or via the Thunkable Live app.

{% hint style="warning" %}
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.&#x20;
{% endhint %}

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

<div align="left"><img src="/files/-MHpBn0p_e2Fs7u99yPu" alt=""></div>

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

{% content-ref url="/pages/-MHHWq20P-EQjZx71iiZ" %}
[Data Viewer Components](/app-design/ui-components/data-components/data-viewers)
{% endcontent-ref %}

## Reset Your Google Sheets Connection

### Hard Refresh Your Browser

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

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

#### Windows <a href="#h_214873c77d" id="h_214873c77d"></a>

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

#### Mac <a href="#h_9a324e5df7" id="h_9a324e5df7"></a>

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

### Reset Thunkable - Google Connection

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

#### Reset from Thunkable

1. Login to your Thunkable account.
2. On your Projects Page, click **Data Sources** in the left sidebar.
3. Click the **trash can icon** to delete the Google Sheets data source.<br>

   <figure><img src="/files/0uVsg5fG4IkWktYKcKqZ" alt=""><figcaption></figcaption></figure>

#### 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/security>
2. Scroll to the **Your connections to third-party apps & services** section.
3. Click the **Thunkable** connection.&#x20;
4. In the "Thunkable has some access to your Google Account" section, click **See details.**<br>

   <figure><img src="/files/5XFlA1zx5sVp2RWMVCXt" alt=""><figcaption></figcaption></figure>
5. Click **Remove Access**.<br>

   <figure><img src="/files/0vUNUrMz0rmT1f4mCWGE" alt=""><figcaption></figcaption></figure>
6. Return to Thunkable and re-connect to your Google Sheets account.<br>

***

{% hint style="success" %}
**Have feedback on this doc?** Please take a moment to share your feedback here: [Thunkable Docs Feedback](https://docs.google.com/forms/d/e/1FAIpQLSfCwn5L2xyla-LSLZX0DSWFcFeJ43qp-r1tELCacuVS2zduLA/viewform?usp=sf_link). Your valuable insights will help us improve and better serve you in the future.
{% endhint %}


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

## 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 [Airtable](https://www.airtable.com/) as the data source.

{% hint style="info" %}
Effective February 1, 2024, Airtable no longer supports connecting via API key. You must connect your Thunkable project to Airtable via OAuth.
{% endhint %}

## 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.&#x20;
4. You can select from previously added data sources or add a new data source. Click **Create New**.
5. Select **Airtable**.&#x20;
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. <br>

   <div data-gb-custom-block data-tag="hint" data-style="info" class="hint hint-info"><p>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.</p></div>
10. Click **Grant access**.<br>

    <div data-gb-custom-block data-tag="hint" data-style="info" class="hint hint-info"><p>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. </p></div>
11. Select the correct base from the dropdown menu.
12. Indicate if you'd like to use a custom view. Learn more here: [Use a Custom View](#use-a-custom-view).
13. Click **Create**.
14. Refresh your page to ensure the data is reflected in web preview or via the Thunkable Live app.

{% hint style="success" %}
Once you've connected your Airtable account to your Thunkable account via OAuth, API keys are no longer used.
{% endhint %}

## Use a Custom View&#x20;

In Airtable, a table is similar to a sheet in a spreadsheet. You can have multiple tables within your Airtable base, and each table can have multiple views. A view indicates how the data is presented within the table. For example, you can use views to show only specific fields or records and apply other configurations to manage the information in that view. The initial default view for an Airtable table is the grid view.

When connecting an Airtable base as your Thunkable project’s data source, you can select a custom view instead of the default grid view. This will apply only to the first table in your base. For subsequent tables, Thunkable will use the default grid view. If you have a base with two tables and the second table has a custom view, you can reorder the tables within the base in Airtable so that the custom view is applied to the correct table.

## Authorization Header For Block

{% hint style="info" %}
This block is only necessary for Creators who use web API blocks to communicate with Airtable.
{% endhint %}

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.

<figure><img src="/files/5bGwTzO8ObOPzOLwfOpF" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
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 Browser](https://docs.thunkable.com/getting-started/data-sources/data-sources#hard-refresh-your-browser).
* Re-download or re-publish your app.
  {% endhint %}

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

{% content-ref url="/pages/-MHHWq20P-EQjZx71iiZ" %}
[Data Viewer Components](/app-design/ui-components/data-components/data-viewers)
{% endcontent-ref %}

## 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**

<div align="left"><figure><img src="/files/myXBTFygLXcUHqKMBuzj" alt="" width="267"><figcaption></figcaption></figure></div>

3. Click **Third-party integrations** and then **Thunkable**

<div align="left"><figure><img src="/files/0LXB30GMiSsP1bl4vflZ" alt="" width="563"><figcaption></figcaption></figure></div>

4. Click **Revoke access**

<div align="left"><figure><img src="/files/Sqox8P8rYlRWpCtASCEC" alt="" width="563"><figcaption></figcaption></figure></div>

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

<div align="left"><figure><img src="/files/eBnSzn5aO5q3jjpbFNFP" alt="" width="541"><figcaption></figcaption></figure></div>

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

<div align="left"><figure><img src="/files/nsegoKawdKHzTtx1ov4p" alt="" width="497"><figcaption></figcaption></figure></div>

<div align="left"><figure><img src="/files/6k6gR1ey5Fk0QgN33PRa" alt="" width="530"><figcaption></figcaption></figure></div>

***

{% hint style="success" %}
**Have feedback on this doc?** Please take a moment to share your feedback here: [Thunkable Docs Feedback](https://docs.google.com/forms/d/e/1FAIpQLSfCwn5L2xyla-LSLZX0DSWFcFeJ43qp-r1tELCacuVS2zduLA/viewform?usp=sf_link). Your valuable insights will help us improve and better serve you in the future.
{% endhint %}


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

{% hint style="warning" %}
The option of connecting a Webflow data source was removed. Because of changes to how the [Webflow API will function](https://developers.webflow.com/data/docs/migrating-to-v2), 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.
{% endhint %}

## Overview

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

When using Webflow as the data source for your Thunkable app, you’ll connect to a Webflow CMS or Content Management System collection. To connect your Webflow CMS to your Thunkable project, you have two options:

* API Key
* OAuth

## Video Tutorial

### How to Connect Your Thunkable App to a Webflow Data Source

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

{% embed url="<https://www.youtube.com/watch?v=4WLOPIP_WuY/?1>" %}

## 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.&#x20;
3. You can select from previously added data sources or add a new data source. Click **Create New**.
4. Select **Webflow**.&#x20;
5. Click the **API Key** tab.
6. In a separate browser tab, navigate to your Webflow site settings.
7. Click the **Integrations** tab.
8. Under the **API access** header, click **Generate API token**.&#x20;
9. Copy the Webflow API token.
10. Return to your Thunkable tab. <br>

    <div align="left"><figure><img src="/files/aAJqFjkcy56iKfzQpG2y" alt="" width="375"><figcaption></figcaption></figure></div>
11. Paste the copied Webflow API token into the corresponding field.&#x20;
12. Click **Refresh** to see your Webflow sites.&#x20;
13. Select the site you want to use as your data source.
14. Click **Create**.&#x20;
15. Refresh your page to ensure the data is reflected in web preview or via the Thunkable Live app.

{% hint style="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.
{% endhint %}

## 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.&#x20;
3. You can select from previously added data sources or add a new data source. Click **Create New**.
4. Select **Webflow**.&#x20;
5. Click the **OAuth** tab.<br>

   <div align="left"><figure><img src="/files/Wm5AD1rHHmC9PISlBxXo" alt="" width="375"><figcaption></figcaption></figure></div>
6. Click **Connect to Webflow**.
7. A Webflow authorization screen opens.
8. Select the sites or Workspaces you want to authorize access to.
9. Click **Authorize app**.<br>

   <figure><img src="/files/hbMA7q26ZdgQfv8lmMND" alt=""><figcaption></figcaption></figure>
10. Refresh your page to ensure the data is reflected in the web preview or via the Thunkable Live app.

{% hint style="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.
{% endhint %}

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

{% content-ref url="/pages/-MHHWq20P-EQjZx71iiZ" %}
[Data Viewer Components](/app-design/ui-components/data-components/data-viewers)
{% endcontent-ref %}

***

{% hint style="success" %}
**Have feedback on this doc?** Please take a moment to share your feedback here: [Thunkable Docs Feedback](https://docs.google.com/forms/d/e/1FAIpQLSfCwn5L2xyla-LSLZX0DSWFcFeJ43qp-r1tELCacuVS2zduLA/viewform?usp=sf_link). Your valuable insights will help us improve and better serve you in the future.
{% endhint %}


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

## Overview

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

## Video Tutorial

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

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

{% embed url="<https://youtu.be/2x52CJQsc9M>" %}

## 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.&#x20;
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.&#x20;
8. To modify the table's columns:
   * To **update** the table’s column headers, click their names and type a new header name.
   * To **add** additional columns, click the **+ New Column** button.
   * To **delete** columns, click the **x** in the column’s title box.
9. To modify the table's rows:
   * To **add** additional rows, with your cursor in the bottom row, press your keyboard’s enter or return key.&#x20;
   * 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.&#x20;
    * **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. <br>

      <div align="left"><figure><img src="/files/dXuFEZFFlqRbMBzH7Q6U" alt="" width="563"><figcaption></figcaption></figure></div>
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.&#x20;
    * Click the data source's name to review and **edit** the data.
    * Click the trash can icon to **delete** the data source from your project.<br>

      <div align="left"><img src="/files/NjohvYclyF4FIf29W4fp" alt="" width="375"></div>

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

{% content-ref url="/pages/-MHHWq20P-EQjZx71iiZ" %}
[Data Viewer Components](/app-design/ui-components/data-components/data-viewers)
{% endcontent-ref %}

***

{% hint style="success" %}
**Have feedback on this doc?** Please take a moment to share your feedback here: [Thunkable Docs Feedback](https://docs.google.com/forms/d/e/1FAIpQLSfCwn5L2xyla-LSLZX0DSWFcFeJ43qp-r1tELCacuVS2zduLA/viewform?usp=sf_link). Your valuable insights will help us improve and better serve you in the future.
{% endhint %}


# 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.&#x20;

{% content-ref url="/pages/nDeUAwyUjJ03RJ7cgnPP" %}
[Organizations](/getting-started/project-collaboration/organizations)
{% endcontent-ref %}


# Organizations

## 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.&#x20;

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.&#x20;

## Organization Management

{% hint style="info" %}
This feature may only be available for Creators on certain Thunkable plans. Please refer to our pricing page for more information: [Thunkable pricing](https://thunkable.com/pricing).
{% endhint %}

Thunkable Creators have:&#x20;

* roles with the organization (Admin or Member)
* permissions within a project (Project Owner, Editor, or Viewer)
* modes when actively within a project (Editing or Viewing)

### Roles and Permissions Summary

<table><thead><tr><th width="237">Action</th><th width="119">Org. Admin</th><th width="149">Project Owner</th><th>Editor</th><th>Viewer</th></tr></thead><tbody><tr><td>Add/Remove members</td><td><mark style="color:green;">Yes</mark></td><td>No</td><td>No</td><td>No</td></tr><tr><td>Publish</td><td>-</td><td><mark style="color:green;">Yes</mark></td><td><mark style="color:green;">Yes</mark></td><td>No</td></tr><tr><td>Share</td><td>-</td><td><mark style="color:green;">Yes</mark></td><td>No</td><td>No</td></tr><tr><td>Download</td><td>-</td><td><mark style="color:green;">Yes</mark></td><td><mark style="color:green;">Yes</mark></td><td>No</td></tr><tr><td>Access project settings</td><td>-</td><td><mark style="color:green;">Yes</mark></td><td><mark style="color:green;">Yes</mark></td><td>No</td></tr><tr><td>Grant Edit Access</td><td>-</td><td><mark style="color:green;">Yes</mark></td><td>No</td><td>No</td></tr><tr><td>Remix project</td><td>-</td><td><mark style="color:green;">Yes</mark></td><td><mark style="color:green;">Yes</mark></td><td>No</td></tr><tr><td>Duplicate project</td><td>-</td><td><mark style="color:green;">Yes</mark></td><td>No</td><td>No</td></tr><tr><td>Delete project</td><td>-</td><td><mark style="color:green;">Yes</mark></td><td>No</td><td>No</td></tr><tr><td>Figma import</td><td>-</td><td><mark style="color:green;">Yes</mark></td><td>No</td><td>No</td></tr><tr><td>Versioning</td><td>-</td><td><mark style="color:green;">Yes</mark></td><td>No</td><td>No</td></tr></tbody></table>

### Admin Dashboard

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

#### Access Admin Dashboard

1. Click your **profile image** in the upper right.
2. Select **Organizations**. <br>

   <div align="left"><figure><img src="/files/IhKsSHEAKn21Wzl6f6aK" alt="" width="144"><figcaption></figcaption></figure></div>
3. The Organizations page lists the organizations for which you hold admin status.

#### View Organization

1. Click an organization name.
2. The Members tab lists the organization’s members.&#x20;
3. The Projects tab lists the organization’s projects.

#### Add Member

1. Click **Add Member**.
2. Input the invitee’s email address.
3. Indicate their role (Admin or Member).&#x20;
4. Click **Add**.

#### Modify a Role

1. Navigate to the **Members tab** of the organization’s page.&#x20;
2. Click the **role dropdown** associated with the member.
3. Select the appropriate role (Admin or Member).

#### Remove a Member

1. Navigate to the **Members tab** of the organization’s page.
2. Click the **role dropdown** associated with the member.
3. Select **Remove**.
4. Confirm the removal.

## Assigning a Project to an Organization

### Creating a New Project in an Organization

When creating a new project, organization members can assign it to their own personal projects or the organization.&#x20;

Projects assigned to the organization can be collaborated on by members of the organization.&#x20;

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.

<figure><img src="/files/eqQeaigZElby1Nxb0bEx" alt=""><figcaption></figcaption></figure>

### 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...**<br>

   <div align="left"><figure><img src="/files/DM8kpaC0SfGddtoei6ME" alt="" width="250"><figcaption></figcaption></figure></div>
3. In the modal provided, give the project a name.
4. Use the dropdown menu to indicate which organization you want to copy the project into.
5. Click **Duplicate into Organization**.<br>

   <div align="left"><figure><img src="/files/2Q6gLW4UiEAOSqhoqxGT" alt="" width="375"><figcaption></figcaption></figure></div>
6. You are the owner of the newly created project in the selected organization. There are no other members with permissions on this project yet.

## Viewing and Editing Modes

When accessing organization projects, members are in one of two modes: editing or viewing. There can only be one project member in editing mode at any given time – all other organization members remain in viewing mode.&#x20;

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

<figure><img src="/files/fTKOXdSIXmX3vjKhB3OG" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}

### Transferring Editing Access

Only one project member can be in editing mode at a time.&#x20;

* 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.
  {% endhint %}

<div align="left"><figure><img src="/files/BJnkOJo9lbV0USxJD0Hv" alt=""><figcaption></figcaption></figure></div>

{% hint style="warning" %}
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.
{% endhint %}

## Sharing and Updating Permissions

To share a project with a user in your organization:

1. Click the **Share** icon.\
   ![](/files/1FcGefcWxa3QqFPM12Tb)
2. Select **Project Sharing**.&#x20;
3. Enter the **email address** of the user you want to add to the project
4. Assign the user a **permission level**: Editor or Viewer.&#x20;
5. Click **Add**.

To update the permissions of a user in your organization:

1. Click the **Share** icon.\
   ![](/files/1FcGefcWxa3QqFPM12Tb)
2. Click the user's existing permission level (EDITOR or VIEWER) and select Editor, Viewer, or Remove.&#x20;

## Collaborating with Comments

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

### Add Comments

To add a comment to a UI component:

1. Access the project’s Design tab.
2. Ensure you’re in **Editing** mode.&#x20;
3. Click the **Comment** icon to open the comment panel on the right.
4. Click to select a UI component on a screen or in the component tree.&#x20;
5. Type your comment in the provided text input field in the comment panel.
6. Click the **send** button.
7. To add comments to other UI components, repeat steps 4-6.&#x20;
8. Click the **Comment** icon to close the comment panel.

<figure><img src="/files/wK9v5E45xInbSDuuTrxX" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Each UI component is limited to 25 comments, and each comment has a maximum character count of 2000.
{% endhint %}

### View Comments

To view comments on a UI component:

1. Access the project’s Design tab.
2. Click the **Comment** icon to open the comment panel on the right.
3. Comments are grouped with the UI component they were added to.
   1. Comments are displayed in the order they were added, with the most recent comment appearing at the bottom of the UI component's comments.
   2. UI components with the most recent comments appear at the top of the comment panel, making it easier to find the most recent discussions.
4. Click the Comment icon to close the comment panel.

### Delete Comments

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

1. Access the project’s Design tab.
2. Ensure you’re in **Editing** mode.&#x20;
3. Click the **Comment** icon to open the comment panel on the right.
4. Locate the comment you want to delete.
5. Click the vertical ellipsis icon within the comment’s box.
6. Click **Delete**.
7. This cannot be undone. Click **Delete** to confirm the deletion of the comment.
8. Click the **Comment** icon to close the comment panel.

***

{% hint style="success" %}
**Have feedback on this doc?** Please take a moment to share your feedback here: [Thunkable Docs Feedback](https://docs.google.com/forms/d/e/1FAIpQLSfCwn5L2xyla-LSLZX0DSWFcFeJ43qp-r1tELCacuVS2zduLA/viewform?usp=sf_link). Your valuable insights will help us improve and better serve you in the future.
{% endhint %}


# Sample Apps & Tutorials


# 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!&#x20;

[Tutorials & DIY Guides](https://community.thunkable.com/c/thunkable-tutorials/56)

[Staff Written Tutorials](https://community.thunkable.com/c/thunkable-tutorials/staff-made-tutorials/83)


# Sample Apps

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

[Thunkable Inventory - Inventory Management](https://x.thunkable.com/projectPage/61ba4264b6b4c7001012d714)

[Book Reviews](https://x.thunkable.com/projectPage/624b7590f439290012a4edbc)

[Event Planner](https://x.thunkable.com/projectPage/627d84cc61a1ab0011c52bfe)

[Sign In + Sign Out](https://x.thunkable.com/projectPage/63c9d16183e6a8021b4bd1bd)

[Web API - Weather App](https://x.thunkable.com/projectPage/648ceab1ece0714ec526277e)

[ThunkableDoodle - drawing app](https://x.thunkable.com/projectPage/644157c7e2e173096fb38131)

[Image Recognizer](https://x.thunkable.com/projectPage/648f8146664db080d1223c37)

[Flashcard App](https://x.thunkable.com/projectPage/64c8221018c7393c9c6aaf01)

[Travel App](https://x.thunkable.com/projectPage/649b56e684a34251b5a5c95f)

[Quote Estimator](https://x.thunkable.com/projectPage/651f472b8e362b265a3f391d)

[Expense Tracker](https://x.thunkable.com/projectPage/65c4e806b38304c22f0de3e8)

[Landscape Material Calculator](https://x.thunkable.com/projectPage/65c6376b3d25cc6a18f56d7f)

[Building Materials Calculator](https://x.thunkable.com/projectPage/65cfbcd573d39c095cc15da3)

[Package Pickup - Customer](https://x.thunkable.com/projectPage/65cfbcfa73d39c095cc17771)

[Package Pickup - Driver](https://x.thunkable.com/projectPage/65cfbd0d73d39c095cc1d3ca)


# Video Tutorials


# Thunkable Live App


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

{% embed url="<https://youtu.be/ucfNl2517VA?feature=shared>" %}


# Data Source Tutorials


# Connecting to Data Sources


# 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: <https://docs.google.com/spreadsheets/d/1hMdJ1O-uekCi1_aT4OpWInk_bS_pvU3zouqYYXE2sn4/copy>

{% embed url="<https://youtu.be/0YsorQtDsvc?feature=shared>" %}


# Local Table

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

{% embed url="<https://youtu.be/2x52CJQsc9M?feature=shared>" %}


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

{% embed url="<https://youtu.be/mxyjQRv4aDg?feature=shared>" %}


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

{% embed url="<https://youtu.be/kXex673U2Aw?feature=shared>" %}


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

{% embed url="<https://youtu.be/ZvaW8YON2oU?feature=shared>" %}


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

{% embed url="<https://youtu.be/Ab66agEf3ok?feature=shared>" %}


# User Auth & Management


# Firebase


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

{% embed url="<https://youtu.be/aFL8iQCmPkM?feature=shared>" %}


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

{% embed url="<https://youtu.be/mia02mWYdpo?feature=shared>" %}


# Google


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

{% embed url="<https://youtu.be/ZABfkEwGPII?feature=shared>" %}


# Apple


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

{% embed url="<https://youtu.be/pnTwOOa864M?feature=shared>" %}


# Projects


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

{% embed url="<https://youtu.be/CXtBrjJ8Fw8?feature=shared>" %}


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

{% embed url="<https://youtu.be/1enOAJ0pyLY?feature=shared>" %}


# User Interface & Design


# Screens


# 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!

{% hint style="info" %}
This feature may only be available for Creators on certain Thunkable plans. Please refer to our pricing page for more information: [Thunkable pricing](https://thunkable.com/pricing).
{% endhint %}

{% embed url="<https://youtu.be/-gIH6tV7Yfs?feature=shared>" %}


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

{% embed url="<https://youtu.be/8Nl_eF56ZxY?feature=shared>" %}


# 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: <https://community.thunkable.com/t/increasing-screen-real-estate-with-scrollable-screens-with-video-tutorial/2727933>

{% embed url="<https://youtu.be/PR9_P86-25s?feature=shared>" %}


# Navigators


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

{% embed url="<https://youtu.be/bN9W7kxe1Fw?feature=shared>" %}


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

{% embed url="<https://youtu.be/ZkxI53wF3UE?feature=shared>" %}


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

{% embed url="<https://youtu.be/-S-9_VbtI5Y?feature=shared>" %}


# 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: <https://www.producthunt.com/products/thunkable#thunkable-figma-integration>

{% embed url="<https://youtu.be/JWAEoat6wTw?feature=shared>" %}


# Components


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

{% embed url="<https://youtu.be/khcMsY7U3nE?feature=shared>" %}


# Data Visualization


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

{% embed url="<https://youtu.be/O6ohIj0ZfMg?feature=shared>" %}


# Text


# Implement Text Input Validation

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

{% embed url="<https://youtu.be/f69iezhyNno?feature=shared>" %}


# Alerts & Notifications




---

[Next Page](/llms-full.txt/1)