Browse, search, and edit — in place.
You don't need to open a separate editor to glance at a file or search your codebase. CodeGrid puts a file tree, a code editor, search, and a dependency graph in the sidebar.
Your project, in the sidebar
File tree
Browse your project with file-type icons and per-file Git status — modified, added, deleted, staged.
Context menu
Right-click to create, rename, delete, move, or copy files and folders.
Drag & drop
Reorder files and folders, or drag a file straight onto a pane.
Project search
Search across the whole codebase with ⌘⇧F — no second editor required.
Read and edit code in a pane
Code editor
Click any file to open it in a CodeMirror editor with syntax highlighting for TypeScript/JavaScript, Python, Rust, JSON, Markdown, CSS, and HTML.
Live editable
Files are editable in place and stay in sync with what your agents are doing.
Diff viewer
Review staged and unstaged changes in a syntax-highlighted diff.
Dependency graph
Explore an interactive, force-directed graph of your file dependencies (TypeScript, JavaScript, Python, Rust). Click a node to jump to the file; zoom, pan, and drag to navigate.
CLAUDE.md editor
Read and write your project's CLAUDE.md instructions — as Markdown or structured JSON.
One app for the whole loop.
Agents, Git, files, and preview — without leaving the canvas.
macOS · Apple Silicon · Free & open source