Editor
Magia includes a full-featured code editor built on CodeMirror 6. It is the default way to view and edit files inside a session. You can also configure Magia to open files in an external editor instead.
Syntax highlighting
Section titled “Syntax highlighting”Language grammars are loaded lazily on first use, so the initial application bundle stays small. The following languages are supported:
| Language | Extensions |
|---|---|
| JavaScript / JSX | .js, .jsx, .mjs, .cjs |
| TypeScript / TSX | .ts, .tsx, .mts, .cts |
| Python | .py, .pyw |
| Rust | .rs |
| Go | .go |
| Java | .java |
| C / C++ | .c, .h, .cpp, .hpp, .cc, .cxx |
| PHP | .php |
| Ruby | .rb, .gemspec, .rake |
| Swift | .swift |
| Kotlin | .kt, .kts |
| Scala | .scala, .sc |
| Dart | .dart |
| Perl | .pl, .pm |
| Lua | .lua |
| R | .r |
| Haskell | .hs, .lhs |
| Elixir | .ex, .exs |
| Erlang | .erl, .hrl |
| Clojure | .clj, .cljs, .cljc |
| PowerShell | .ps1, .psm1 |
| Shell / Bash | .sh, .bash, .zsh, .fish |
| SQL | .sql |
| HTML | .html, .htm |
| CSS | .css |
| Sass / SCSS | .scss, .sass |
| Less | .less |
| Vue | .vue |
| JSON | .json, .jsonc, .json5 |
| YAML | .yaml, .yml |
| TOML / INI | .toml, .ini, .cfg, .conf |
| XML / SVG | .xml, .svg, .xsl, .xsd, .plist |
| Markdown | .md, .markdown, .mdx |
| Dockerfile | Dockerfile |
| Protobuf | .proto |
| Nginx | nginx.conf |
| Diff / Patch | .diff, .patch |
| Makefile | Makefile, *.mk |
Plain-text files (.txt, .log, .csv, .tsv) open without highlighting.
Minimap
Section titled “Minimap”A scrollable minimap renders a bird’s-eye view of the file on the right edge of the editor panel. Clicking or dragging the minimap scrolls the editor to the corresponding position. The minimap can be toggled in Settings.
Git gutter
Section titled “Git gutter”The editor shows a colored indicator in the line number gutter for every line that has an uncommitted change relative to the current HEAD:
- Green bar — line was added
- Yellow/amber bar — line was modified
- Red marker — line was deleted
Hovering over a gutter marker shows a git blame tooltip with the commit hash, author, date, and commit message. The blame data is fetched from the Rust backend via the git_blame_line command and is cached per file-path / line until the file content changes.
Find and replace
Section titled “Find and replace”Press Cmd+F (macOS) or Ctrl+F (Windows / Linux) to open the search panel. The panel appears at the top of the editor and supports:
- Plain-text search
- Highlighting of all matches in the buffer
- Navigation between matches with
Enter/Shift+Enter - Case-sensitive and regex modes (built-in CodeMirror search)
Markdown preview with Mermaid
Section titled “Markdown preview with Mermaid”When a .md, .markdown, or .mdx file is open you can switch to the Preview tab in the file action bar. The preview renders:
- Full GitHub Flavored Markdown (tables, task lists, strikethrough, etc.)
- Syntax-highlighted code blocks using the same renderer as the chat panel
- Mermaid diagrams — any fenced code block with the language tag
mermaidis rendered as an SVG diagram. The Mermaid library is loaded lazily.
Diff overlay for agent changes
Section titled “Diff overlay for agent changes”When an agent writes a file, the editor can display the diff between the original and modified content before you accept or reject the change. The diff overlay offers two view modes:
- Unified — added and removed lines interleaved in a single column
- Side-by-side — original on the left, modified on the right
Both views use the same syntax highlighter as the main editor. The active mode is controlled by the toggle in the file action bar.
Tab bar
Section titled “Tab bar”Multiple files can be open in the same session. Each open file gets a tab in the tab bar at the top of the editor panel. Unsaved changes are indicated with a dot on the tab. Scroll position is saved per file and restored when you switch back to a tab.
The editor supports split panes. Each pane maintains its own set of open tabs independently.
Cmd+Click to definition
Section titled “Cmd+Click to definition”Hold Cmd (macOS) or Ctrl (Windows / Linux) and click a symbol to jump to its definition. The lookup is handled by the LSP integration running via the Rust backend.
Keyboard shortcuts
Section titled “Keyboard shortcuts”| Action | macOS | Windows / Linux |
|---|---|---|
| Find | Cmd+F | Ctrl+F |
| Save | Cmd+S | Ctrl+S |
| Undo | Cmd+Z | Ctrl+Z |
| Redo | Cmd+Shift+Z | Ctrl+Shift+Z |
| Indent with Tab | Tab | Tab |
| Jump to definition | Cmd+Click | Ctrl+Click |
Configuration
Section titled “Configuration”All editor settings are found in Settings → Editor.
| Setting | Default | Description |
|---|---|---|
editorPreference | in-app | Which editor opens files. See Editor preference. |
minimapEnabled | true | Show or hide the minimap. |
editorFontFamily | JetBrains Mono | Font family for editor text. |
editorFontSize | 13 | Font size in pixels. |
editorLineHeight | 1.4 | Line height multiplier. |
Editor preference
Section titled “Editor preference”The editorPreference setting controls what happens when Magia opens a file. Set it to one of:
| Value | Behavior |
|---|---|
in-app | Open files in the built-in CodeMirror editor (default). |
vscode | Open files in Visual Studio Code via the code CLI. |
cursor | Open files in Cursor via the cursor CLI. |
zed | Open files in Zed via the zed CLI. |
sublime | Open files in Sublime Text via the subl CLI. |
system | Use the system default application for the file type. |
When an external editor is selected, clicking a file reference in the chat or tool output opens it in that editor rather than in Magia’s built-in pane.