> ## Documentation Index
> Fetch the complete documentation index at: https://codinitdev-mintlify-update-changelog-codinit-dev-90028.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Code Editor Panel

> Where you write and organize your code files

The Code Editor is where you write your code. It's like a super-smart text editor that understands programming and helps you write better code.

## What is the Code Editor?

Think of the Code Editor as a special notebook for writing code. It colors your code to make it easier to read and helps you find mistakes.

<CardGroup cols={3}>
  <Card title="Write Code" icon="code">
    Type your code with helpful colors and hints
  </Card>

  <Card title="Organize Files" icon="folder">
    See all your project files in a tree
  </Card>

  <Card title="Run Commands" icon="terminal">
    Use the terminal without leaving the editor
  </Card>
</CardGroup>

## Main Parts

### Finding Your Files

On the left side, you'll see all your project files organized like folders on your computer:

* Click folders to open them and see what's inside
* Click files to open and edit them
* Icons show you what type of file it is (JavaScript, image, etc.)
* A dot appears next to files you've changed but haven't saved

### Writing Code

The big area in the middle is where you write your code:

* **Colors** - Different parts of your code show up in different colors to make it easier to read
* **Suggestions** - As you type, the editor suggests what you might want to write next
* **Find and replace** - Search for words in your code and change them
* **Multiple spots** - Edit several places at once

### Using the Terminal

At the bottom, you can open a terminal to run commands:

* Open multiple terminal tabs for different tasks
* Make it bigger or smaller by dragging
* See commands you ran before
* Run commands without leaving your code

## What You Can Do With Files

You can manage your files in many ways:

* **Create** - Make new files and folders
* **Delete** - Remove files you don't need
* **Rename** - Change file names
* **Upload** - Drag files from your computer into the editor
* **Search** - Find files quickly by name

### Reviewing AI Changes

When the AI wants to change your files, you can review the changes first:

* **See the differences** - Compare the old and new versions side by side
* **Approve or reject** - Choose which changes to keep
* **Colored highlights** - See exactly what's being added or removed

<Callout type="info">
  **Review Changes**: Turn on diff approval in Settings → Features to check all AI changes before they're saved to your files.
</Callout>