Code Editor
Codeezly includes a powerful in-browser code editor powered by Monaco (the same engine behind VS Code). This guide covers its features, shortcuts, and settings.
Editor Overview
The code editor sits in the center panel of the workspace. When the AI generates or edits files, changes appear here in real time. You can also edit files manually — your changes are immediately reflected in the live preview.
Key Features
- Syntax Highlighting — Full support for TypeScript, JavaScript, JSX, TSX, CSS, HTML, JSON, and Markdown.
- IntelliSense — Auto-complete suggestions for JavaScript/TypeScript with type information.
- File Explorer — Browse and open all project files from the left sidebar of the editor panel.
- Multi-Tab Editing — Open multiple files in tabs. Click to switch, middle-click to close.
- Error Highlighting — Syntax errors and type issues are underlined in red with hover tooltips.
- Search & Replace — Full find-and-replace with regex support.
- Minimap — A zoomed-out view of your file on the right edge for quick navigation.
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
| Ctrl+S | Save current file |
| Ctrl+Z | Undo |
| Ctrl+Shift+Z | Redo |
| Ctrl+F | Find in file |
| Ctrl+H | Find and replace |
| Ctrl+D | Select next occurrence |
| Ctrl+/ | Toggle line comment |
| Alt+↑/↓ | Move line up/down |
| Ctrl+Shift+K | Delete line |
| Ctrl+P | Quick file open |
| Ctrl+G | Go to line number |
| Ctrl+Space | Trigger auto-complete |
On macOS, replace Ctrl with Cmd.
Editing While Generating
You can edit files while the AI is generating. Your manual edits are preserved, and the AI will work around them. If you change the same file the AI is currently editing, your changes take priority and the AI will notice the updated content on its next step.
File Management
The file explorer in the editor sidebar shows all project files. You can:
- Create new files — Right-click in the explorer and choose "New File".
- Create folders — Right-click and choose "New Folder".
- Rename — Right-click a file and choose "Rename".
- Delete — Right-click and choose "Delete". Deletions are versioned.
Live Preview
Every change you make — whether manual or AI-generated — is immediately compiled and rendered in the Preview panel to the right. The preview auto-refreshes with hot module replacement (HMR), so you see changes without a full page reload.
If the preview shows an error, check the Diagnostics panel below the editor for detailed error messages and stack traces.
Editor Tips
- Split the view: Drag the panel divider to give more space to the editor or preview depending on what you're doing.
- Use the diagnostic panel: When the preview breaks, the diagnostics panel shows categorized errors (syntax, import, runtime) with suggested fixes.
- Quick switch files: Use Ctrl+P to quickly search and open any file by name.
- Fold sections: Click the arrow icons in the gutter to collapse code blocks for a high-level overview.