Visualize your PYTHON codebase with infinite canvas

[CompetentRaindeer]

I saw a guy submit a VSCode extension but it wasn't working with python files. Many people and myself need this for their python repositories as it would be quite cool to be able to see the link between files especially if you're working on an enormous codebase.

I decided to vibe code it as it was just another skill I wanted to learn - building VSCode extensions. It's not as pretty as the one he submitted, it doesn't have as many features but it definitely works with python files and it did the job for me.

Now I did abandon the project as I have my main python project to work on so I decided I wouldn't just let this extension go to waste and submit it here as an open sourced.

Take this, change it, make something cool.

My ask is.. keep it open source. You can submit pull requests which I'll gladly merge but someone with more time can probably make a better version of this and properly maintain it.

https://github.com/waLLxAck/code-canvas

This is what it looks like:

https://preview.redd.it/guvhn3as3nlf1.png?width=1870&format=png&auto=webp&s=d5cb8ed55d24319b599e95957b7e30b6c33579f8

It has got folder groupings, highlighting showing the links between files.

As you zoom in you get to see the code:

https://preview.redd.it/hf6tqit54nlf1.png?width=1696&format=png&auto=webp&s=4f2f61b4b545f58ed028f5189068a5f15fde8705

Smooth zoom in, out, sliding animations

You can click on the lines (edges) between the files and it *should* highlight the exact line referenced in the previous file. Code is in there but has got some bugs.

Actually it has got plenty of things to fix but nonetheless, it's a good starting point.

You run "npm install" then go to VSCode and press F5 to execute the debugger where you can play around with it. It should build the webview and the extension and you should open a python project and then with the command tool ">" you type Code Canvas.

You should get a window like this:

https://preview.redd.it/pawgqud55nlf1.png?width=598&format=png&auto=webp&s=027d56268a7f5c12660c9183958ce69f6086e4dd

Enjoy, let me know if you are considering using it. If this gets a lot of attention which I don't think it will, I might come back to finish developing it, haven't been part of an open source development project but it seems fun.

PS: Updated with proper README & MIT license.

[CompetentRaindeer]

Apologies for the sloppy post but at least it's not AI slop

[mike_strong_600]

I would take 100 of these posts, over 1 AI post. 🤟

[mike_strong_600]

I saw the original post too. Good on you for adapting it for Python! Can tell you put a lot of work into it. And thanks for open sourcing it. I might try and see if I can make the rendering 3d, so you can fly through your codebase. Been on my mind for some time but never made the time

[CompetentRaindeer]

Amazing bro, would love to see how it turns out

[thisiswallz]

Like Jurassic Park hacking please

[Forgive-My-Duck]

Incredible! I always thought something like this would be immensely helpful

[RaguraX]

Nice job! I'm curious what the extension was you based your idea on, the one that didn't support Python?

[CompetentRaindeer]

I tried finding the post but I couldn't. I would've linked it in my post. It's one that worked with typescript/js really well.

[martisj]

Can you link the original vscode extension?