> For the complete documentation index, see [llms.txt](https://aidocs.thunkable.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aidocs.thunkable.com/getting-started/quickstart.md).

# Quickstart

## 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

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

```
// 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>

### **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>

### 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>

### **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](/downloading/android-downloading.md) 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>