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

[hollowayaegis]

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

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

[gvx → hollowayaegis]

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 → gvx]

Another fun example:

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

    fib(100);

[hollowayaegis → cbm-vic-20]

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

[hollowayaegis → hollowayaegis]

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

[napolux → hollowayaegis]

this should be a vscode extension! wonderful work!

[pc86 → napolux]

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

[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 → yaysyu]

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

[throwaway888abc → petercooper]

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

[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 → uxamanda]

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/

[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 → gavinray]

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.

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

[gitgud]

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

[hollowayaegis → gitgud]

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

[jpetrucc]

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

[invalidusernam3]

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

[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 → ianberdin]

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

[alfonsodev]

Xcode playground are similar, very helpful when learning.

As others mention, this could be a VSCode extension.

[tomtomtom777]

Nitpick: Please don't break the back button.

[breakfastduck → tomtomtom777]

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 → breakfastduck]

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.