Code Canvas

I’ve been working in Microsoft Research on a project called Code Canvas for a while now, and we finally got through enough of the patent process so that I’m able to release some details publically.

Code Canvas is a research prototype focused on spatial orientation of code as the foundation of an integrated development environment. It is a spatial (2.5D) representation of source code, visual designers, and project-related artifacts that utilizes infinite panning and smooth semantic zoom for navigation. It is also extensible to allow analysis overlays and graph-based relationship visualizations.

Whenever a developer draws their code on a whiteboard, they are applying a sense of space to their software that includes directional relationships and architectural boundaries. Code Canvas lets developers write their code on a two-dimensional infinite canvas instead of in tabbed editors, so all of their source code is arranged in the same way as it would be on the whiteboard.  They can still write code as they do today, in C# or C++ or whatever, but the directional relationships and architectural boundaries are part of the same canvas, and they can easily navigate and zoom smoothly in and out to understand everything at once.

In addition to utilizing spatial memory, the ability to overlay visualizations among multiple files at once is proving to be extremely valuable, especially when the visualizations are drawn directly on top of the same source code that you have already been working with.  This essentially takes the canvas from a simple code editing surface and turns it into a full-blown diagramming surface, but I’ll have to go more into that later…

In the mean time, here is a somewhat old video of Code Canvas that shows some of the first features I implemented when getting started on this project.

Comments

• Anonymous
  March 27, 2009
  I see this as a truly revolutionary step to the way we could be working with code. Especially once touch kicks in this could be an amazing way to navigate your solution and work on your code. Can you actually start to edit the files once you drill down to that level? I don't mean is it technically possible, because of course it is, I mean... have you reached that point in the implementation yet? Awesome work though. Here's to hoping we see it in the next version of Visual Studio. :) Later, Drew

• Anonymous
  March 27, 2009
  Duh, apparently I musta lost focus during the part where you actually show the editor working, but I just watched the video again and caught it. AWESOME stuff.

• Anonymous
  March 28, 2009
  The comment has been removed

• Anonymous
  March 28, 2009
  That is really impressive! Will we ever get to see a download? I'd love to throw this at my own code. Please, please get on Channel 9 with Charles and talk about this stuff! http://channel9.msdn.com

• Anonymous
  March 30, 2009
  This is an awesome development, can't wait to use it!

• Anonymous
  March 31, 2009
  You also got a Spanish review (http://elbruno.com/blogs/elbruno/archive/2009/03/27/future-code-canvas-peinate-que-viene-gente.aspx) of course an excelent one !!! great work

• Anonymous
  April 05, 2009
  Why the file layer? Files are a legacy container for source code. I can see why commercial programming environments are still attached to them, but for a research project, they don't add anything but additional clutter. For that matter, assemblys are a deployment artifact. Does the person trying to understand how code is structured in a project really care that much about which assembly a class is in? At some point they do, so you might want to turn that view on, but most of the time you'd want to arrange the classes by either inheritence relationship or by some coupling metric.

• Anonymous
  April 06, 2009
  The file layer is mainly there to make the transition from file-based code editors to an infinite canvas more understandable to a wider audience.  I agree that things get much more interesting and useful when you are no longer constrained by the files that store the code on disk. Assemblies aren't the only way of grouping and clustering things together on the canvas, but it was the only one shown in the video since that happened to be the way the Visual Studio dependency graph was drawn in Architecture Explorer.

• Anonymous
  April 08, 2009
  The comment has been removed

• Anonymous
  April 14, 2009
  That's an excellent first step towards a better development environment. It's sad you went through patent process, but I guess MS Research doesn't run on love alone ;) What I'm really interested in is how well this holds up for larger projects - I would imagine there's quite a bit of Visual Clutter (tm;)? The other question is - can I abandon the file view and rearrange individual classes, without being constrained by the container?

• Anonymous
  May 10, 2009
  Microsoft Research nous présente leur travaux sur l’interface homme machine dans le domaine de la programmation.

• Anonymous
  May 12, 2009
  This is amazing. When will we be able to download and test it ? Can't wait to try it !

• Anonymous
  July 09, 2009
  awesome. I too can't wait to try it

• Anonymous
  July 09, 2009
  This looks great! Very good job. I can definitely see where it will be of great benefit to developers

• Anonymous
  March 14, 2010
  Dude, this is just great. I't somehow looks like Apple's Quartz Composer tool that I was using for some time. I've been waiting for a while for somebody to come up with a similar solution of a "visual programming interface" for the Windows PC's. And you are one of them. Is it possible to give it a try?

• Anonymous
  August 05, 2010
  What are the latest news on this project? I like it!

• Anonymous
  October 05, 2010
  This is very cool. I was forced to read "Software Development with Code Maps" in Communications of the ACM Vol 53 for a "Software Methodology" class at UC Santa Cruz. The idea seems pretty great so I found this site and looked the work over. Very, very cool. Now make a plugin for XCode, please. :)

• Anonymous
  July 08, 2011
  Please make it downloadable to public!!!! =)

• Anonymous
  October 18, 2011
  When will this guy be available? Hope in the near future. Awsome, really awsome work. Besides: Are you the inventors of the Semantic-Zoom-Thing? Thx.

• Anonymous
  February 15, 2012
  Why is there no more information on this? It looks absolutely incredible! I would love a beta version to try. This is probably the most revolutionary development to coding I have seen to date!