Code Editor

View and edit your code, and restrict agent access

What it is: The Code Editor provides direct access to your app's source code. While the AI agent typically handles code changes, you can view and manually edit files when needed.

How to access: Click the Code Editor tab in the workspace topbar.

Key features:

• File browser: Navigate all frontend and backend files

• Syntax highlighting: Full code editing with proper highlighting

• Manual editing: Make changes the agent can't or shouldn't make

• Agent restrictions: Control which files the agent can modify

• Auth toggle: Enable/disable authentication for pages and APIs

File structure:

• frontend/src/pages/ - React pages (one file per route)

• frontend/src/components/ - Reusable UI components

• frontend/src/utils/ - Frontend utility functions

• backend/app/apis/ - API endpoints

• backend/app/libs/ - Backend utility modules

How to use:

1. Browse files in the left sidebar

2. Click a file to view or edit it

3. Changes save automatically

4. Hot-reloading updates your preview in real-time

Tips:

• Let the agent handle most code changes - it's faster and safer

• Use the editor to review what the agent built

• Manual edits are useful for fine-tuning or emergency fixes

The three-dot menu next to files lets you toggle authentication