Show HN: Haystack – an IDE for exploring and editing code on an infinite canvas (haystackeditor.com)
Hi HN, we’re building Haystack Editor (https://haystackeditor.com/), a canvas-based IDE that automates the boring stuff (plumbing, refactoring, and finding code) so that you can focus on the exciting parts of software development! You can see a quick overview of Haystack at https://www.youtube.com/watch?v=c2uZnR5D_cc!
(It's currently only on Mac OS but we're working on Linux and Windows. Edit: just added a Linux download!)
Haystack was born out of our frustrations with working in large and mature codebases, specifically with navigating and editing functional flows (e.g. the code flow for adding an item to the Amazon shopping cart).
Oftentimes dealing with such flows would involve navigating a maze of files and functions, and making any edits would involve a lengthy process of doing corresponding downstream/upstream plumbing.
Haystack attempts to address this in the following ways:
1. It allows you to explore your codebase as a directed graph of functions, classes, etc on the canvas. We feel like this better fits how your mind understands your codebase and helps you find and alter functional flows more intuitively. We especially want to utilize this for pull request reviews!
2. It has a navigational copilot that makes edits across files or functions much easier. After you make some changes, Haystack will try to predict your next action and create functions/methods or refactor upstream/downstream code for you. Haystack will surface these speculative edits on the canvas in a way that you can easily dismiss or incorporate them, allowing you to make large changes with a few clicks or keystrokes.
3. Haystack will utilize natural language search so you don’t have to play “Where’s Waldo” to find a functional flow in your codebase. This is coming soon!
PSA: Since Haystack is a VS Code fork, you should be able to move your extensions and keyboard shortcuts. Please let us know if you have any issues with this!
226 comments
[ 3.7 ms ] story [ 330 ms ] threadWe 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.
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
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.
https://haystack.deepset.ai/
https://haystack.csail.mit.edu/
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.
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 :)
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!
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.
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.
How? What do you call large mature codebases? In my experience LLMs already make many mistakes and assumptions just in one file?
Thanks Dan for the edit!
This looks like a good start.
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'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
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.
(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 (feedback@haystackeditor.com)
- 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.
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.