Natto.dev – A Canvas for JavaScript(natto.dev)
natto.dev
Natto.dev – A Canvas for JavaScript
https://natto.dev
100 comments
Very cool site! You should be proud!
I'm a very visual thinker, and this is very cool!
Thank you very much for making it!
Thank you very much for making it!
The Yahoo Pipes inspiration is obvious I think - which is a good thing. How do you judge the changes between your service and it? As far as I can see, you picked the code heavy approach, while Pipes was more "here is a block that does X". Natto feels to me more like programming, with Pipes being more about composing fixed functions to manipulate data. Conscious choice? Worth the complexity? Do I judge that wrong?
Yes, very intentional! I'm taking a JavaScript-first approach. I know JavaScript, you probably know JavaScript, and the browser runs JavaScript. It's not the perfect language but here we are. It has lot of nice qualities!
I consider natto a much?-code approach in realm of no/low-code. Instead of building abstractions (no-code), what if we built new environments and UI for code? I'm spending most time building UI and trying to keep execution abstractions as minimal as possible.
I consider natto a much?-code approach in realm of no/low-code. Instead of building abstractions (no-code), what if we built new environments and UI for code? I'm spending most time building UI and trying to keep execution abstractions as minimal as possible.
This is a great project in a space that I've been playing around for a little while, fun to see it here!
I'm interested in hearing what you think are some of the more difficult problems or bugs you've come across during development. Did you hit any stumbling blocks around handling user code or integrating babel or the terminal? Do you have any insights about preventing errors or crashes in how you parse and eval user code? (My typical test of a while(true) loop crashes this system, but you're still in good company; it crashes replit, browser dev tools, observable and just about every other clientside execution tool I've come across. The most popular solution appears to be the loop timeout transformation.)
I think the examples pages do a better than usual job of demonstrating your system, in particular the ubiquity of one liners and your connections between them. Do you have ideas or responses about the classic "mess of wires" critique that graphical coding systems inevitably receive?
This is such a fun domain to think about, thanks for sharing your work!
I'm interested in hearing what you think are some of the more difficult problems or bugs you've come across during development. Did you hit any stumbling blocks around handling user code or integrating babel or the terminal? Do you have any insights about preventing errors or crashes in how you parse and eval user code? (My typical test of a while(true) loop crashes this system, but you're still in good company; it crashes replit, browser dev tools, observable and just about every other clientside execution tool I've come across. The most popular solution appears to be the loop timeout transformation.)
I think the examples pages do a better than usual job of demonstrating your system, in particular the ubiquity of one liners and your connections between them. Do you have ideas or responses about the classic "mess of wires" critique that graphical coding systems inevitably receive?
This is such a fun domain to think about, thanks for sharing your work!
Would you mind sharing other interesting examples of projects in this vein? Thanks!
The future of coding link in the parent has a large list of similarly spirited projects. I have scattered lists of similar projects but none handy or packaged well. I'll point you to the Ink&Switch article on end user programming. https://www.inkandswitch.com/end-user-programming.html
And encourage you to check out personal sites of the people involved. The lively kernel is a programming kit project that's been around in various incarnations for a long time. https://lively-next.org/ The history of Eve (also linked by that future of coding page) is rich and full of references to other projects http://witheve.com/ VPRI similarly is a gateway to lots of history on personal computing http://www.vpri.org/ of particular interest to me there is the graphical language Nile and the meta compiler Ohm. http://worrydream.com/ Bret Victor's site is another gateway you may have heard of, and the researchers at Dynamicland are also well worth exploring. More future of coding resources https://github.com/d-cook/SomethingNew
For more actual environments you can use I recommend https://observablehq.com/, https://starboard.gg/ and emacs along with the links above.
For more actual environments you can use I recommend https://observablehq.com/, https://starboard.gg/ and emacs along with the links above.
The eval of natto maps surprisingly well to React's primitives (memoization, effects). This is pseudocode for the main eval https://gist.github.com/paulshen/9889b6067609f9053a0d56d4641...
The expression is only transformed with Babel if you enable the JSX React transform. Otherwise, it's just straight eval-ed by your browser. It's by no means battle-tested (eg while (true)). I haven't tested circular deps and am leaving that as a surprise for myself in a little bit. One thing that I do is run the canvas in an iframe on a different domain for security reasons.
Parsing is something I'm trying to avoid as much as possible but it's likely I'll add it. Referencing things as inputs[2] doesn't feel stable. May help with implicit deps and avoiding wires (see observablehq.com)
As for mess of wires, I'm still forming my opinion! I want to learn more about nodes-and-wire programming and why it isn't mainstream. The hunch I'm getting is that visual programming feels better to create than consume. The space is great for exploration but looking at someone else's canvas can be chaotic. Maybe there are features that can alleviate this (multiple views, autolayout). Look at this haha https://twitter.com/_paulshen/status/1321872376234082305
The expression is only transformed with Babel if you enable the JSX React transform. Otherwise, it's just straight eval-ed by your browser. It's by no means battle-tested (eg while (true)). I haven't tested circular deps and am leaving that as a surprise for myself in a little bit. One thing that I do is run the canvas in an iframe on a different domain for security reasons.
Parsing is something I'm trying to avoid as much as possible but it's likely I'll add it. Referencing things as inputs[2] doesn't feel stable. May help with implicit deps and avoiding wires (see observablehq.com)
As for mess of wires, I'm still forming my opinion! I want to learn more about nodes-and-wire programming and why it isn't mainstream. The hunch I'm getting is that visual programming feels better to create than consume. The space is great for exploration but looking at someone else's canvas can be chaotic. Maybe there are features that can alleviate this (multiple views, autolayout). Look at this haha https://twitter.com/_paulshen/status/1321872376234082305
This is so cool! I am very excited to give it a proper go!
Very nicely done! Keep up the good work. Any chance you are making it open source? Fine if you are not , but at least consider doing that if (!) you ever get fed up with it (wish everyone would do that if legally possible).
This is super cool :)
It seems a little tough to visualize "flow" at first glance - some optional animations might be handy? e.g: when data comes in, animate a little bubble moving along the path, or little conveyor-belt style animations. An undo/redo feature (or more complex version control) would also be appreciated, I deleted a node and couldn't find a clear way to restore it.
It seems a little tough to visualize "flow" at first glance - some optional animations might be handy? e.g: when data comes in, animate a little bubble moving along the path, or little conveyor-belt style animations. An undo/redo feature (or more complex version control) would also be appreciated, I deleted a node and couldn't find a clear way to restore it.
I've wondered what a factorio coding interface would look like.. would love to see it.
Agree about undo/redo! on the todo list.
Agree about undo/redo! on the todo list.
Great work! Question -- I love the grid/layout system you have. I'm wondering if there is an open-source library that helped you enable this? I'd like to use something similar for a personal tool. :) Thank you.
Thanks! I'm using plain React. I have a React onMouseDown React listener that attaches mousemove/mouseup listeners on the window. I round the numbers to the grid.
I've seen https://reactflow.dev/ but haven't used it myself. The core drag interaction is not much code but feel free to reach out on twitter. happy to share more!
I've seen https://reactflow.dev/ but haven't used it myself. The core drag interaction is not much code but feel free to reach out on twitter. happy to share more!
regarding the name, I got hung up on the description as a 'canvas' -- seems like leaves open to misinterpretation about what this is, opens confusion with html 'drawing' canvas etc. Suggest maybe utilizing something more about 'visual interface', visual programming playground etc
Was a big fan of Pipes back in the day, so good job / neat work otherwise!
Was a big fan of Pipes back in the day, so good job / neat work otherwise!
This site's negativity/nit picking is sometimes incredible.
This is an incredibly cool product that is by their own words "very alpha" and people jump to "OMG i know what hijacking is so I'll point it out" for attention. It's kind of a tired trope. This is obviously not an intentional hacking of users but rather a quite harmless bug in the implementation of an undo/permalinking feature.
Great job to the devs and I hope I can find a utility for this product in the future, it's kind of a javascriptable excel concept, really cool.
This is an incredibly cool product that is by their own words "very alpha" and people jump to "OMG i know what hijacking is so I'll point it out" for attention. It's kind of a tired trope. This is obviously not an intentional hacking of users but rather a quite harmless bug in the implementation of an undo/permalinking feature.
Great job to the devs and I hope I can find a utility for this product in the future, it's kind of a javascriptable excel concept, really cool.
That’s probably a meme at this point, another post on the front page has the exact same complaint : https://news.ycombinator.com/item?id=26791997
[deleted]
Warning people that they won't be able to get back to this site is not an overreaction.
It looks like an innocent bug and to get back to HN takes me two clicks rather than one, not really something I can get too excited about, particularly when it showing something new.
This is not a bug, it's how web apps are supposed to work.
The url should be updated to reference the current app view - this way you can copy the url for that particular resource and access it again by pasting with the same url.
This is how it worked for headers when websites were just plain documents. It's a very powerful feature and is exactly what the web is about - sharing resources easily.
Browsers have different ways of dealing with this like grouping items in the back history by domain, so that it's easy to leave the site back to page previous to the app session.
The url should be updated to reference the current app view - this way you can copy the url for that particular resource and access it again by pasting with the same url.
This is how it worked for headers when websites were just plain documents. It's a very powerful feature and is exactly what the web is about - sharing resources easily.
Browsers have different ways of dealing with this like grouping items in the back history by domain, so that it's easy to leave the site back to page previous to the app session.
FWIW: In every desktop browser I've used and in Safari on iOS, long pressing the back button for a few seconds will bring up a list of recent history and allow you to get back when the button is hijacked by a page.
I think I've automatically double-clicked the back button every back-button click since the back button could be hijacked, like years ago. Same with iOS. I try to use my iPhone less, so I uninstalled all apps, and access everything through Safari. It's the absolutely worst experience and I love it. Reddit is practically unusable unless you visit the `www.` site, but by far the worst thing is visiting a site that hijacks the back button.
[deleted]
Right clicking the back button is faster!
> they won't be able to get back to this site
I hate it when sites break the back button, but that's really not the same thing
I hate it when sites break the back button, but that's really not the same thing
I'm picturing users instantaneously teleported to some mythical labyrinth where they're forced to fight their way back to Hacker News.
Not to condone but I never rely on back button when using references in context of some longer material I am currently reading. I always right click and open in new window. So to me the problem mostly mute.
Not ideal but long clicking on the back button show history.
I‘m sorry my comment raised these feelings. People share their projects on HN bc they want feedback. I think it’s a rude thing to hijack the back button and a lot of people seem to share that sentiment. Rude behavior can be unintentional and even well intended, but the perception to others is just not great. I would consider this valuable feedback - it’s better to get it here and fix the bug/misbehavior than keeping it even longer.
Very cool. A few years back I was trying to build something similar, my intention was to create a canvas for visually programming cryptocurrency bots. I thought that it would be cool to be able to follow the data transformation visually, so I focused on rate limiting on the code execution and expressive animations on changes to the data so that a human can visually follow the data flow and transformations(when I switch to bullet mode, a delay is introduced between each data transformation and a visual feedback indicates what changed).
My prototype was not as neat and at some point I got convinced that it's actually easer to reason over algorithms when written in code and this visual style of programming works well as long as you deal with algorithms on very high level with no implementation detail considerations. When implementation details need to be part of the work, i.e. you need to think about how to fetch and transform a JSON file and match it with a CSV data it's actually easier to learn how to code and build your logic procedurally. Maybe people are not good at visually following large number of active objects and I think it's not only me because I'm sure that people get exponentially more confused with the addition of a new button or number to the scene.
When you don't have a simple enforced structure like "instructions execute from top to bottom" the visual freedom becomes yet another thing that you need to think. I find that the most visual processing tools that are helpful are spreadsheets, they have a good and simple structure to follow for storing and representing data and powerful features enabling calculations on that data. Google Docs also has data fetching functionality(not sure about Excel), making it a very interesting data processing software.
My prototype was not as neat and at some point I got convinced that it's actually easer to reason over algorithms when written in code and this visual style of programming works well as long as you deal with algorithms on very high level with no implementation detail considerations. When implementation details need to be part of the work, i.e. you need to think about how to fetch and transform a JSON file and match it with a CSV data it's actually easier to learn how to code and build your logic procedurally. Maybe people are not good at visually following large number of active objects and I think it's not only me because I'm sure that people get exponentially more confused with the addition of a new button or number to the scene.
When you don't have a simple enforced structure like "instructions execute from top to bottom" the visual freedom becomes yet another thing that you need to think. I find that the most visual processing tools that are helpful are spreadsheets, they have a good and simple structure to follow for storing and representing data and powerful features enabling calculations on that data. Google Docs also has data fetching functionality(not sure about Excel), making it a very interesting data processing software.
This is incredibly useful, a lot of my peers will certainly love it for quick prototyping data manipulation and exploration. I know I will.
This is a very clever/usable implementation of flow-based programming (FBP), which is dear to many people's heart in HN and out.
FBP matches very easily the mental model of data flow and calls for quick mouse- or touch-based manipulation. Coming up with a usable UX for such paradigm is not trivial though, and your project seems on a good track.
I can only encourage you to take the (harsh) criticism in this comments' section with the necessary distance, and keep working on the project, because it's very good! Well done!
This is a very clever/usable implementation of flow-based programming (FBP), which is dear to many people's heart in HN and out.
FBP matches very easily the mental model of data flow and calls for quick mouse- or touch-based manipulation. Coming up with a usable UX for such paradigm is not trivial though, and your project seems on a good track.
I can only encourage you to take the (harsh) criticism in this comments' section with the necessary distance, and keep working on the project, because it's very good! Well done!
Flow-based programming is also what came to mind when I explored the site.
For interested readers there is a decent article[0] and previous discussion[1] a few months back which discusses this topic.
[0]: https://jpaulm.github.io/fbp/index.html
[1]: https://news.ycombinator.com/item?id=25848542
For interested readers there is a decent article[0] and previous discussion[1] a few months back which discusses this topic.
[0]: https://jpaulm.github.io/fbp/index.html
[1]: https://news.ycombinator.com/item?id=25848542
Very neat, and seconding impression of reminding of observable, but much more freeform. Here's a dumb little demo of appending some divs to a dom element, with random heights.
https://natto.dev/@dazld/7168773775bd401481366b7d62d14e8c
It's quite fun to think about the restrictions of this - getting an animation loop going, for example.
https://natto.dev/@dazld/7168773775bd401481366b7d62d14e8c
It's quite fun to think about the restrictions of this - getting an animation loop going, for example.
I'm surprised no one's mentioned Node.red yet, something this reminds me on and could see evolving as a competitor to.
Request: Zoom with Ctrl+Scroll.
I imagine this might be quite useful to understand data-flow, but I worry that it would be tedious to manage the connections via positions during development.
It would be cool to have an auto-format/auto-layout: - data flowing left to right - draw pipes like yahoo pipes used to - minimize crossing pipes.
When in the programming loop, could the connections be established automatically via references? Name each output and then reference it somewhere else, which implicitly establishes the connection. Then click "auto-layout" (or just hit save) and as Steve would say "BOOM".
I imagine this might be quite useful to understand data-flow, but I worry that it would be tedious to manage the connections via positions during development.
It would be cool to have an auto-format/auto-layout: - data flowing left to right - draw pipes like yahoo pipes used to - minimize crossing pipes.
When in the programming loop, could the connections be established automatically via references? Name each output and then reference it somewhere else, which implicitly establishes the connection. Then click "auto-layout" (or just hit save) and as Steve would say "BOOM".
this is awesome, great job. by the way, i'm the creator of the API you're using for the nba example :)
Another similar tool: https://www.youtube.com/watch?v=fQvWMoOjmQk
I need something like this but open-source so I can run it locally...
I am building https://www.jigdev.com which runs observable hq as a canvas locally. It's not open source as of now but there'll be a always free version for it.
[deleted]
Although Orchest was built for Data Science the graph based visual editor could be what you want. And you can run it on your machine locally https://github.com/orchest/orchest
This fascinates me. I cannot use such layout, graphs etc. I can only analyse something if it is in a list - even if it is a complex algorithm - I will understand it fine. If it was exploded to a graph there is no way I'll get it.
That leads me to a question - do you find yourself naturally understanding the information in a graph format and not getting lists or is it something that you learn to make sense of?
You might be based by the fact you learned programming and the associated ”linear" thinking a long time ago... I am not very efficient reasoning on graphs, but I remember how HARD it was when I started programming and this does not seem even close.
I've seen a number of tools like this recently, and I was wondering if there is a moniker for this type of tool? I saw one a few weeks ago that was all about JS widgets with code that you could tie together in pipelines. I remember Yahoo Pipes was a version of this tool, Node Red, there are a ton of them out there. Anyone have a name for this category of tool so I can look out for them when I see them?
"Visual Scripting" perhaps.
someone else mentioned "flow-based programming (FBP)"
Reminds me of observablehq.com
Please don’t prevent people from leaving your site using browser navigation. It’s impossible to get back to hackernews by swiping back on iOS.
Exactly. Safari on MacOS has the same problem too.
I don't believe that was intentional, he hijacks the back button so he can use it as an undo internally.
It's just an unfortunate design choice which should have been avoided.
It's just an unfortunate design choice which should have been avoided.
„he hijacks the back button so he can“ - sounds pretty much intentional. No one would argue against an alert asking you if you want to leave without saving you work or sth similar, though.
You should complain to you browser vendor, not the website owner. Swiping back works just fine on Android.
Not in chrome/android on my side ... I had to long press the back arrow and select HN to come back here
Maybe OP‘s implementation of overriding the default browser behavior on Android just sucks ;)
Not on FF on my device...
Firefox 78.9.0esr on Debian Buster has the same problem
Page didn’t load right on mobile and then I couldn’t escape back to HN.
Maybe you can blame Apple and Safari, and maybe I’m unfair, but if that’s the first impression I get from something related to programming, well...
Maybe you can blame Apple and Safari, and maybe I’m unfair, but if that’s the first impression I get from something related to programming, well...
> Please don't complain about website formatting, back-button breakage, and similar annoyances. They're too common to be interesting. Exception: when the author is present. Then friendly feedback might be helpful.
Given that this isn’t “Show HN”, please don’t comment about this.
https://news.ycombinator.com/newsguidelines.html
Given that this isn’t “Show HN”, please don’t comment about this.
https://news.ycombinator.com/newsguidelines.html
[deleted]
honest bug :) should be fixed!
I really like how it looks. Here's my only ideas for improving it:
* Some navigation buttons for zooming and panning quickly, maybe the mousewheel or a minimap?
* I like how you can drag arrows around to different windows, I think the icon there isn't super intuitive but that's a minor gripe! :)
I think one of the examples is broken, but dang you should add more examples, I like this kind of tool!
* Some navigation buttons for zooming and panning quickly, maybe the mousewheel or a minimap?
* I like how you can drag arrows around to different windows, I think the icon there isn't super intuitive but that's a minor gripe! :)
I think one of the examples is broken, but dang you should add more examples, I like this kind of tool!
Thanks for feedback!
Mousewheel should pan! You can hold down spacebar to pan anywhere (also dragging). Clicking the 100% in the toolbar lets you zoom. Some more shortcuts here https://twitter.com/_paulshen/status/1381744260945379331
Which example isn't working for you? and I plan to add more examples (maybe community?) and interactive tutorial in the future!
Mousewheel should pan! You can hold down spacebar to pan anywhere (also dragging). Clicking the 100% in the toolbar lets you zoom. Some more shortcuts here https://twitter.com/_paulshen/status/1381744260945379331
Which example isn't working for you? and I plan to add more examples (maybe community?) and interactive tutorial in the future!
Reminds of nodered but without the form fields, which might actually be better.
I think it would be very useful if there were a way to box other boxes, possibly designating specifc ones as the input/outputs of the big box.
Bonus: if you collapse a box, it becomes a black box.
Bonus: if you collapse a box, it becomes a black box.
yes! This is what I'm exploring next, composability. One idea is to make "big boxes" like you describe. The other approach is to make canvases have special input/output pane and the ability to reference/run other canvases.
Although my interface doesn't wire nodes together, you might find the way I embedded spatial interfaces within each other (recursively) at https://beta.mindcast.com to be of interest for your exploration.
Check out Tangible Functional Programming by Conal Elliott for an interesting take on this approach
http://conal.net/papers/Eros/
http://conal.net/papers/Eros/
Reminds me of Pure Data
Oh man this is cool! I wish someone would make one for Magento - feels like I have 100 files open just to change a tiny thing
Related https://nodered.org/
It would be more awesome if we can convert a given code into different panels and link them automatically...
Tried to play around with some JSX but unfortunately it keeps throwing the error that React is not defined.
Looks cool though!
Looks cool though!
The author published a working React & JSX example here that might be useful: https://natto.dev/@paul/1dcbeb7583624bf19d69b9942271a703.
Some background on Twitter too: https://twitter.com/_paulshen/status/1380292393291841541
Some background on Twitter too: https://twitter.com/_paulshen/status/1380292393291841541
Wow, this is a really cool project.
I'd really like to see something like this in browser developer tools someday.
I'd really like to see something like this in browser developer tools someday.
amazing! thinking of something to use it for. v. minor bug, +/- keys zoom in and out even when editing a field :)
This is killer! Awesome work.
This looks great!
Neat!
Warning: this website hijack your browser back button
While this is indeed amazing I think it suffers from not being a PWA.
Being able to stuff it on its own little instance with no "back" to go to would allow people getting a cursory look at it to divert attention from the whole usability etiquette and concentrate on the thing itself, plus there might be some interesting gains in doing so too.
One other thing I'd love to have is an interactive tutorial, I'd love to be able to follow some steps to understand the thing better.
Being able to stuff it on its own little instance with no "back" to go to would allow people getting a cursory look at it to divert attention from the whole usability etiquette and concentrate on the thing itself, plus there might be some interesting gains in doing so too.
One other thing I'd love to have is an interactive tutorial, I'd love to be able to follow some steps to understand the thing better.
I'm actively working on natto.dev and it really is in "preview". I'm excited about the future of programming and having a canvas to explore it on. still looking for "crazier" ideas - my favorite current one is dragging a column out of a table. https://twitter.com/_paulshen/status/1366801887341649924
The more I work on it, the more confident I am that there's something there. If you try it, I'd love to hear your feedback!
natto takes inspiration from a whole lot of work. non-exhaustive list: Yahoo Pipes, Excel, design tools (Figma), Observable, darklang, GToolkit, SmallTalk (repl-driven), http://joshuahhh.com/projects/pane/, http://www.lamdu.org/, https://futureofcoding.org/catalog/
As much as I love natto (the food), I'll likely rename it at some point. Pronunciation hit rate has been 0%