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 (20)

  1. Drew Marsh says:

    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. 🙂



  2. Drew Marsh says:

    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.

  3. Wow, that’s seems pretty useful. I can’t think of the number of times I’ve done something similar on paper to work out all my class hierarchies. However, I wonder at what level you would get too many classes (i.e., the program gets too big) for this to start breaking down. The thing that sucks is that computer screens are just too small compared to, say, a white board… so once things go off screen it becomes a matter of out of sight out of mind 🙁 I wonder if there is some way to visually group things at a custom level of abstraction to overcome that… anyway… got me thinking, so thanks! 🙂

  4. Justin Bailey says:

    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!

  5. Justin Tabb says:

    This is an awesome development, can’t wait to use it!

  6. rhm says:

    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.

  7. kaelr says:

    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.

  8. Walid says:

    Great work! Assuming you’re in the listening-2-feedback mood, few desired additional features may include user-customized views of the code graph including possibly execution path(s), either automatically sniffed out or user-assisted with extra layer(s) of meta-data that may be saved and used later by same or other users. This can be further enhanced by scripted code walk-throughs (something from my past albeit strictly manual) for other users/groups, multi-layered for presentations to various audience groups. Thanks for the good work and hope we get a chance to actually use this soon.

  9. Rachel Blum says:

    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?

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

  11. Jimmy says:

    This is amazing.

    When will we be able to download and test it ?

    Can’t wait to try it !

  12. jonh says:

    awesome. I too can’t wait to try it

  13. Raymond says:

    This looks great!

    Very good job. I can definitely see where it will be of great benefit to developers

  14. poi2punk says:

    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?

  15. zproxy says:

    What are the latest news on this project? I like it!

  16. mkd says:

    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. 🙂

  17. Rage says:

    Please make it downloadable to public!!!! =)

  18. Ilija says:

    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.

  19. Roland says:

    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!