HN Explorer

26 comments

[ 2.3 ms ] story [ 69.3 ms ] thread
uxamanda
This is really interesting, and I can see how this would be very useful, especially for someone like me who doesn't work with JS all day long.

FYI, when messing with the Array, I got into an unexpected state where clicking one of the entries selected it (applied it?) as the "grey" text, and I wasn't able to get back to the full array details.

As an aside, I have been using Joplin's Math Mode plugin[0] for a while, and this reminds me of it.

[0] https://discourse.joplinapp.org/t/plugin-math-mode/13254

hollowayaegis
Haha sorry about that bug definitely one to fix soon.

I love the idea of instantly evaluated math -- I haven't used Math-Mode/Mathjs but I have used SymPy -- I think the barrier is the difficult syntax / typing it out. Though it's definitely a step towards Magic Paper[0]

[0] http://cognitivemedium.com/magic_paper/

hollowayaegis
Creator here, thanks for checking out the editor!

Here are some more examples:

React: https://editor.sunflower.industries/?loadExample=reactExampl... . A 1500-line React app (in one file) will work just fine.

Hot Swapping: https://editor.sunflower.industries/?loadExample=replExample

Our goal is to make it easier to see what's happening in programs, and in doing so make coding faster. Eventually we want to build in the ability to deploy both frontend and backend (Node), all from the same editor page.

Please follow us on Twitter if you are interested in updates! https://twitter.com/SunflowerEditor

EDIT: oh, also collaboration is built in with Yjs. Just share your URL (the one that has ?room=...) with someone else.

napolux
this should be a vscode extension! wonderful work!
pc86
I'm curious what would happen if two extensions were trying to do this sort of output simultaneously, like this and GitLens.
[deleted]
(comment deleted)
gvx
Very cool. One note: the browser (at least Firefox and Chrome) becomes unresponsive for a while if the code takes too long to run.

For example:

    for (i = 0; i < 1000000; i++) {
        i;
    }
cbm-vic-20
Another fun example:

    function fib(n) {
      if(n == 0 || n == 1)
        return 1;
      else
        return fib(n-1) + fib(n-2);
    }

    fib(100);
hollowayaegis
Haha, both of those cases are killing both the iframe and the UI. I have to get around to using totally different domain on the iframe to really take advantage of the Chrome process isolation. Previously I was using a really nice JS interpreter written in JS[0] before to solve that problem, but it ran 200 times slower than the browser interpreter(!)

[0] https://github.com/NeilFraser/JS-Interpreter

invalidusernam3
Very cool tool, I imagine it would be very very useful when learning JS or for debugging
yaysyu
This reminds me of a very similar product, QuokkaJs [0] which works across many popular editors, VSCode, Atom, Sublime, Jetbrains suite.

[0] https://quokkajs.com/

petercooper
https://runjs.app/ is also another player in this area, though is its own editor.
throwaway888abc
Happy long time RunJs user. Super useful and battle tested for quick prototypes. Sunflower looks interesting too.
tomtomtom777
Nitpick: Please don't break the back button.
breakfastduck
Works fine for me - what behavior are you seeing?

You need to click it twice but that's because the page is doing a redirect it seems. That would be the expected behavior from my POV.

tomtomtom777
That is not expected behavior. If you click a link and get a page, one expects back to return to the previous page.

A standard HTTP redirect does this right as well as location.replace()

The site incorrectly sets a new location by other means.

alfonsodev
Xcode playground are similar, very helpful when learning.

As others mention, this could be a VSCode extension.

onion2k
This is nice, and really impressive especially using a CRDT for syncing between users. It's like having the debugger running all the time.
ianberdin
Yeah, debugging experience is hard for me. I wish your solution works for JetBrains IDEs.

I do javascript playground (https://PlayCode.io) too, and this feature will be shining

hollowayaegis
Yes! I think seeing values is the next step in faster coding. DM me on Twitter if you want to talk!
gitgud
Interesting, the steady state nature of the code reminds me of MS Excel! Which is a compliment by the way :)
hollowayaegis
Thank you! Excel would be a lot less fun if it was like coding and you had to press “Run”, haha
gavinray
This is really similar to Quokka, which is a fantastic tool and worth every penny.

If you can build something portable, charge money for it IMO. I currently pay $50/year for this:

https://quokkajs.com/

hollowayaegis
Quokka looks interesting. An extension is definitely a possibility and if so it would support DOM, Vue, NodeJS, Electron, etc — not just run things in a separate NodeJS instance.

The other route I am considering is integrating backend, hosting, and a market — so the site becomes a vertically integrated code creation place.