I'm not sure about the AI features but the concept of working with code on a canvas and having some sort of flowchart UI has been a dream of mine for some time. I mainly do data processing and draw lots of flowcharts for communicating pipelines and also for myself. Having a development UI which goes in that direction somewhat would be great for handling unwieldy codebases written by non-CS folk.
Yeah kind of. I have worked with LabView and liked the flowchart UI for handling lab instruments, but for somewhat complex algorithms it got unwieldy really fast.
I have the feeling LabView is a good tool for designing control panels and visual tools in general ("front-end"). It is less suited for implementing back-end algorithms. I guess I wish for a similar tool which can also handle the back-end (in the context of my data processing job).
The problem is that I don't know myself what UI I would actually want for a "canvas-based editor". Some mixture between a visual flowchart and being able to edit code in each box? I'm obviously not the first person to think about it and it seems to be a non-trivial problem.
This is really cool! I like the fact that when you navigate to a method/declaration/whatever, it only contains the relevant snippet, rather than opening a secondary tab with the whole file scrolled to where the definition is.
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.
>I like the fact that when you navigate to a method/declaration/whatever, it only contains the relevant snippet
I see why you like it, but I suspect it could be sum negative in a long run. I believe it's beneficial to just be aware of what and where is in the code. Can it be that few years went with a project, and you still don't know what all those files are about because you has been working only with small chunks?
Yeah we have some work to do to make it easier to navigate on the keyboard.
For the "parent window" what are you imagining here as your frame of reference? This idea makes sense but I'm wondering if you want to designate a specific window as an anchor vs some heuristic that identifies such an anchor.
We should be placing the editors in your viewport so that you don't have to do manual arrangement. We try to fit as many editors in your viewport as possible.
I use a 15 inch laptop and it works well there. I do not know how small your screen is, but please let me know if you feel like it's not ergonomic for smaller screens.
Congrats on the launch. I've actually been going in a totally separate direction lately, it helps with my focus and ADHD tendencies to jump around and get overwhelmed.
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.
Makes sense! Curious how you use LLMs to guide you around?
In my own experience, I ask the LLM where a functional flow is and it does a great job of creating an entrypoint, but I frequently have to figure out the finer details myself and sometimes the LLM points to something related, but not quite what I was looking for.
Idea can already do everything Haystack can do (open several editor windows, only open single method, code navigation, callers...). On large screens (quad 32" 4k) it is quite useful.
Do you have a quad 32” 4K screen setup? Do you use them grouped into a 2x2 grid? I’m curious how viable as setup like this is.
I’m currently using a single LG OLED 42” 4K TV as my monitor so I’m interested in large screen setups, but I find the 42” size to already be almost too big so I’m struggling to imagine working on four 32” panels (I guess that would be similar to working on an 8K 65” TV?).
I've been wanting to try something like this for a long time! Is there any way to sign up for updates?
(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:
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?
Unfortunately we haven't built a clever way to sign up for updates! I'll think of the best way to do this (eventually we'll push updates directly in the product).
Working on adding the copilot opt-out as we speak!
I love the ideas here and I would like to discuss some of these with you. If it's OK with you, I am going email/DM you!
In general, we would love to engage in conversations with folks ([email protected])
Added an opt-out for the navigational copilot on Mac -- just bring up the command pallet (CMD+SHIFT+P) and use the "Opt out of navigational copilot" command. Coming to Windows/Linux soon!
Note that we only send data to Open AI if you have a diagnostic indicating that you're calling a function that doesn't exist.
I really like the way it lets you navigate from function to function (and file to file) and back again. What would be even more useful would be to have a "history" window, similar to your browser's history, that would show the list of files/functions as I'm navigating from one to the other. This would allow me to step forwards or backwards, or even jump to anywhere in my navigation history, without having to slog through the open windows.
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).
> We do not store or log your code anywhere. We do send snippets of your code to Open AI as input for our navigational copilot. We'll add an option to disable this soon.
I look forward to checking this out once that option is in place.
Added an opt-out for the navigational copilot on Mac -- just bring up the command pallet (CMD+SHIFT+P) and use the "Opt out of navigational copilot" command. Coming to Windows/Linux soon!
Note that we only send data to Open AI if you have a diagnostic indicating that you're calling a function that doesn't exist.
I published a paper comparing navigation time with a canvas-based editor (Code Bubbles) vs. traditional tab-based editor (Eclipe) vs. a carousel-based editor (Patchworks, a tool I designed).
This is cool - I haven’t really thought much about the spatial organization of my IDE before. Reflecting on it now, I realize I don’t even use the tabs in VS Code anymore because I have way too many files open. I just look at one file at a time, and when I need to switch I use Cmd-P to search or jump between recent files. Works well but requires me to keep the names of files/directories in my head all the time.
I mainly use ctrl-tab to switch between tabs for the same reason. Recently active tabs are first on the list so it's a fast way to switch between recent tabs. For not-recent tabs, I still don't use the tab bar but press ctrl-tab and then select a file using mouse in the ctrl-tab dialog (or just tabbing many times)
Oh wow didn't know that existed. You should try cmd-p too! If you hold down Cmd and press P repeatedly, it acts like ctrl-tab, but you also have the option to search files at the top. I suppose you could remap it to ctrl-tab and then you'd get it for free.
> Based on our qualitative observations, participants’ long navigation times in Eclipse appeared largely due to time spent scrolling through files full of irrelevant code (as opposed to switching tabs), and failing to see the methods they wanted among that code.
> [...]
> Because users of Code Bubbles and Patchworks were able to open code at the granularity of methods, they had the advantage of never having to scroll through code to reach their navigation targets.
Have only read a bit of this paper but from this discussion over Eclipse it seem that the participants could be a lot more efficient if they used it more like an IDE than a multi-tab editor.
Finding methods should be much less of an issue having an (alphabetically ordered) outline view.
This is super interesting. We have thought about having a grid vs a canvas, but decided to go with the canvas as we actually thought it was easier to navigate. I'd love to talk with you (I'll email you) if you're OK with that!
Interesting! Patchworks somewhat mirrors how I setup my Doom Emacs, with 4 - 6 panes of code, across multiple workspaces (which can be flipped between via SPC TAB (number)
amazing analysis. for me, either canvas- or carousel-based editor solves the mental issue of having to also load a significant amount of cognitive data all time you deal with very large codebases. (it also automatically require you to have a wide screen sufficient to make use of the tool properly).
only point here is to get used to deal with files on the horizontal, not vertically way of thinking, which is kind of rooted in the way we program first hello world.
Congrats on the release. This looks like an excellent, well implemented in tool. I look forward to trying it out.
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.
Why? What problem are you trying to resolve? What outcome do you want?
I find that when folks focus on specific implantation details instead of sharing requirements / parameters / outcomes that much gets lost in translation.
Why do you want this implementation? What function / purpose would it serve?
I want to be able to look at an entire codepath as if it were the only thing the application does. I don't want to step through multiple files and look for references between layers of a codebase, with all the alternative codepaths in view. I want everything laid out in a single view, serially, so I can see from start to finish how the code was run with the pre-determined inputs. And then I want to be able to debug that one file to see how changes affect it.
And then, ideally, I'd like to be able to have that file map back to the original so that the changes I implemented can be directly implemented in the original code.
I'm not sure what folks you're referring to, or implementation details you're asking about. It's a feature I want and that I've even implemented in hackish ways, and I'm surprised it hasn't already shown up in more advanced IDEs yet.
This is an interesting idea! I've thought of something similar, where you can play with the inputs (or ask AI to generate it) so that you can see how that specific code flow behaves.
I'd love to see the hacks you've done to make this work if possible!
This looks really interesting and well thought out. Nonetheless, I feel like the OS window manager should provide this kind of experience, with appropriate hooks so that an IDE can implement this sort of experience with native windows.
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.
Not related to the main thread, but I want to mention that as a display server, Arcan is superior to everything else out there (x11, Wayland and whatever proprietary software is used in Mac/windows).
To make things even more impressive, it is:
- Also a game engine
- Also a multimedia Framework/Library
- Implemented over the course of many years as a side project of a single programmer.
It is one of the most impressive projects I've seen (if not the most impressive) and the dev is a true genius of software design and hard work.
As far as I know the old mode is also no longer the default. At least it isn't in Fedora and in GIMP's own release notes they also don't use the old mode [1]
OS windows are a hindrance for any workflow needing semi-permanent layout. It's ok to place two or three monolithic apps side by side, and maybe to pull apart separate working sessions at different virtual spaces. It also requires constant bookkeping to clean up all the individual windows you no longer need.
That's very different from a spatial layout, where you can juxtapose related code elements near each other, and they remain in those places for as long as you're using them, and then get rid of all them together by closing their common container.
There have been attempts to create new, more spatial work styles on window managers, but the industry is too set in their ways on how windows should be managed, and WMs are complex beasts with many moving parts. So it's usually better to keep those experimental tools self-contained within their own window or app.
Alright, I have a mismatched setup: a 1080p and a 4K screen. No matter how you twist it, the virtual screen* will have dead zones. Self-management of a single full-screen canvas is easy (browser F11). But then I will want to use the entire physical screen estate with the editor and it'll end up re-implementing large parts of the window manager just to position the windows where they belong, rendering at the correct monitor DPI.
Further, just from the shown animation I can already see the same problems you'd encounter with a lot of screen space and old style window managers: you grow tired _very fast_ of moving and resizing additional windows yourself to fit more on the screen. "Maximize (on current screen)" is the only automation step in this direction and it is decades old. Windows' "snap to edges" is a semi-manual attempt at assisted window management.
* in Win32 terms, a rectangle encompassing the entire region with all visible screens
This is exactly the kind of window manager I've had in mind for years for the OS I'm making. Glad others feel similarly. Here's to hoping I get that far!
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!
Yes, but it's also nice to edit the callee immediately after editing a caller. I sometimes edit the caller first. Following the flow of caller -> callee -> other callers makes editing code easier.
I wonder if you've considered (or if there's already) an integration to Git to assist in reviewing pull requests? I often find myself jumping around in VSCode trying to understand some subtle changes in the PRs I'm reviewing which might have small one line changes to many functions.
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.
Yes, that was my first thought too. The concept is similar.
Get rid if the source-files and put every function/method in its own "editor". However, as far as I remember navigation to/from callers was not possible in Smalltalk.
You don't have to get rid of files; while the Smalltalk image was great and offer some advantages, there has been Smalltalks that worked on files and Lisp showed that you can have still have a working image with files.
> navigation to/from callers was not possible in Smalltalk
You can navigate implementations and references to symbols, which mostly work like how unannotated dynamic languages (like Ruby, Python) would work.
There would be false positives; but it isn't as bad as it sounds unless you look up common symbols like `#value` and `#value:`.
In some Smalltalk environments and some extensions, you could narrow them by scope, like look up references to this symbol within that package. I think Dolphin did that.
I did not know about Understand. This is really cool -- thank you! I really like how Understand enables you to understand how many upstream dependencies you may need to change when refactoring.
We hope to push it to the next level by helping do those refactors for you in an understandable way!
You can certainly push it a different direction with accessible pricing models. No matter how cool / useful Understand actually is $1,000 / year for an indie dev is too high.
Now that we have LLM models we should really investigate going back and forth between model based representations and text based representations, i.e. allow people to edit both and see the changes reflected in the other.
We write model based code all day, but probably 75% of my time is spent dragging things around and making them look pretty with no net change in the final generated C code. Can't skip that part of the job because the whole point of a model is to make the code easy to understand, but it seems like a good application for an AI.
Awesome!. I like the focus on a specific part instead of the whole file. This is built to address a very clear set of human problem: Working memory and distraction due to clutter. In general, using a machine to work with the human to solve a problem: Understanding and editing a code base that is formidable.
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.
In order for the canvas to be meaningful, the individual code windows need to be related to each other; eg. like a visual programming language or a notebook, with sockets and connectors.
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)
We do show arrows between related objects (if you CMD+click on symbols, or use the floating toolbar to zoom into a function) and you can traverse the codebase like a graph. Do you feel like that is insufficient? If so, what would you prefer?
Curious about "then zoom out to see all the files arranged together". You can zoom using CMD/CTRL + scrolling. Is this what you want?
Our intent is to go more in the direction of "like a visual programming language or a notebook, with sockets and connectors" and make editing/refactoring easier.
RE AI: that's valid, but we do use it to cut the tedium out of finding the right interface/class to add a method/function to.
If you’ve used any canvas style app you’ll fully appreciate that zooming out and then zooming back in is almost without fail the way people navigate.
Even visual code editors. You’ve used the unreal blueprint editor right?
They do not use search.
Search is for finding canvases not for navigating around them.
Jumping between symbols with a command is what existing editors do. You’re doing your excellent work a disservice by sticking to ways of interacting you can already do in existing editors.
You can just use a normal editor for that.
(The same goes for any kind of AI symbol search; it is maybe valuable, but why would you not just have it an an extension in an existing editor? It’s like the rabbit; why was it not just an android app? -> no reason. The AI in it was not meaningfully linked to the functionality of the device)
Re: zoom out.
Ohhhh… that’s lovely. That’s what I wanted. You should put that in your demo.
I tried scrolling and cmd-+ but that zooms the entire ui.
That’s a super power. You should make it more obvious you can do that.
+1 for expanding jupyter notebooks to non linear layouts.
While trying out some code I would love to be able to explore multiple "trains of thought" (without having to move code in and out from normal python files).
Awesome I've wanted this exact kind of thing for many years - a code editor that lets me create funnels of code sections/functions for flow through an app - because you're often working through a particular flow in an application spanning many files. Definitely trying this out
The whole recent crop of extendable editors (atom, vscode, zed, etc.) seem to have been created by a younger generation that never used emacs (and are perhaps scared of it because they find Lisp weird) and so are reinventing the wheel.
I’ve never used Emacs, but heavily used Vim/NeoVim for many years.
I recently switched to Zed because I was tired of shitty terminal emulators on Mac, and wanted something designed from the ground up with speed and GPU acceleration in mind. All my screens are 120hz and I needed something capable of keeping up with that.
I think new editors are created because of an underserved aspect of the classics (Emacs/Vim)—in Zed’s case it's addressing the poor GUI experience—and then have to recreate tools in their new frameworks. It’s a good thing. Monopolies are bad, and rethinking how we do things is good.
Very good work! What we would actually more helpful is a Window manager that acts like that instead of an IDE. That would be very useful for overall experience.
Ideally window should be left to window managers.
What would be more powerful is force directed graph of windows.
I can't get jupyter notebooks to render in the editor windows while I know the python language server isn't up and running yet being able to open the files using the extension on a vs code based IDE would be useful
Looks pretty interesting. A Figma style zoom in and out could help give you the big overview. I always get lost in the gazillions of tabs in IDEs. Stuff like this allows people to use their spatial memory, which is underutilized in a lot of tools.
I hardly ever navigate by clicking on a tab. I use keyboard shortcuts to navigate by filename, symbol, etc... Might be worth a try if you're getting lost in tabs, your IDE probably supports it.
I downloaded this and opened up a React based project that uses functions and not classes. I'm not seeing the sideways facing arrows to show the call stack of the function I'm looking at and have my cursor in - the functions that call the function I'm looking at and the functions that reference the function I'm looking at.
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.
Sorry for the frustrating behavior. It should actually work for plain functions and I just tested with a TSX component we use. I think something went wrong here.
Are you using JSX components? I'll try to repro this on my end.
I'm using a mix of TSX/JSX/TS/JS. I wasn't seeing it working for any of the functions (component or plain JS) I have unfortunately. Will keep an eye out for any updates you make to resolve this!
Awesome project and great work on it! Congrats on the launch :)
That's a very cool concept but I don't understand how to use it. The 4 buttons above a pane (?) have no label or tooltip so I don't know what they do. Even clicking on them nothing happens, so it's not clear what the arrows, or blank paper, or the... thingy, do.
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
In general, the issue is that we can not NAVIGATE INTO sections in files, but just can FOLD THEM AWAY. Also, a system of linking to sections is missed.
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.
In the end isn't it about maximising the pixel space you have in a way that avoids lots of panning or scrolling, allows you to easily arrange related parts nearby, all while maximising the ability to context switch?
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.
Interesting. It reminds me of the text editor Sam, in a weird way. A very, very evolved descendant of Sam, at least.
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.
The landing demo really needs to show off the "infinite" part, instead it's just showing that windows in windows are clutter and need manual resizing to fit inside the box. E.g. show how it helps structure clusters of a hundred files all open at the same time, on an infinite canvas, in a way that is quickly traversed?
This is good feedback. The problem we encountered is that everything gets incredibly tiny if you zoom out, but we'll iterate on making the landing demo better.
You only need to show off "that" you can zoom, e.g. showing a faster than normal zoom-out to the overview and then zoom-in on a different cluster, and then a view restriction that "drops" all the files not involved the codepath(s) we're currently in for more focused (but still much larger than one canvas) workspace.
Yeah agreed. The demo animation on the front page doesn't look any different than just opening up multiple windows in an IDE. It's only when I watched the YouTube video (which I think many people will not bother with) that I saw what was unique about this.
Nice work. It may not be a priority right now but I personally really don't like to have to move windows, see them overlap or not align because they have different widths, and have to resize them... I would love to see a good tiling (with optional padding between them maybe) Some kind of vertical masonry layout ?
I am VERY interested in using this on Linux! But am only able to use it when the openai opt-out is available on linux. Hope you guess implement it for that build soon!
Very late but if you would like to follow along for updates or give me feedback, feel free to follow me on Twitter or give me feedback: https://x.com/AkshaySubr42403
This is awesome. Can't wait to try it. I feel like this is how I work with code already but in a much more cumbersome way. My only wish was that it felt more like a JetBrains IDE and less like VS Code, but that's just personal preference!
Congrats on the launch! Looks good! What's the plan for commercializing it? code visualization is one of those things that sound incredibly useful for developers but actually really hard to sell/get someone to actually buy it.
Good question! We will never gate the visualization itself behind a pay wall. We plan to add helpful features, such as searching your codebase using natural language or automating/improving refactoring, and experiment with gating those behind a paywall.
Unfortunately VS Code's Python language server is not open source. We're working on creating our own language server for Haystack, but Python is indeed not supported at this time :(
I posted this previously, but this, and notebook style output, then flat textfile view would be the sweet spot for universal development. I vasilate between notebooks and vscode to develop most of my projects.
Looks pretty interesting. Although I have been a Java developer and has a preference for Eclipse, would like to see if this can ease out some parts of development for me.
Very cool concept! Will it be possible to make "boxes" with labels/titles so different frames can be grouped? And will zooming of the canvas be supported?
Ooh grouping is a cool idea we didn't consider! Curious to hear what you want out of grouping -- I can imagine it's useful to label functionalities and move different editors at once, but would love to hear from you.
You can zoom in/out of the canvas with CMD/CTRL + scrolling! I do think this can cause blurry text, which we definitely aim to fix
Love this, As a visual person wanted something like this for a long time. Please add more features and video guides on how to use this most effectively!
it brings me a thought: is it just me who kind of hate the "super-modular-files-with-10-lines" way of doing things today? would love to get back to the way of doing things in the past, like super well-commented files, with hooks here and there to help you navigate, single file for single contexts...
Hmm sorry for the irritation. I have a barrage of questions:
1. Which language is this for?
2. Do you have the relevant language server installed (i.e. the extension for the language specifically).
3. What OS are you on?
4. What else doesn't work? Can you go to definition? Can you see the dependency arrow buttons?
I don't and never have used Lab view, but I am interested in adding features to better visualize data flow. I feel like this can easily err on the side of being confusing/annoying, but do you like Labview's data flow features?
I don't mean the lack of data flow like a bad thing. I think your idea might be better, since data flow aspects might be difficult to organize in a 2d plane. It gets cluttered fast.
Okay! first thing first, this is super cool. Kudos to the whole team. I did some fiddling around and found it usable and I think I can get used to it. However, there are a couple of things that it can improve on. And I have listed a few here.
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.
You brought up a great point regarding mouse dependency. The end goal is to make this keyboard navigable (I myself don't like taking my hands off the keyboard), but we also need to do it in an intuitive/easy-to-use way which will be tough.
Nice! I think this is a step in the right direction of the future of IDEs. So tired of switching between dozens of tabs which are either sorted by name (fixed and useless) or usage (chaotic) in common IDEs like Intellij and VSCode.
Namespace conflict, and yes it does matter. Just as "mamba" was an anaconda package manager re-implementation before it got commandeered by the LLM research crowd, now Haystack is being stolen away from Deepset: https://github.com/deepset-ai/haystack
This is why we have trademark systems. Name conflicts are allowed for commercial use if the purpose and presentation are clearly delineated from competitors. For non-commercial use... who cares? No one is "stealing" words.
They don't make stacks anymore; these days we have balers (and rollers) and therefore move the food (over km) to the livestock rather than the livestock (over m) to the food.
Our intent is not to steal anyone's name, but I hope that by being a very different product nobody confuses us with this Haystack (or the older Haystack that other commenters pointed out).
I do think the idea of a "needle in a haystack" is fairly ubiquitous and makes sense for a ton of contexts to be fair.
https://www.ni.com/en/shop/labview.html
I have the feeling LabView is a good tool for designing control panels and visual tools in general ("front-end"). It is less suited for implementing back-end algorithms. I guess I wish for a similar tool which can also handle the back-end (in the context of my data processing job).
The problem is that I don't know myself what UI I would actually want for a "canvas-based editor". Some mixture between a visual flowchart and being able to edit code in each box? I'm obviously not the first person to think about it and it seems to be a non-trivial problem.
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.
I see why you like it, but I suspect it could be sum negative in a long run. I believe it's beneficial to just be aware of what and where is in the code. Can it be that few years went with a project, and you still don't know what all those files are about because you has been working only with small chunks?
- raw code w/ comments/text
- nicely typeset code with formatted text and hyperlinks for navigation
http://literateprogramming.com/
For the "parent window" what are you imagining here as your frame of reference? This idea makes sense but I'm wondering if you want to designate a specific window as an anchor vs some heuristic that identifies such an anchor.
Also how well does this work on smaller screens? My preferred ergonomic posture is slumped on the sofa with a laptop on my belly.
I use a 15 inch laptop and it works well there. I do not know how small your screen is, but please let me know if you feel like it's not ergonomic for smaller screens.
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.
How? What do you call large mature codebases? In my experience LLMs already make many mistakes and assumptions just in one file?
In my own experience, I ask the LLM where a functional flow is and it does a great job of creating an entrypoint, but I frequently have to figure out the finer details myself and sometimes the LLM points to something related, but not quite what I was looking for.
- 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...
If you use Idea tools you're out of luck I guess.
Idea can already do everything Haystack can do (open several editor windows, only open single method, code navigation, callers...). On large screens (quad 32" 4k) it is quite useful.
But a bit more refined experience would be nice.
I’m currently using a single LG OLED 42” 4K TV as my monitor so I’m interested in large screen setups, but I find the 42” size to already be almost too big so I’m struggling to imagine working on four 32” panels (I guess that would be similar to working on an 8K 65” TV?).
(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!
Working on adding the copilot opt-out as we speak!
I love the ideas here and I would like to discuss some of these with you. If it's OK with you, I am going email/DM you!
In general, we would love to engage in conversations with folks ([email protected])
- Realized its VSCode -- started downloading
- Stopped the download when I saw AI -- cannot work on company code
Will definately try this when AI is disabled.
Note that we only send data to Open AI if you have a diagnostic indicating that you're calling a function that doesn't exist.
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.
Note that we only send data to Open AI if you have a diagnostic indicating that you're calling a function that doesn't exist.
We found the canvas provided too much freedom.
https://austinhenley.com/pubs/Henley2014CHI_Patchworks.pdf
> [...]
> Because users of Code Bubbles and Patchworks were able to open code at the granularity of methods, they had the advantage of never having to scroll through code to reach their navigation targets.
Have only read a bit of this paper but from this discussion over Eclipse it seem that the participants could be a lot more efficient if they used it more like an IDE than a multi-tab editor. Finding methods should be much less of an issue having an (alphabetically ordered) outline view.
only point here is to get used to deal with files on the horizontal, not vertically way of thinking, which is kind of rooted in the way we program first hello world.
Is the source-code for the Patchwork editor publically available?
https://github.com/CodeRibbon/CodeRibbon-Theia
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 find that when folks focus on specific implantation details instead of sharing requirements / parameters / outcomes that much gets lost in translation.
Why do you want this implementation? What function / purpose would it serve?
And then, ideally, I'd like to be able to have that file map back to the original so that the changes I implemented can be directly implemented in the original code.
I'm not sure what folks you're referring to, or implementation details you're asking about. It's a feature I want and that I've even implemented in hackish ways, and I'm surprised it hasn't already shown up in more advanced IDEs yet.
I'd love to see the hacks you've done to make this work if possible!
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/
To make things even more impressive, it is:
- Also a game engine
- Also a multimedia Framework/Library
- Implemented over the course of many years as a side project of a single programmer.
It is one of the most impressive projects I've seen (if not the most impressive) and the dev is a true genius of software design and hard work.
GIMP (the OSS Photoshop-style tool) had this idea for literally over a decade and eventually gave up on it because they never got it to work well.
[1] https://www.gimp.org/release-notes/gimp-2.10.html
That's very different from a spatial layout, where you can juxtapose related code elements near each other, and they remain in those places for as long as you're using them, and then get rid of all them together by closing their common container.
There have been attempts to create new, more spatial work styles on window managers, but the industry is too set in their ways on how windows should be managed, and WMs are complex beasts with many moving parts. So it's usually better to keep those experimental tools self-contained within their own window or app.
Further, just from the shown animation I can already see the same problems you'd encounter with a lot of screen space and old style window managers: you grow tired _very fast_ of moving and resizing additional windows yourself to fit more on the screen. "Maximize (on current screen)" is the only automation step in this direction and it is decades old. Windows' "snap to edges" is a semi-manual attempt at assisted window management.
* in Win32 terms, a rectangle encompassing the entire region with all visible screens
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.
Get rid if the source-files and put every function/method in its own "editor". However, as far as I remember navigation to/from callers was not possible in Smalltalk.
https://youtu.be/cpjOd5ge2MA?si=T15xO3ZMshetfQIU&t=265
> navigation to/from callers was not possible in Smalltalk
You can navigate implementations and references to symbols, which mostly work like how unannotated dynamic languages (like Ruby, Python) would work.
There would be false positives; but it isn't as bad as it sounds unless you look up common symbols like `#value` and `#value:`.
In some Smalltalk environments and some extensions, you could narrow them by scope, like look up references to this symbol within that package. I think Dolphin did that.
I have always opened multiple windows/panes of source code at the same time out of habit. It's a great paradigm.
Haystack looks good. Thanks for sharing.
We hope to push it to the next level by helping do those refactors for you in an understandable way!
Now that we have LLM models we should really investigate going back and forth between model based representations and text based representations, i.e. allow people to edit both and see the changes reflected in the other.
We write model based code all day, but probably 75% of my time is spent dragging things around and making them look pretty with no net change in the final generated C code. Can't skip that part of the job because the whole point of a model is to make the code easy to understand, but it seems like a good application for an AI.
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.
[1] https://openreview.net/pdf?id=Th8JPEmH4z
We're building a canvas for data / analytics at Definite[0]. Quick demo[1].
0 - https://www.definite.app/
1 - https://youtu.be/7FAJLc3k2Fo?si=kxu0QLd4WV_jDCHw&t=79
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)
We do show arrows between related objects (if you CMD+click on symbols, or use the floating toolbar to zoom into a function) and you can traverse the codebase like a graph. Do you feel like that is insufficient? If so, what would you prefer?
Curious about "then zoom out to see all the files arranged together". You can zoom using CMD/CTRL + scrolling. Is this what you want?
Our intent is to go more in the direction of "like a visual programming language or a notebook, with sockets and connectors" and make editing/refactoring easier.
RE AI: that's valid, but we do use it to cut the tedium out of finding the right interface/class to add a method/function to.
If you’ve used any canvas style app you’ll fully appreciate that zooming out and then zooming back in is almost without fail the way people navigate.
Even visual code editors. You’ve used the unreal blueprint editor right?
They do not use search.
Search is for finding canvases not for navigating around them.
Jumping between symbols with a command is what existing editors do. You’re doing your excellent work a disservice by sticking to ways of interacting you can already do in existing editors.
You can just use a normal editor for that.
(The same goes for any kind of AI symbol search; it is maybe valuable, but why would you not just have it an an extension in an existing editor? It’s like the rabbit; why was it not just an android app? -> no reason. The AI in it was not meaningfully linked to the functionality of the device)
Re: zoom out.
Ohhhh… that’s lovely. That’s what I wanted. You should put that in your demo.
I tried scrolling and cmd-+ but that zooms the entire ui.
That’s a super power. You should make it more obvious you can do that.
Thank you for your feedback! It'll help us iterate/improve the product. Please let us know if you have any more!
I recently switched to Zed because I was tired of shitty terminal emulators on Mac, and wanted something designed from the ground up with speed and GPU acceleration in mind. All my screens are 120hz and I needed something capable of keeping up with that.
I think new editors are created because of an underserved aspect of the classics (Emacs/Vim)—in Zed’s case it's addressing the poor GUI experience—and then have to recreate tools in their new frameworks. It’s a good thing. Monopolies are bad, and rethinking how we do things is good.
I can jump from function to function across files, but it's not showing the whole function chain / path in 1 view
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.
Are you using JSX components? I'll try to repro this on my end.
Awesome project and great work on it! Congrats on the launch :)
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
We'll fix the Zoom controls and I'll take a look at the problems you're having with Go. Thank you for the feedback!
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.
You can zoom in/out of the canvas with CMD/CTRL + scrolling! I do think this can cause blurry text, which we definitely aim to fix
E.g., if a project's general rule is one file per class, I prefer consistently following that rule, even of it makes some files be really short.
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.
2 and 3 sound like interesting ideas that we'll definitely mull over.
https://github.com/tikimcfee/LookAtThat
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.
Thanks Dan for the edit!
https://haystack.deepset.ai/
I do think the idea of a "needle in a haystack" is fairly ubiquitous and makes sense for a ton of contexts to be fair.
and numerous others, but so what, as long as they don't conflict in function at the same time.
https://haystack.csail.mit.edu/