Code Editor

Codewick’s code editor is built on Monaco, the same engine that powers Visual Studio Code. You get professional-grade editing with syntax highlighting, intelligent auto-complete, and tight integration with Codewick’s AI and diff workflow.

Core Editor Features

Syntax Highlighting

Monaco provides syntax highlighting for a wide range of languages out of the box:

• Web: JavaScript, TypeScript, HTML, CSS, SCSS, JSX, TSX
• Backend: Python, Ruby, Go, Rust, Java, C, C++, C#, PHP
• Data & Config: JSON, YAML, TOML, XML, SQL, GraphQL
• Docs: Markdown, MDX

Font and Appearance

The editor ships with JetBrains Mono at 13px as the default monospace font. The color theme aligns with Codewick’s dark interface, providing comfortable contrast for long sessions.

VS Code Keybindings

All standard VS Code keybindings work by default:

Action	Shortcut
Save file	⌘ + S
Find	⌘ + F
Find and replace	⌘ + H
Go to line	⌃ + G
Toggle comment	⌘ + /
Move line up/down	⌥ + ↑ / ↓
Duplicate line	⇧ + ⌥ + ↓
Select all occurrences	⌘ + ⇧ + L

File Tabs

Open multiple files simultaneously with tabbed editing:

• Click a file in the explorer or use ⌘ + P to quick-open by name.
• Tabs show the filename and a dot indicator for unsaved changes.
• Close tabs with the × button or ⌘ + W.
• Reorder tabs by dragging.

Tip

Right-click a tab for options like Close Others, Close to the Right, or Copy File Path.

Split View

Work on two files side by side:

• Horizontal split — divide the editor into left and right panes.
• Vertical split — divide the editor into top and bottom panes.

Drag the divider to resize panes. Each pane has its own tab bar, so you can browse different files independently.

Diff View for AI Changes

When the AI proposes edits, the editor opens an inline diff view:

• Side-by-side layout shows the original file on the left and the proposed version on the right.
• Added lines are highlighted in green; removed lines are highlighted in red.
• Line-level accept/reject lets you approve individual hunks rather than the entire change.

This gives you granular control over what the AI modifies. Accept the lines you agree with, reject the rest, and continue the conversation.

How the Diff Workflow Operates

1. The AI generates a change and it appears in the chat as an inline diff block.
2. Clicking View in Editor opens the side-by-side diff.
3. Review each hunk. Click the checkmark to accept or the × to reject.
4. Once all hunks are resolved, the diff view closes and the file reflects your decisions.

Find and Replace

Open find with ⌘ + F and replace with ⌘ + H:

• Case sensitive toggle.
• Whole word toggle.
• Regex mode for pattern-based search.
• Replace all for bulk changes.

Results are highlighted in the editor and the minimap, making it easy to see where matches occur.

Additional Editor Features

• Minimap — a zoomed-out overview of the file on the right edge. Click to jump to any section.
• Bracket matching — matching brackets are highlighted when the cursor is adjacent.
• Auto-indentation — new lines automatically indent to the correct level.
• Auto-closing pairs — brackets, quotes, and parentheses close automatically.
• Code folding — collapse blocks by clicking the fold icon in the gutter.
• Read-only mode — lock a file to prevent accidental edits. Toggle from the tab context menu or the command palette.

Note

The editor auto-saves your work. Files are written to disk on every change, so you never lose progress. The built-in browser refreshes automatically when files are saved.

Working with the AI

The editor and chat are tightly connected:

• Select code in the editor, then press ⌘ + L to send the selection to the chat as context.
• The AI can open files, navigate to specific lines, and apply changes directly in the editor.
• Diff view is the primary review surface for all AI-generated code changes.

This keeps you in control of every modification while letting the AI handle the heavy lifting.