5 ms·
Show HN: I made a Zero-config tool to visualize your code
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++
- chrsw 1y agoInteresting. 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 1y agoYou're absolutely right，thanks for pointing that out! I'll add auto-switching for all languages. Appreciate your feedback!
- ivanjermakov 1y ago[flagged]
- lezhu 1y agoThe tool actually has an Annotations Config feature that allows you to customize the visualization, although the configuration options are currently quite limited.
- sevg 1y agoOf course it can be a good thing. Having to configure stuff can be annoying. Sometimes it can also be limitation, but then probably you were looking for a different tool and this one isn’t aimed at you ;)
- ivanjermakov 1y agoIt is usually a problem of reasonable defaults, not a lack of configurations as a whole.
- on_the_train 1y agoThis is an empty black site with an arrow button that does nothing
- lezhu 1y agoNow I understand what you're referring to. I'm currently using Cloudflare, but when I switch to a Chinese network connection and visit my website, I just see a blank black screen. I checked the network requests, and it's downloading some resources extremely slowly—it eventually took 30 seconds for the content to appear.
- webprofusion 1y agoStick your site behind cloudflare, you'll get geographically distributed caching for free. It's currently very slow as if you are serving it from your basement.
- emushack 1y agoI 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 1y agoGlad you like it!
- mushufasa 1y agothis 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?
- lezhu 1y agoMaybe I'll try visualizing parts of large-scale projects in the future, though it might be a bit challenging.
- szjanikowski 1y agoHey, 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 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.
- HenryBemis 1y agoPerhaps 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?
- mushufasa 1y agoA 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.
- schaefer 1y agoThis 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.
- vishkk 1y agoQuite neat. Reminds of this one that I used to use: https://pythontutor.com/visualize.html#mode=edit https://pythontutor.com/visualize.html#mode=edit
- lezhu 1y agoGlad you like it, pythontutor is also one of the inspirations for me creating this product.
- federiconafria 1y agoThis 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 1y agoThanks for the suggestion! i'm continuously working to improve the visualization, and your point is very valuable.
- dugmartin 1y agoTotally off topic but this is the first time I've seen (or noticed) an ICP license link in a footer. I was curious so I looked it up (https://en.wikipedia.org/wiki/ICP_license https://en.wikipedia.org/wiki/ICP_license) and its been in effect since 2000. I guess I'm one of the lucky 10,000 today.
- moritonal 1y agoContext: https://xkcd.com/1053/ https://xkcd.com/1053/
- deleted 1y ago[deleted]
- cadamsdotcom 1y agoVery 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 1y agoYou're absolutely right, Thank you so much for the LSP suggestion!
- jolmg 1y agoHey, 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.
- phcreery 1y agoI 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 1y agoThanks for the feedback! I’ve logged this scrolling misalignment issue and will fix it in the next release.
- ziml77 1y agoIt'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.
- vasusen 1y agoThanks 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 1y agoI'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.
- helsinki 1y agoYou're going to need to speed up the visualizer. I think you're losing a lot of potential users to the loading time.
- lezhu 1y agoYes, you're absolutely right - especially for C++ and code with many steps. I'm actively working on improving the loading times!
- benoau 1y agoVery exciting. I'm using math in particular as an entry point for teaching programming to offspring.
- Leo-thorne 1y agoTried 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 1y agoThank 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.
- lezhu 1y agoI might have lost all my iOS Safari users because I used requestIdleCallback without testing it on iOS...
- mcstafford 1y agoI took a peek at the terms of service[1] when considering signing up for an account. It seemed unusual to have them in a separate language from the rest of the site. Presuming the translation was correct I would "agree to comply with Chinese laws ... [and] grant the company a non-exclusive, free, perpetual license for global use (including modification, display, and derivative development)." [1] https://staying.fun/en/legal/terms-of-service https://staying.fun/en/legal/terms-of-service
- lezhu 1y agoThe referenced terms (including clauses like perpetual licensing) were placeholder text I generated with ChatGPT during development. Currently, my website doesn’t store any user code—even if you’ve registered—except for an unused article feature. As a bilingual service, I recognize how misleading these provisional terms appear and will remove this page immediately.
- theyinwhy 1y agoWhat is this chinese gov site link at the bottom of the page? 沪ICP备2024088971号-1 linking to https://beian.miit.gov.cn/ https://beian.miit.gov.cn/