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

# #data — JSON & CSV Files

> Bundle data files directly into your app

The `#data` command adds JSON or CSV files as **bundled resources** in your app. These files ship with your app and can be read at runtime — perfect for static content like categories, configuration, or sample data.

## What It Does

When you use `#data`, the AI:

1. Adds your JSON or CSV file to the Xcode project as a bundled resource
2. Creates the necessary Swift model structs to represent the data
3. Writes the parsing logic to load and decode the file at runtime
4. Displays the data wherever you describe in your app

## Supported Formats

| Format   | Best for                                       | Notes                                      |
| -------- | ---------------------------------------------- | ------------------------------------------ |
| **JSON** | Structured data, nested objects, API-like data | Most flexible format                       |
| **CSV**  | Tabular data, spreadsheets, simple lists       | Easy to export from Excel or Google Sheets |

## How to Use

<Steps>
  <Step title="Type #data in the chat">
    Type `#` and select **data** from the toolkit popover.
  </Step>

  <Step title="Select your file">
    The file picker opens, filtered to JSON and CSV files. Choose the data file you want to bundle.
  </Step>

  <Step title="Describe how to use it">
    The file appears as an orange chip below the input. Tell the AI what the data represents and how to display it.
  </Step>

  <Step title="Send your message">
    Press Enter. The AI creates the models, parsing logic, and UI to display your data.
  </Step>
</Steps>

## Example Prompts

```
This is a list of countries, use it to populate the country picker
```

```
Load this JSON and display the items in a scrollable list
```

```
Parse this CSV file and show the data in a table view
```

```
This JSON has a list of recipes — show them as cards with the name and cooking time
```

```
Use this CSV as the data source for the leaderboard screen
```

## What the AI Generates

When you attach a data file, the AI inspects its structure and generates:

* **Model structs** — Swift `Codable` structs matching the shape of your data
* **Parsing logic** — Code to load the file from the app bundle and decode it
* **UI views** — SwiftUI views that display the data however you described

For example, a JSON file containing a list of products would result in a `Product` struct, a loading function, and a `List` view showing each product.

<Tip>
  Great for static data like categories, configuration, sample data, or lookup tables. If your data doesn't change between app releases, bundling it with `#data` is simpler than setting up a backend.
</Tip>

<Note>
  For dynamic data that changes after your app is published — like user-generated content, real-time feeds, or data you need to update without shipping a new version — consider using Supabase instead.
</Note>

## JSON vs CSV

<AccordionGroup>
  <Accordion title="When to use JSON">
    JSON is the better choice when your data has **nested structures**, **mixed types**, or **complex relationships**. For example, a list of restaurants where each restaurant has a name, address object, and array of menu items.

    ```json theme={null}
    [
      {
        "name": "Coastal Cafe",
        "rating": 4.5,
        "tags": ["seafood", "brunch"]
      }
    ]
    ```
  </Accordion>

  <Accordion title="When to use CSV">
    CSV works well for **flat, tabular data** — think spreadsheets. If your data fits neatly into rows and columns with no nesting, CSV is simple and easy to edit.

    ```csv theme={null}
    name,population,country
    Tokyo,13960000,Japan
    Delhi,11030000,India
    Shanghai,24870000,China
    ```
  </Accordion>
</AccordionGroup>

## Related

<CardGroup cols={2}>
  <Card title="Toolkit Overview" icon="grid-2" href="/toolkit/overview">
    See all available # commands and how the toolkit works.
  </Card>

  <Card title="Supabase Overview" icon="database" href="/supabase/overview">
    Set up a backend for dynamic data that changes over time.
  </Card>
</CardGroup>