Show HN: I made a Zero-config tool to visualize your code

Show HN: I made a Zero-config tool to visualize your code staying.fun/en...

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++

mcstafford · 3 months ago

I 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

lezhu · 3 months ago

The 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.

schaefer · 3 months ago

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.

lezhu · 3 months ago

Local Docker deployment isn't quite ready yet, but I may consider adding it in the future!

schaefer · 3 months ago

Wonderful.

It’s just a maybe, but what a fun maybe that would be.

jolmg · 3 months ago

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 · 3 months ago

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 · 3 months ago

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 · 3 months ago

Thanks for the feedback! I’ve logged this scrolling misalignment issue and will fix it in the next release.

federiconafria · 3 months ago

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 · 3 months ago

Thanks for the suggestion! i'm continuously working to improve the visualization, and your point is very valuable.

vishkk · 3 months ago

Quite neat. Reminds of this one that I used to use: https://pythontutor.com/visualize.html#mode=edit

lezhu · 3 months ago

Glad you like it, pythontutor is also one of the inspirations for me creating this product.

emushack · 3 months ago

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 · 3 months ago

Glad you like it!

theyinwhy · 3 months ago

What is this chinese gov site link at the bottom of the page? 沪ICP备2024088971号-1 linking to https://beian.miit.gov.cn/

cadamsdotcom · 3 months ago

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 · 3 months ago

You're absolutely right, Thank you so much for the LSP suggestion!