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

# Core Concepts

> Understand how Newly works under the hood

# Core Concepts

Before diving deep into Newly, it helps to understand the key concepts and how they work together.

## The Newly Workflow

Newly follows a simple but powerful workflow:

```mermaid theme={null}
graph LR
    A[Describe in Chat] --> B[AI Generates Code]
    B --> C[Live Preview]
    C --> D[Refine & Iterate]
    D --> A
    D --> E[Deploy to Stores]
```

<Steps>
  <Step title="Describe">
    You describe what you want in natural language through the AI chat
  </Step>

  <Step title="Generate">
    The AI generates React Native code, handles dependencies, and structures your project
  </Step>

  <Step title="Preview">
    See your changes instantly in the live mobile preview
  </Step>

  <Step title="Iterate">
    Refine your app by chatting more with the AI or editing code directly
  </Step>

  <Step title="Deploy">
    When ready, deploy to iOS App Store and Google Play Store
  </Step>
</Steps>

## Projects

A **project** in Newly is your complete mobile app. Each project contains:

* **Source Code** - React Native/Expo code generated by the AI
* **Assets** - Images, fonts, and other media files
* **Configuration** - App settings, dependencies, and build configuration
* **Chat History** - Your conversation with the AI for context
* **Version History** - Commits tracking all changes made

### Project Structure

Your project follows a standard Expo project structure:

```
/app                  # Screen components (file-based routing)
  ├── index.tsx       # Home screen
  ├── profile.tsx     # Profile screen
  └── (tabs)/         # Tab navigation
/components           # Reusable UI components
/utils                # Helper functions and utilities
/assets               # Images, fonts, and static files
app.json              # Expo configuration
package.json          # Dependencies
```

## The AI Agent

The AI agent is the brain behind Newly. It understands your requests and generates appropriate code.

### What the AI Can Do

<CardGroup cols={2}>
  <Card title="Generate Screens" icon="mobile">
    Create complete screens with UI components, styling, and layout
  </Card>

  <Card title="Add Features" icon="plus">
    Implement functionality like forms, navigation, and data handling
  </Card>

  <Card title="Fix Bugs" icon="bug">
    Diagnose and fix issues you describe
  </Card>

  <Card title="Refactor Code" icon="wand-magic-sparkles">
    Improve existing code structure and patterns
  </Card>

  <Card title="Create Backend" icon="server">
    Generate API endpoints and database schemas
  </Card>

  <Card title="Integrate Services" icon="plug">
    Connect to external APIs and services
  </Card>
</CardGroup>

### How the AI Works

1. **Classification** - First, the AI determines if you're asking for code changes or just asking a question
2. **Context Analysis** - It reviews your existing code and chat history
3. **Code Generation** - Generates or modifies code based on your request
4. **Linting & Validation** - Checks for errors and fixes common issues
5. **Build & Preview** - Compiles the app and updates the preview

<Note>
  The AI maintains context from your chat history, so you can reference previous conversations. "Make the button from earlier bigger" works because the AI remembers what button you were discussing.
</Note>

## Live Preview

The preview panel shows your app running in real-time. It's not a simulator—it's your actual app running in a web-based Expo environment.

### Preview Features

* **Touch Interactions** - Tap, swipe, and scroll like a real device
* **Navigation** - Move between screens and test flows
* **Data Persistence** - State persists during your session
* **Hot Reload** - Changes appear instantly without losing state
* **Device Preview** - Test on your actual phone via QR code

## Version Control

Every change you make is tracked as a **commit**. This gives you:

* **History** - See what changed and when
* **Rollback** - Revert to any previous version if something breaks
* **Context** - The AI can reference previous changes

### Commit Messages

The AI automatically generates descriptive commit messages based on what changed:

```
Added user profile screen with avatar upload
Fixed navigation bug on iOS
Implemented shopping cart with checkout flow
```

<Tip>
  You can view and restore previous versions from the version history panel accessed via the sidebar.
</Tip>

## Liquid Backend

For apps that need server-side functionality, Newly uses **Liquid Backend** to automatically generate your backend.

### What Liquid Backend Provides

* **API Endpoints** - RESTful APIs generated from natural language
* **Database** - PostgreSQL database with automatic schema management
* **Authentication** - User registration, login, and session management
* **File Storage** - Upload and serve files and images
* **Serverless** - No infrastructure to manage

### When Backend is Created

The AI automatically creates backend functionality when you request:

* User accounts and authentication
* Saving data that persists across sessions
* API integrations requiring server-side secrets
* Complex data processing or AI features

```
// Example prompt that triggers backend creation:
"Add user authentication with email and password.
Save user preferences to their account."
```

## Code Ownership

**You own 100% of the code generated by Newly.** There's no vendor lock-in.

### Export Options

* **GitHub Sync** - Automatically sync to your repository
* **Download ZIP** - Download complete source code
* **Local Development** - Clone and run on your own machine

### What You Get

```bash theme={null}
# Complete, runnable Expo project
git clone your-repo/my-app
cd my-app
npm install
npx expo start
```

The exported code is standard React Native/Expo code that any developer can understand, modify, and maintain.

## Next Steps

Now that you understand the concepts, dive into the features:

<CardGroup cols={2}>
  <Card title="AI Chat" icon="message-bot" href="/features/ai-chat">
    Master the AI chat interface
  </Card>

  <Card title="Live Preview" icon="eye" href="/features/preview">
    Get the most out of the preview
  </Card>

  <Card title="Code Editor" icon="code" href="/features/code-editor">
    Edit code directly when needed
  </Card>

  <Card title="Backend" icon="server" href="/features/backend">
    Understand backend generation
  </Card>
</CardGroup>