I often end up in a situation where I keep losing track of whatever method I'm reading since I need to compare where a method is called vs its definition, which is frustrating. I like that I can just "pin" the method to the side, and can glance at it without accidentally switching to scrolling through the whole file in the pinned view.
I tried it out for a bit and I found it a bit too mouse-centric unfortunately, and I quickly ended up in a situation where I had way too many floating windows to manage, especially once I got into checking out methods inside of other methods. It would be nice to have an arrow or line to keep track of what the "parent" window is so that it's easier to build a sort of flowchart.
Regardless of my personal issues with it, hope you succeed with this! It's great to see alternative ways of thinking in this space, as I often feel things could be better but it's also hard to imagine how.
1. One window. 2. Minimal everything. 3. Most importantly, no tree navigation.
If I need to jump to a file, I either use recents menu in Intellij or use file markers to jump to it, means I have to remember the filemarker and have intent to go there (I'm using IdeaVim plugin for vim hotkeys). This, to me, make programming much more focused and pleasurable. This is part of my evolution from multi screen to widesreen and then back to a single screen.
For large and mature codebases like you mention, I just use LLM to guide me around.
- obsidian has similar feature called "Canvas", perhaps look at their work flow.
- For me this is uselles as a standalone tool. I need it as Idea plugin.
- creating layouts is the part I hate. Perhaps some AI that takes Git patches, or bug fixes and creates layout based on that.
- sharing layouts needs to be super easy
- integrate Git history as another dimensions. Diff and blame N notations in editor.
- there are data (git commits) that you can use to train AI.
- integrate debuging as another dimension
- integrate data from profiler...
(In particular, I'm waiting for the option to turn off the AI stuff, at least for when I am trying things out.)
I especially love the ability to zoom into a function and hide the rest of a file. I've wanted that sort of thing a surprising number of times. I'm thinking one could also use this to virtually rearrange a single file by pulling the functions in that file that you are working on next to each other easily?
In addition to the editing interface, I think there are probably a lot of visualization opportunities in editors:
- what's the interaction between my code and third-party dependencies? - what are the dependencies/call graph of my code? or perhaps just a portion of it? - call graphs can be nested — perhaps you care for a dependency graph at the class or module level, or perhaps you want to "drill down" into the call graph inside an object
In all these cases, being able to seamlessly transition between the visualization and editing — like you seem to be aiming towards — seems like the killer feature.
And, of course, there are lot of other interesting visualization opportunities once you have any sort of graphics in your editor:
- heatmaps of code churn - heatmaps of code performance - tracing variable usage - and, of course, lots more (https://adamtornhill.com/articles/crimescene/codeascrimescen...)
One last thought: if you haven't read _The Programmer's Brain_, you should at least listen to this podcast. https://se-radio.net/2021/06/episode-462-felienne-on-the-pro... There are a bunch of editing ideas related to how our brain works that I haven't seen well supported in an editor yet. You took one step in that direction — maybe there are some more opportunities?
Looking forward to what you come up with!
Note that this "navigation history" I'm thinking of would be completely unrelated to my edit history; undoing and redoing an edit would not bring me forward/back in my browse history, and vice-versa (although there could certain be keyboard shortcuts for traversing the navigation history as well).
I look forward to checking this out once that option is in place.
We found the canvas provided too much freedom.
It reminds me of a feature I've always wanted, and even built manually a couple times, but never in a shareable way, which is to unravel a code path into a single script or source file.
I've want to be able to set something like a breakpoint and hit an "unravel" button and be left with a single file that shows every action that occurs leading up to that point. Ideally it would be runnable as a single script as well. This is essentially the view a step debugger gives you, but I want to see it all in a single file from start to finish rather than I. Multiple layers referencing multiple files.
I really liked using PaperWM¹ for a while, however, I'm still waiting for it to get more stable.
Another system that is sort of similar to this concept, Pipeworld² (part of the Arcan project) is an impressive research UI experiment which is a bit too far out for my daily use.
1. https://github.com/paperwm/PaperWM?tab=readme-ov-file#paperw... 2. https://arcan-fe.com/2021/04/12/introducing-pipeworld/
Reminds me of the now defunct SourceTrail tool: https://github.com/CoatiSoftware/Sourcetrail
Actually, seeing lines between the code and where you opened it from would most likely be useful!
I want this to integrate well with type checkers. For example, if I edit a TypeScript function and it causes several type errors, it's nice to open all files and jump to the errors. If more edits cause other errors, open those files again. This would make code changes much easier!
This looks like a good start.
Understanding how all of those are tangled together would simplify reviews a lot. Especially if the code in question touches places that I haven't visited in a long time (or written by someone else who might have slightly different style of architecting).
I could already see myself using the tool for pair coding / explaining my own PR to others, this looks seriously nice for any sharing.
Use case 1, which you solve, is traversing your own - rather large - code base to do editing, but then there is also the usecase of traversing a new code base base and understanding it by reading/writing a unit test. And also the case of a person who is new to a language but is trying to understand a project. All while that memory pressure is causing him to forget/tire.
In general, I feel one comprehensive way to solve this is using the Theory Of Mind idea from AI-Planning:
1. Set the goal and subgoal of what you are trying to do: Typically these are: Edit code base to add feature, Edit, the code base to add tests, Understand code base by reading/executing a test. But there could be more based on goals and intentions of the person reading the code. These goals come with a set of Actions the system is capable of.
2. Your system can generate/propose a set of actions to meet that goal. Starting with the basics. LLMs could be used to generate "ideas" based on the goals which could be converted to a formal plan which could then be presented to a human in NL [1]. These plans could be just steps based on call graphs at first(very deterministic). But it could also mean that changes could affect other functionalities that you previously understood and now the understanding is obsolete because of those changes. Implementing an Agent that knows what you know and doing it well is a Theory of Min(ToM) implementation that is the holy grail of AI.
We're building a canvas for data / analytics at Definite[0]. Quick demo[1].
Otherwise, it needs to be more like canva / miro, where the canvas is a rich target to place notes and graphics with the code editor embedded in it.
I think iterating on the linear jupyter notebook (eg. make it a graph of executable script blocks) is a worthwhile thing to do... but just having multiple code windows side by side is something you can already do, with normal code editors.
So... I think most people will find this isn't as exciting as they imagine.
I downloaded it and had a play; honestly I found it quite charming and it worked well, but I immediately wanted to put sticky notes next to my code files like it was a miro board, and then zoom out to see all the files arranged together; but you can do neither of those things with it currently.
So... cool idea, but after using it for 30 minutes or so I couldn't really see any particular reason currently to not just go back to vscode...
I really really wanted to open it up, drop 5 files onto the canvas and them zoom out and edit them all at the same time, and I couldn't.
(but hey, you can literally just download and run it, and it works. Have a play, see what you think. That's just my first impression of it)
(side note: boo. AI. There's literally zero value in the AI attached to this. Just rely on your vscode extensions if you want that. Having it baked into the editor is lame 'I also do AI!' hype. I couldn't see any reason it has, or you would want, to have baked in AI instead of any normal vscode AI extension)
How do you feel about that view of navigation?
It seems the sideways arrows in the demo only appear for class based methods and not plain functions :(
Overall I love the idea and have wanted a graph visualization of a codebase showing every function call, who calls it, and who it is called by which this seems to do but for classes. Hope to see this working for functions as well soon! Great work.
The zoom control with the wheel seems wrong too, scrolling up should zoom, not dezoom.
I also would like to display a single function in a pane but it doesn't seem to work, at least with Go code.
All in all that seems very well done and very close to what I'm looking for, but the UI is a bit confusing
Some tools can do that however:
On Windows I use Code Browser – https://github.com/nilslindemann/Code_Browser_49 – It has its bugs, but I still love it very much. Does not work decent on Linuxes (Newer versions do, but miss features)
Leo is another editor, but it annoys me in many ways. It is just not polished enough.
Nice to have another contestant now.
I find multiple workspaces works well for large context switches, then within each workspace, maximising pixel space is done with sloppy/mouse focus, partially overlapping windows and the ability to split my text editor windows easily.
1. add a small button in the window title bar to pick a custom title or background color (from a predefined list of 16 or so colors). The color should be remembered somehow. With many windows open it would help quick orientation.
2. an ability to quickly load/save the current layout. When I work on feature A I want to see these windows, ... When you load a layout you could either fully replace the current one or add to it.
I love seeing software design that throws out convention and tries something new. This might not end up being for everyone, but if it's for someone, then it's helpful. The fact that it's based on VS Code means I could potentially use it for all of my professional work.
Sure is a good way to start, but imo you'll need much more ergonomic points of transversing, and nail for at least a couple dev scenarios.
1. Allow zoom ins and zoom outs in the canvas. It is super hard to navigate through the files otherwise. One way I can see this working is I would make a file graph view which can be obtained by zooming out of it enough, or just a toggle somewhere. That way I can easily navigate through the files.
2. I was not able to create edges or connection between the panes. I had opened a python/django project. So if there is a feature for manually creating edges between the panes, that would be awesome.
3. There are sometimes files that are more important than others. For such cases if I could visually mark those, say perhaps by color or labels, the panes would make more sense. An example for this scenario in django would be, different colored panes for views, forms, urls, models and setting files.
Apart from the features mentioned above, I did not miss anything at all. Once again great work.
I don’t know, looks cool. But seems like it would get annoying after a period of time. Too much dependency on a mouse for me.