Show HN: I made a Zero-config tool to visualize your code
45 comments
·May 29, 2025Leo-thorne
Tried this out today and it’s surprisingly smooth for a browser-based tool. The zero-setup part really helps. Would be great if the visualizer could also show how values flow across function calls over time, especially for recursive logic. That’s where beginners often get stuck.
lezhu
Thank you for your feedback. Your suggestion makes a lot of sense, and improving data visualization has always been an area I’m continuously working on.
jolmg
Hey, some feedback on those 1/24 holes that fill through scrolling. They're not matched with the steps of the scrollwheel. It seems like a step fills 1.2 holes. It pauses the animation of your demonstration between your points. Checked both Chromium and Firefox. Also checked my mouse events, and a single step matches with a single event.
ziml77
It's not great on a smooth scrolling input device either. You need to carefully scroll to not leave it halfway through a transition. And there's no next/previous buttons available to step through properly. Best you can do is click the little bubbles in order.
phcreery
I also notice this. Maybe it was not intended to "snap" on animation checkpoints though. Scrolling with a touch scroll or mouse middle-click-and-drag is pretty smooth.
lezhu
Thanks for the feedback! I’ve logged this scrolling misalignment issue and will fix it in the next release.
schaefer
This is really great!
Is there a way to run it locally? Maybe with docker?
—
If there is any way to make a small donation, buy you a coffee, I would.
vasusen
Thanks for building it! It can really help help my 10 yo who is just learning coding. How does it handle potentially infinite loops like below? Currently I get a parsing error after it takes a while.
```python
while exit != "yes":
print("\*")
exit = input("Exit?: ")
```lezhu
I'm really sorry, but the input() function isn't supported at the moment. Also, just a heads-up, print() won't have any visible effect right now—maybe I should think about how to better visualize print output.
federiconafria
This is a great learning tool!
One small improvement, show the return values, not just the result, and somehow visualize if the function has not yet returned.
Maybe it's just because I'm used to debuggeres, but the vertical arrangement of variables and their values seems weird.
lezhu
Thanks for the suggestion! i'm continuously working to improve the visualization, and your point is very valuable.
vishkk
Quite neat. Reminds of this one that I used to use: https://pythontutor.com/visualize.html#mode=edit
lezhu
Glad you like it, pythontutor is also one of the inspirations for me creating this product.
cadamsdotcom
Very cool!
Maybe LSP integration for greater compatibility with languages would make this even more cool and useful!
Imagine visualizing a whole codebase with a tool like this.
lezhu
You're absolutely right, Thank you so much for the LSP suggestion!
emushack
I really like the examples for sorting algorithms! This would have been amazing to have back when I first took Data Structures & Algorithms in college.
This is a really cool tool.
lezhu
Glad you like it!
benoau
Very exciting. I'm using math in particular as an entry point for teaching programming to offspring.
helsinki
You're going to need to speed up the visualizer. I think you're losing a lot of potential users to the loading time.
lezhu
Yes, you're absolutely right - especially for C++ and code with many steps. I'm actively working on improving the loading times!
chrsw
Interesting.
In the Configuration box, for the Core Language selection, when I switched to c/c++, the example code didn't automatically update to a C/C++ example. At least not for me in Firefox.
lezhu
You're absolutely right,thanks for pointing that out! I'll add auto-switching for all languages. Appreciate your feedback!
mushufasa
this could be truly helpful if I could include it into my (large) existing codebase to help spot performance bottlenecks. that's not something I could so simply pasted into a self-contained snippet, though. Do other HN know of other static analysis tools that would be great for this?
szjanikowski
Hey, what do you mean by "performance bottlenecks"? Do you mean finding CPU/memory hotspots in your apps? If so, APM tools like New Relic or runtime scanners like AppMap sound like a better fit than static code analysis.
However, if you want to visualize the codebase structure and reason about how coupling and design choices impact performance, static analysis becomes your friend.
If you're on .NET, you might consider joining our early testing campaign at Noesis.vision (https://noesis.vision). There are also a bunch of other tools—some more AI-based (like GitDiagram, DeepWiki), and others less or not AI-based and more language-specific (often IDE plugins). Let me know if you'd like to chat more.
mushufasa
A lot of our code was written by domain experts who aren't trained in algorithms/data structures. We have new relic and other performance assessment tools to see where we have long running queries etc. But looking at the realized performance will only show you the biggest problem areas, like long running queries, and will miss the "Death by 1000 papercuts" of functions that work but in a way that is unnecessary. It would be nice if there is a tool that looks more holistically at whether certain functions are designed well, both in terms of space-time complexity of the algorithms and in terms of overall design of certain features. For example, a feature that sequentially changes a lot of things in a database could not raise any red flags in a profiler, but could be unnecessarily adding a lot of time versus an approach that might pull data into memory, conduct all the operations, then bulk reinserting. Or which could be refactored to act in parallel versus sequential.
This is what is really hard to figure out because you need to know 1) what is the business logic you actually need (and what tradeoffs can you make that would be acceptable given the product), 2) algorithm design, 3) how web apps scale things horizontally, 3) which things get performed on the cpu / memory versus a database, and more.
Instead of hoping for a tool that can do all of that at once, it would be nice if a tool could at least visualize (2) within an existing project to help a human who can keep those things in their head at one time to spot problem areas with code design / system architecture that wouldn't necessarily be revealed by simply looking at logging/APM tools.
szjanikowski
Oh that's more clear right now. Hints of such refactorings are certainly within reach of todays AI tools (if you agree to send your code to the LLM models). Have you tried asking Cursor/Windsurf this question with a prompt similar to what you've just written above?
BTW it might be an interesting feature for Noesis if it needs to be done during regular scans. Thanks for a tip ;)
HenryBemis
Perhaps the parent means "identify the commands/procedures that would cause workload "5", and if many of them exist and rank them accordingly? So a procedure that 'prints a line on the log' 'costs' "1", but a thousand of them would 'cost' "1000" or something similar?
lezhu
Maybe I'll try visualizing parts of large-scale projects in the future, though it might be a bit challenging.
I built Staying – a tool that instantly turns your code into interactive animations with no setup required. Just write or paste your code and hit "Visualize". No installs, no accounts, no configuration. *Supports*: Python, JavaScript & experimental C++