Code Editor

The Code Editor brings file editing directly into Quack. Rather than switching to an external IDE every time your agent proposes a change, you can review, edit, and accept modifications in the same window where you work.

Opening the Editor

Multi-Tab Editing

Each file opens in its own tab. You can have multiple files open simultaneously and switch between them without losing your scroll position or cursor location.

+--------------------------------------------------+
| [App.tsx] x   [auth.ts] x   [index.css] x   +   |
+--------------------------------------------------+
|                                                  |
|  // auth.ts                                      |
|  export function validateToken(token: string) {  |
|    ...                                           |
|  }                                               |
|                                                  |
+--------------------------------------------------+

Tabs persist across sessions — they reopen where you left off.

Supported Languages

The editor supports syntax highlighting and formatting for 23 languages, including TypeScript, JavaScript, Python, Rust, Go, HTML, CSS, JSON, YAML, Markdown, and more.

Search

Press Cmd+F (macOS) / Ctrl+F (Windows/Linux) to open the in-file search bar. Supports:

• Literal text search
• Case-sensitive matching
• Regular expressions

Saving Files

Press Cmd+S (macOS) / Ctrl+S (Windows/Linux) to save. Modified files show a dot indicator on their tab until saved.

Outline Panel

The Outline panel provides an AST-based symbol tree for the current file. Supported in 14 languages including TypeScript, JavaScript, Python, and Rust.

• Toggle: Click the Outline icon in the editor toolbar
• Navigate: Click any symbol (function, class, variable) to jump directly to its definition
• Useful for: Large files where scrolling to find a function is slow

Outline
+- validateToken()
+- parseJWT()
+- TokenError (class)
   +- constructor()
   +- message

Preview Mode

For certain file types, press Cmd+Shift+P (macOS) / Ctrl+Shift+P (Windows/Linux) to open a live preview panel alongside the editor:

The preview updates as you type, so you can write documentation or diagrams and see the output immediately.

Diff Mode

When your agent proposes edits to a file, the editor switches to Diff mode. You see the proposed changes highlighted inline:

  function calculateTotal(items) {
-   return items.length;
+   return items.reduce((sum, item) => sum + item.price, 0);
  }

In Diff mode, each changed block has three actions:

You can also Accept All or Reject All using the buttons at the top of the file.

Popout Window

Detach the editor into its own floating window to work across monitors or keep code visible while chatting:

1. Click the Popout icon in the top-right of the editor tab
2. The editor opens as a standalone window
3. Changes sync in real time with the main Quack window

Opening in External IDE

Use the IDE dropdown in the editor toolbar to hand off to your preferred external tool:

• Open in VS Code — opens the file at the current cursor line
• Open in Cursor — same, targeting Cursor's editor
• Reveal in Finder (macOS) / Show in Explorer (Windows) — opens the file's containing folder

Symbol Chips in Chat

When your agent references a function, class, or variable in the chat, Quack renders it as a clickable symbol chip:

I updated the `validateToken` function to handle expired JWTs.

Click the chip to jump directly to that symbol's definition in the editor, opening the file and scrolling to the right line.

Previous: Whiteboard

Next: Features