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.Write Code
Type your code with helpful colors and hints
Organize Files
See all your project files in a tree
Run Commands
Use the terminal without leaving the editor
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
Review Changes: Turn on diff approval in Settings → Features to check all AI changes before they’re saved to your files.