> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nativeline.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Your First iPad App

> Build your first iPad app in 15 minutes

# Your First iPad App

**⏱️ 15 minutes**

Let's build an iPad app! This tutorial walks you through creating an app that takes full advantage of the iPad's larger screen. You'll go from idea to working app in the iPad Simulator in just minutes.

## What You'll Build

A simple notes app that:

* Shows a sidebar with note titles for easy navigation
* Has a detail view for editing the selected note
* Takes advantage of the iPad's larger screen with a split-view layout

Simple, but you'll learn the key patterns that make iPad apps feel native.

***

## Step 1: Create a New App

Open Nativeline. On the Home Page, select **iPad** from the platform selector.

You'll see:

> **"Tell me about the app you're imagining..."**

Type your app description:

```
A notes app with a sidebar showing note titles and a detail area for editing notes
```

Click **Create** or press Enter.

<Tip>
  iPad apps shine when they use the extra screen space. Sidebars, split views, and multi-column layouts are all great patterns to try.
</Tip>

***

## Step 2: Complete the Wizard

Nativeline's wizard helps customize your app with a few quick questions:

### What feel do you want?

Choose **Modern & polished** — this gives you a clean, professional look.

### Similar apps?

You can skip this or type "like Apple Notes" for inspiration.

### Pick colors

Choose any palette you like, or let the AI generate one.

### Name your app

Enter: **iPadNotes**

Click **Create App** to continue.

***

## Step 3: Watch It Build

Nativeline now creates your app:

1. **Setting up the project** — Creating the Xcode structure
2. **Writing the code** — Generating Swift/SwiftUI
3. **Building** — Compiling everything

This takes 30-60 seconds. You'll see a progress animation.

<Note>
  First build takes longer because Xcode needs to compile the entire project. Future builds are much faster.
</Note>

***

## Step 4: Explore Your Workspace

Once complete, you'll see the main workspace:

### Left Side: Chat Interface

* **Your messages** — What you ask for
* **AI responses** — What the AI is doing
* **Tool cards** — Files being created/edited
* **Todo list** — Current tasks

### Right Side: Embedded iPad Simulator

Your app running on a virtual iPad. The simulator frame is larger than the iPhone version, giving you a clear view of the split-view layout.

You should see the sidebar with note titles on the left and the detail editing area on the right. Try tapping a note to see it appear in the detail view!

***

## Step 5: Make Your First Change

Let's customize the app. In the chat, type:

```
Add a search bar at the top of the sidebar to filter notes by title
```

Watch the AI:

1. **Plan** the change
2. **Edit** the code
3. **Rebuild** the app
4. **Show** the result

Your notes app now has search functionality!

***

## Step 6: Add a Feature

Let's add something more powerful. Type:

```
Add the ability to format text with bold, italic, and bullet points
```

The AI will:

1. Create a formatting toolbar
2. Add rich text support
3. Wire up the formatting controls

Test it — select some text and try the formatting options.

***

## Step 7: Polish the Design

Let's make it look great. Type:

```
Add a gradient header, card-style note previews in the sidebar, and a floating new note button
```

Now you have a polished, professional-looking iPad notes app!

***

## Experiment Further

Try these prompts to explore more:

<AccordionGroup>
  <Accordion title="Add categories" icon="folder">
    "Add color-coded categories like Work, Personal, and Ideas that I can assign to each note"
  </Accordion>

  <Accordion title="Add sharing" icon="share-nodes">
    "Add a share button that lets me export a note as plain text or copy it to the clipboard"
  </Accordion>

  <Accordion title="Add dark mode support" icon="moon">
    "Make sure the app looks great in both light and dark mode with appropriate colors"
  </Accordion>

  <Accordion title="Add images to notes" icon="image">
    "Let me insert images into my notes from the photo library"
  </Accordion>
</AccordionGroup>

***

## What You Learned

Congratulations! You just:

* Created an iPad app from a description
* Used sidebar navigation — a core iPad pattern
* Took advantage of the larger screen with split-view layout
* Added rich text formatting
* Styled your app with gradients, cards, and floating buttons

You've got the iPad basics down. The key difference from iPhone apps is using the extra space wisely with multi-column layouts.

***

## Common Issues

<AccordionGroup>
  <Accordion title="The iPad Simulator is too large" icon="tablet">
    * You can resize the Simulator window by dragging its corners
    * Use **Window > Physical Size** or **Window > Point Accurate** in the Simulator menu to adjust
    * The embedded simulator automatically scales to fit your workspace
  </Accordion>

  <Accordion title="The Simulator isn't showing" icon="display">
    * Check if it's behind other windows
    * Look in other Spaces/Desktops (swipe on trackpad)
    * It may take 30-60 seconds to boot the first time
  </Accordion>

  <Accordion title="Build failed" icon="circle-xmark">
    Don't worry! Nativeline automatically:

    1. Detects the error
    2. Proposes a fix
    3. Rebuilds

    If it keeps failing, describe the issue in your own words.
  </Accordion>

  <Accordion title="App doesn't match what I asked for" icon="circle-question">
    Be more specific in your next prompt:

    * Instead of "make it bigger" → "make the font size 48pt"
    * Instead of "change the layout" → "put the sidebar on the left with a 300pt width"
  </Accordion>
</AccordionGroup>

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Todo App Tutorial" icon="list-check" href="/quick-start/todo-app">
    Build a full task manager with data storage
  </Card>

  <Card title="Chat Interface Guide" icon="comments" href="/features/chat-interface">
    Master the Nativeline workspace
  </Card>
</CardGroup>