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

# Code Editor

> View and edit your app's source code

While AI handles most code generation, you can view and understand the source code of your app at any time.

## Accessing the Code

### File Browser

Click the **Files** tab in the left sidebar to see:

* All project files
* Folder structure
* File types (astro, tsx, css, etc.)

### Viewing Files

Click any file to view its contents:

* Syntax highlighting
* Line numbers
* Code formatting

## File Structure

A typical Kleap app follows Astro conventions:

```
├── src/
│   ├── pages/            # Pages and routes (.astro)
│   │   └── index.astro   # Homepage
│   ├── layouts/          # Shared layouts
│   │   └── Base.astro    # Root layout (header, footer)
│   ├── components/       # Reusable components (.astro + .tsx islands)
│   └── styles/
│       └── global.css    # Global styles (Tailwind v4)
├── public/               # Static assets
├── astro.config.mjs      # Astro config (managed by Kleap)
└── package.json          # Dependencies
```

## Understanding the Code

### Technologies Used

| Technology           | Purpose                             |
| -------------------- | ----------------------------------- |
| **Astro 5**          | Static-first web framework, routing |
| **Tailwind CSS v4**  | Utility-first styling               |
| **React 19 islands** | Interactive components              |
| **TypeScript**       | Type-safe JavaScript                |

### Key Files

* `src/pages/index.astro` - Your homepage
* `src/layouts/Base.astro` - Root layout (header, footer)
* `src/components/` - Your custom components
* `src/styles/global.css` - Global styling

## Editing Code

<Warning>
  Direct code editing is for advanced users. For most changes, use the AI chat instead.
</Warning>

### When to Edit Directly

* Fixing typos in text
* Minor CSS adjustments
* Understanding how something works
* Debugging issues

### How to Edit

1. Open the file in the editor
2. Make your changes
3. Save (Ctrl/Cmd + S)
4. Preview updates automatically

## Working with AI

The AI can reference specific files:

```
Look at src/pages/index.astro and move the hero section
above the features section
```

```
In src/components/Header.astro, change the logo size
```

```
Update the color scheme in src/styles/global.css
```

## Exporting Code

### Push to GitHub

1. Go to **Settings** > **GitHub**
2. Connect your GitHub account
3. Create or connect a repository
4. Push your code

### Download Files

1. Go to **Settings** > **Export**
2. Click **Download ZIP**
3. Get all source files locally

## Best Practices

<AccordionGroup>
  <Accordion title="Let AI handle complex changes">
    For anything beyond simple text edits, describe what you want in chat. AI understands the full context.
  </Accordion>

  <Accordion title="Use version history">
    If you break something, use [version history](/features/version-history) to roll back.
  </Accordion>

  <Accordion title="Learn the patterns">
    Review AI-generated code to learn Astro and React patterns.
  </Accordion>
</AccordionGroup>

## Code Quality

AI-generated code follows best practices:

* TypeScript for type safety
* Component-based architecture
* Responsive design patterns
* Accessibility standards
* Performance optimization

<Card title="Export to GitHub" icon="github" href="/integrations/github">
  Push your code to version control
</Card>