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

# Code Editor

> Full VS Code experience in your browser

## What is Code Editor?

Code Editor gives you access to VS Code directly in your browser. It's the same editor professional developers use, but you don't need to install anything.

Most users let the agent write code for them, but Code Editor is there when you want to:

* See exactly what files exist in your project
* Make small text changes yourself
* Review what the agent has done
* Explore and learn how your app works

## Navigating Files

### File Explorer

The left sidebar shows all your project files and folders:

* Click a folder to expand it
* Click a file to open it
* Right-click for options (rename, delete, new file)

### Common Folders

| Folder        | What's Inside                   |
| ------------- | ------------------------------- |
| `src/`        | Your app's main code            |
| `public/`     | Images, icons, and static files |
| `components/` | Reusable pieces of your app     |

### Opening Multiple Files

* Click a file to open it
* Files appear as tabs at the top
* Click tabs to switch between files

## When to Use Code Editor vs Agent

### Use Agent Mode When...

* You want to add features or make changes
* Something is broken and needs fixing
* You're not sure how to do something
* You want to change multiple files at once

### Use Code Editor When...

* You want to fix a typo or small text error
* You're curious about how something works
* You want to review recent changes
* You need to copy text from your code

## Making Quick Edits

1. Find and open the file you want to edit
2. Click where you want to make a change
3. Type your edit
4. The file saves automatically

<Tip>
  If you're unsure about a change, ask the agent instead. It's easy to accidentally break something by editing the wrong spot.
</Tip>

## Search and Find

* **Find in file**: `Cmd/Ctrl + F`
* **Find in all files**: `Cmd/Ctrl + Shift + F`
* **Go to file**: `Cmd/Ctrl + P`, then type the filename

## Terminal

At the bottom of Code Editor, you'll see a Terminal panel. This is for running commands—useful for developers but not needed for most tasks.

If you need something done in the terminal, just ask the agent. It can run commands for you.