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).
We found the canvas provided too much freedom.
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.
1. https://github.com/paperwm/PaperWM?tab=readme-ov-file#paperw... 2. https://arcan-fe.com/2021/04/12/introducing-pipeworld/
I feel like the OS window manager should provide this kind of experience
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.
They didn't give up on it, they simply added alternative options for those that didn't like it.
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]
The issue is that for GIMP it didn't really serve a particularly obvious function, and it was very different to what users of other software expected
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
Arcan seems like https://strlen.com/treesheets/ for the OS-level.
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.
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!
Is it partly inspired by Smalltalk browsers?
I've never used Smalltalk but I've heard of it!
having windows popup from the object your looking at is indeed something they like to do, you'll have friends there :)
Curious if there's a Small Talk community -- would love to speak with them!
I tried finding a screenshot which showed what I was thinking. But gosh it's so hard. Here's one, but really low quality https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2F....
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.
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.
It was, even in the ancient original Smalltalk-80.
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.
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
And this is on top of it being stolen away from the rightful owners: hay farmers.
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.
Also this older Python package: https://django-haystack.readthedocs.io/en/master/
i remember playing with this group’s work back in the early ‘00’s
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.
Which in turn conflicts with https://en.wikipedia.org/wiki/Haystack_(MIT_project)
and numerous others, but so what, as long as they don't conflict in function at the same time.
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.
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.
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?
continue.dev with anthropic's API key https://docs.continue.dev/how-to-use-continue#ask-questions-...
Any idea if there's a way to use this with vim/nvim? It doesn't look like it, but wanted to double check
The copilot plugin for vim does pretty well if you have it. Bummed when it moved to paid but thankfully my org has adopted it
Doesn't exist yet, but it seems like they are working on it. https://github.com/continuedev/continue/issues/917#issuecomm...
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.
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.
It would be awesome if we can sketch diagrams and code in the same canvas! This would make visual documentation much easier.
you can do asciidoctor, plantUML kroki in vscode so maybe its present mode can already be used in there like that?
Is a tool like LabView what you have in mind?
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.
Kind of like what BlueJ does with Java?
Curious if the problem you're encountering is visualizing the data flow vs. the control flow?
Interesting, some notes:
- 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...
This appears to run within VSCode from the demo videos, as opposed to being standalone. You get everything you get there.
If you use Idea tools you're out of luck I guess.
out of luck
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.
Quickly googled yesterday for Idea´s contexts. I need to dig that further. Any article or resource you may recommend?
Their website says it’s a fork of VS Code.
The tool looks great and I would love to try it out for work (Android/Kotlin). So +1 to the IDEA integration, pretty please
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.
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.
I viscerally dislike manually arranging windows. Have you investigated auto tiling?
Also how well does this work on smaller screens? My preferred ergonomic posture is slumped on the sofa with a laptop on my belly.
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.
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?
Literate Programming affords a 1D (vertical/scrolling) implementation of this with two views:
- raw code w/ comments/text
- nicely typeset code with formatted text and hyperlinks for navigation
Oh nooooo, this is MacOS only? This is amazing and I need this so badly.
I am so sorry! Our immediate next priority is to get this on Linux and Windows. May I ask which OS you use so we can get it done now?
I'd use this on linux as soon as it's available
Just added a Linux download!
I use Windows primarily. I don't expect you to rush anything, but definitely looking forward for a multi-platform release.
Just added a Linux download!
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)
You made some good points!
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.
Re: AI
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.
Oof I did not realize how undiscoverable zooming is.
Thank you for your feedback! It'll help us iterate/improve the product. Please let us know if you have any more!
+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).
I think the title should make it clear it’s macOS only, before getting my hopes high to test it out, it looks interesting nonetheless.
I added that to the text above. Sentence taken from https://haystackeditor.com/#faq. Hope this helps.
Very sorry about this. We hope to get in a Linux product soon (building now, fingers crossed).
Thanks Dan for the edit!
Added a Linux download if that's the platform you're using!
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
emacs has existed for many decades already.
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.
just curious, how do you do this in emacs?
I can jump from function to function across files, but it's not showing the whole function chain / path in 1 view
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!
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:
- 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!
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 (feedback@haystackeditor.com)
- Demo made me want this instantly -- looks better than tabs
- 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.
Feel free to email — it’s in my profile. :-)
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.
You should definitely check out Understand https://scitools.com/features, if you haven't already.
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.
This is cool.
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.
So it’s a more fancy/cpu intensive neovim without the learning curve?
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.
Does neovim have a canvas feature? In what way is it similar to Haystack, apart from also being an editor?
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.
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.
Agreed. That should have been a opt-in from day one!
Had the same reaction. I’m willing to support development for a tool like this, but would prefer to do it more….directly.
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
Windows 11 seems to have a auto grouping feature baaed on what windows are tiled
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).
This is a great idea! Will think about how to best implement this.
look at emacs undo buffer, it would be awesome to avoid losing the future if you step into the past.
Looks a little like Labview without the data flow features. Interesting.
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.
Wow, this looks wonderful!
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 this is something we plan on building! To confirm, you mean e.g. if you edit a parameter, which causes errors in all callers?
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 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
We'll add tooltips and better/more explanatory UI soon! We rushed to get this out so there are a few rough edges unfortunately.
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!
https://project-haystack.org/ is what immediately came to mind when I read "haystack".
I thought it was https://haystack.deepset.ai
I spent the last five+ years full-time deep diving the infinite canvas UX problem space if you happen to be hiring ;)
We are not but I'm happy to discuss! Feel free to email feedback@haystackeditor.com
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 can zoom on the canvas using CMD+scroll! Other folks have mentioned this as hard to discover so we'll be sure to fix that.
2 and 3 sound like interesting ideas that we'll definitely mull over.
Cool! Related to code bubbles: https://dl.acm.org/doi/abs/10.1145/1753326.1753706
Yeah bubbles are awesome! I like the minimap concept especially.
Looks interesting, but the contrast between white background and actual windows is preventing me to use it. How can it be changed?
Apologies for this! We'll make the canvas match VS Code's theme eventually.
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.
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...
Depends on the situation.
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.
This is amazing! I would love the ability to connect a line from one code snippet to other.
Oh interesting! Do you mean manually draw a line on the canvas? Would you expect this to persist through sessions?
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 we plan to build a PR review tool in the editor itself! I definitely resonate with exactly what you're describing.
This is pretty cool!
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!
Yes we were definitely inspired by SourceTrail! Will add to the feature list!
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.
great idea! reminds me of lightroom what ever that ide was. But can this infinite canvas be implemented in VScode?
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.
Apologies if I missed a repo link, but ... no open source, no go.
This is really nice - there is something about the whole concept that feels smooth in comparison to switching tabs.
Are you hiring? I'd love to port this into your framework.
Nice. Reminds me of PyFlow: https://github.com/Bycelium/PyFlow
That's a great idea! Would love to see a lightweight version of this as a VScode extension only to browse through the code.
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.
This is really neat, quite a paradigm shift from the IDEs we’ve been using for decades
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.
Is “canvas” a technical term? What does it mean?
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.
Nice to have another contestant now.
This is awesome. Are you using tldraw?
We're building a canvas for data / analytics at Definite[0]. Quick demo[1].
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 ?
This is a neat idea. I have thought for ages about doing something like this, but for spreadsheets. Great work!
I think canvas apps is a huge thing coming
Can you have a black background? My eyes object to dark windows on a white canvas-
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!
Kudos for thinking out of the box ;)
Background colour control needed!
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.
Not a coder any more, but I wonder if a UI like Scrivener (https://www.literatureandlatte.com/scrivener/overview) would work. Each "scene" would be a function.
This fits my mental model when coding so well. I love it!
Really cool. Two suggestions to think about:
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 couldn't tell -- does this editor work with Remote ssh?
This looks way too mouse reliant to be something that I'd personally use. It's always interesting to see new approaches to ides though
Can you find code across service boundaries? I work with about 15 micro services right now, and finding root cause of an issue can be ... tedious.
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.
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.
The moment I saw the screenshot I was like "oh now I know what is was missing"
Wow this is amazing! I couldn't tell from the demo but can you zoom out? I can't wait for the windows release!
It would be amazing if you could add notes or draw on the canvas in the unfilled spots but this is a pretty cool idea
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
how can I make the canvas color dark ...? white hurts my eyes ^^'
Can I manually add arrows between two parts of two files? How can I create textual notes in the canvas?
There was CodeRibbon for Atom to navigate the code you work on: https://coderibbon.github.io/CodeRibbon/
How do you feel about that view of navigation?
I quite enjoyed this style of editor while playing The Farmer Was Replaced. Cool to see it as an actualy IDE.
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.
In my minds eye I've been yearning to see an IDE that focuses on a zoomable interface.
This looks like a good start.
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.
This is why I set a limit on the tabs in my IDE.
Tantalising research!
Is the source-code for the Patchwork editor publically available?
My former PhD student has been porting it to VS Code.
https://github.com/CodeRibbon/CodeRibbon-Theia
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.
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)
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!
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.