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

# Code Editor

> View and edit generated code directly

# Code Editor

While the AI handles most coding tasks, you have full access to view and edit the generated code directly. To save the manual code changes, you have to give a prompt, so it updates and saves the changes - you can prompt something like: Update README that I was here.

## Accessing the Editor

The code editor is available in **Triple Panel** layout:

1. Click the layout toggle in the header
2. Select the three-panel layout
3. The editor appears in the middle panel

## File Browser

The left sidebar of the editor shows your project files:

```
📁 app/              # Screens and navigation
📁 components/       # Reusable UI components
📁 utils/           # Helper functions
📁 assets/          # Images and fonts
📄 app.json         # App configuration
📄 package.json     # Dependencies
```

Click any file to open it in the editor.

## Editor Features

### Syntax Highlighting

Full TypeScript/React Native syntax highlighting with:

* JSX component highlighting
* TypeScript type annotations
* Import/export statements
* String and number literals

### File Tabs

Open multiple files in tabs for easy switching between related files.

### Search

Use `Ctrl/Cmd + F` to search within the current file.

## When to Edit Manually

The AI handles most tasks, but manual editing is useful for:

<CardGroup cols={2}>
  <Card title="Quick Fixes" icon="wrench">
    Minor typos or small value changes are faster to fix directly
  </Card>

  <Card title="Learning" icon="graduation-cap">
    Read the code to understand how the AI implemented features
  </Card>

  <Card title="Fine-tuning" icon="sliders">
    Adjust specific values like colors, spacing, or timing
  </Card>

  <Card title="Debugging" icon="bug">
    Add console.log statements to diagnose issues
  </Card>
</CardGroup>

## Common Manual Edits

### Adjusting Styles

```tsx theme={null}
// Change padding from 16 to 24
const styles = StyleSheet.create({
  container: {
    padding: 24, // was 16
  },
});
```

### Fixing Text

```tsx theme={null}
// Fix a typo in the UI
<Text>Submit Application</Text> // was "Sumbit"
```

### Tweaking Animations

```tsx theme={null}
// Make animation faster
Animated.timing(fadeAnim, {
  toValue: 1,
  duration: 200, // was 500
  useNativeDriver: true,
}).start();
```

### Adding Debug Logs

```tsx theme={null}
const handleSubmit = () => {
  console.log('Form data:', formData); // Debug line
  submitForm(formData);
};
```

## Saving Changes

After editing code manually:

1. You have to give a prompt, so the code changes are updated.
2. A build triggers automatically
3. Preview updates with your changes

<Note>
  Manual edits are tracked in version history just like AI changes.
</Note>

## Working with AI and Manual Edits

You can combine AI prompts with manual edits:

1. **AI generates feature** - "Add a settings screen"
2. **You fine-tune** - Adjust spacing, fix typos
3. **AI adds more** - "Add dark mode toggle to settings"

The AI sees your manual changes and works with them.

<Tip>
  Tell the AI about manual changes: "I adjusted the header padding manually. Now add a search bar below it."
</Tip>

## Understanding the Code Structure

### App Directory (Expo Router)

Newly uses [Expo Router](https://docs.expo.dev/router/introduction/) for file-based routing:

```
app/
├── index.tsx        # Home screen (/)
├── profile.tsx      # Profile screen (/profile)
├── settings.tsx     # Settings screen (/settings)
├── (tabs)/          # Tab navigator group
│   ├── _layout.tsx  # Tab configuration
│   ├── home.tsx     # Home tab
│   └── search.tsx   # Search tab
└── product/
    └── [id].tsx     # Dynamic route (/product/123)
```

### Components

Reusable UI components live in `/components`:

```tsx theme={null}
// components/Button.tsx
export function Button({ title, onPress }) {
  return (
    <TouchableOpacity onPress={onPress}>
      <Text>{title}</Text>
    </TouchableOpacity>
  );
}
```

### Utils

Helper functions and API calls in `/utils`:

```tsx theme={null}
// utils/api.ts
export async function fetchProducts() {
  const response = await fetch('/api/products');
  return response.json();
}
```

## Common Patterns

### Navigation

```tsx theme={null}
import { router } from 'expo-router';

// Navigate to a screen
router.push('/profile');

// Navigate with parameters
router.push({
  pathname: '/product/[id]',
  params: { id: '123' }
});

// Go back
router.back();
```

### State Management

```tsx theme={null}
import { useState, useEffect } from 'react';

const [items, setItems] = useState([]);
const [loading, setLoading] = useState(true);

useEffect(() => {
  fetchItems().then(data => {
    setItems(data);
    setLoading(false);
  });
}, []);
```

### API Calls

```tsx theme={null}
import Constants from 'expo-constants';

const backendUrl = Constants.expoConfig?.extra?.backendUrl;

const response = await fetch(`${backendUrl}/api/products`);
const data = await response.json();
```

## Best Practices

<AccordionGroup>
  <Accordion title="Let AI handle big changes">
    For adding features or refactoring, describe it to the AI. Manual editing is best for small tweaks.
  </Accordion>

  <Accordion title="Test after each edit">
    Always verify your manual changes work in the preview before moving on.
  </Accordion>

  <Accordion title="Keep consistent style">
    Match the existing code style when making manual edits.
  </Accordion>

  <Accordion title="Use meaningful commits">
    The AI auto-generates commit messages, but your manual edits are tracked too.
  </Accordion>
</AccordionGroup>

## Exporting Code

To work on the code locally:

<Tabs>
  <Tab title="GitHub Sync">
    1. Connect your GitHub repository
    2. Code syncs automatically
    3. Clone locally: `git clone your-repo`
    4. Install: `npm install`
    5. Run: `npx expo start`
  </Tab>

  <Tab title="Download ZIP">
    1. Click **More** → **Download ZIP**
    2. Extract the archive
    3. Open in your preferred editor
    4. Install: `npm install`
    5. Run: `npx expo start`
  </Tab>
</Tabs>

<Card title="GitHub Integration" icon="github" href="/integrations/github">
  Learn more about syncing with GitHub
</Card>

## Next Steps

<CardGroup cols={2}>
  <Card title="Backend Features" icon="server" href="/features/backend">
    Understanding backend code generation
  </Card>

  <Card title="Deployment" icon="rocket" href="/features/deployment">
    Build and deploy your app
  </Card>
</CardGroup>