Spatial code canvas: see your codebase as a map

A spatial code canvas is a zoomable, pannable surface where each file is a card. Lines between the cards show how the code relates, for example a page calling an API route, the route calling a service, and the service reading a type. You place the cards where they make sense, so position carries meaning: the request starts on the left, the database sits on the right, the tests sit underneath.

The idea has a research history. Brown University’s Code Bubbles project, published in 2010, arranged editable code fragments into visible “working sets” on a large surface, built on the observation that the code for one task is usually scattered across many files. A modern code canvas applies the same insight to whole files and adds live collaboration.

Most real work touches several files. Fixing a checkout bug might mean the form component, the API handler, a pricing helper and a test. In a classic editor, those live in four tabs, and the relationships between them live only in your head. Every tab switch costs a little memory.

Put the same four files on a canvas and the relationships are on screen. You can see that the form calls the handler, the handler calls the helper, and the test covers only half of it. People are good at remembering where things are, and a canvas uses that: “the pricing helper is the card bottom-right” sticks better than a path four folders deep.

It matters even more when AI writes part of the code. When an agent changes five files at once, a map of how those files connect makes the change far easier to review than a long list of diffs.

Code Crux is a collaborative, AI-native code editor with a canvas view built in. It is pre-launch, with a waitlist open now.

Files as cards, wired by code connections

Each file is a card showing its code. Wires connect related cards, and hovering a wire shows what it represents. Pan and zoom to move between the big picture and the detail, then switch to the editor view when you want a focused text view.

Shared by everyone in the workspace

The canvas is part of Crux’s real-time multiplayer workspace. Collaborators show up with live cursors and presence, and AI agents appear on the files they are working in, so you can see on the map who and what is changing which part of the code. That is what makes it useful for vibe coding with friends and for pair programming online.

Next to the rest of your tools

The file explorer, integrated terminal and AI agent panel stay alongside the canvas, so you can find a file in the tree, look at it on the map, run the tests and ask an agent about it without leaving the workspace.

A canvas is not a better file tree; it answers a different question. Use the tree to find things and the canvas to understand them.

Onboarding a new teammate

Instead of “start in src and click around,” lay out the five files that matter for the core flow and walk through them together. The newcomer gets the shape of the system in one sitting, and the map is still there the next day.

Code reviews

Put the changed files on the canvas in the order data flows through them. Reviewers see how a change ripples across files instead of reading diffs in alphabetical order. This is especially useful for large AI-generated changes.

Architecture talks

Whiteboard diagrams drift away from the code the moment they are drawn. A canvas made of the real files cannot drift: the boxes are the code. Use it to discuss where a new feature should live or which module is doing too much.

Pair programming and group sessions

When two or more people work together, the canvas becomes the shared screen. One person drives in a file while the other watches the wires and spots what the change will affect next. With AI agents in the mix, the map shows at a glance which files an agent is touching, so nobody sends a second agent into the same place.

Debugging

Lay out the path a request takes, follow the wires, and keep the terminal output beside it. Several people can trace different branches of the same flow at the same time.

• Map a task, not the repository. Five to fifteen files for one feature or flow is the sweet spot.
• Let position mean something. Inputs on the left, outputs on the right, shared types and tests underneath.
• Keep related cards close so the wires stay short and readable.
• Agree on the question the map answers, such as “how does checkout work?” or “where does this auth bug start?”
• Clear it when the task is done. A stale map is worse than none.

A canvas also has limits worth knowing. It will not explain code that nobody understands, it adds little for a one-file change, and a map with dozens of crossing wires is harder to read than a list. Reach for it when a task spans several files or several people, and stay in the plain editor when it does not.

The Crux docs cover the IDE controls, pricing lists the plans, and Crux vs Cursor compares the canvas-first workflow with an AI-agent-first editor.

What is a spatial code canvas?

A spatial code canvas is a view of a codebase where files appear as cards on an open, zoomable surface, connected by lines that show how the code relates. You arrange the cards so a feature or flow is visible all at once instead of hidden in tabs.

Does a code canvas replace the file tree?

No. A file tree is best for finding a file by where it lives. A canvas is best for seeing how a handful of files work together. Code Crux keeps both: a file explorer and a canvas view.

Can I edit code on the canvas?

In Code Crux the cards are code files, so you can work with the code in context and switch to the regular editor view when you want a focused text view.

Is a code canvas useful for large codebases?

Yes, as long as you map a slice rather than everything. Put the files for one feature, flow or bug on the canvas. A map of every file is as hard to read as no map at all.

Can several people use the canvas at once?

In Code Crux, yes. The canvas is part of the shared workspace, so collaborators and AI agents show up on the files they are working in while you all look at the same map.