Show HN: Sunflower Editor – like adding console.log to every line of your code

https://editor.sunflower.industries/?loadExample=basicExample

by hollowayaegis • 5 years ago

134 25 5 years ago

editor.sunflower.industries

uxamanda• 5 years ago

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

hollowayaegis7• 5 years ago

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/

hollowayaegis7• 5 years ago

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• 5 years ago

this should be a vscode extension! wonderful work!

pc86• 5 years ago

I'm curious what would happen if two extensions were trying to do this sort of output simultaneously, like this and GitLens.

gvx• 5 years ago

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• 5 years ago

Another fun example:

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

    fib(100);

hollowayaegis7• 5 years ago

For anyone who wants to be notified specifically when an extension for VSCode/Atom/etc is released, please fill out this form!

https://tcjtes71z5j.typeform.com/to/edSjQ9AH

invalidusernam3• 5 years ago

Very cool tool, I imagine it would be very very useful when learning JS or for debugging

yaysyu• 5 years ago

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• 5 years ago

https://runjs.app/ is also another player in this area, though is its own editor.

throwaway888abc• 5 years ago

Happy long time RunJs user. Super useful and battle tested for quick prototypes. Sunflower looks interesting too.

tomtomtom7772• 5 years ago

Nitpick: Please don't break the back button.

breakfastduck• 5 years ago

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.

tomtomtom7772• 5 years ago

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• 5 years ago

Xcode playground are similar, very helpful when learning.

As others mention, this could be a VSCode extension.

onion2k• 5 years ago

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• 5 years ago

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

hollowayaegis7• 5 years ago

Yes! I think seeing values is the next step in faster coding. DM me on Twitter if you want to talk!

gitgud• 5 years ago

Interesting, the steady state nature of the code reminds me of MS Excel! Which is a compliment by the way :)

hollowayaegis7• 5 years ago

Thank you! Excel would be a lot less fun if it was like coding and you had to press “Run”, haha

gavinray• 5 years ago

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/

hollowayaegis7• 5 years ago

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.

jpetrucc• 5 years ago

This is awesome! It got me curious about something like this for python and I stumbled upon Wolf [0], which looks pretty cool.

[0] https://github.com/Duroktar/Wolf

Show HN: Sunflower Editor – like adding console.log to every line of your code

Related Stories