Natto.dev – A Canvas for JavaScript

Hi all! Developer here before first coffee<p>I&#x27;m actively working on natto.dev and it really is in &quot;preview&quot;. I&#x27;m excited about the future of programming and having a canvas to explore it on. still looking for &quot;crazier&quot; ideas - my favorite current one is dragging a column out of a table. <a href="https:&#x2F;&#x2F;twitter.com&#x2F;_paulshen&#x2F;status&#x2F;1366801887341649924" rel="nofollow">https:&#x2F;&#x2F;twitter.com&#x2F;_paulshen&#x2F;status&#x2F;1366801887341649924</a><p>The more I work on it, the more confident I am that there&#x27;s something there. If you try it, I&#x27;d love to hear your feedback!<p>natto takes inspiration from a whole lot of work. non-exhaustive list: Yahoo Pipes, Excel, design tools (Figma), Observable, darklang, GToolkit, SmallTalk (repl-driven), <a href="http:&#x2F;&#x2F;joshuahhh.com&#x2F;projects&#x2F;pane&#x2F;" rel="nofollow">http:&#x2F;&#x2F;joshuahhh.com&#x2F;projects&#x2F;pane&#x2F;</a>, <a href="http:&#x2F;&#x2F;www.lamdu.org&#x2F;" rel="nofollow">http:&#x2F;&#x2F;www.lamdu.org&#x2F;</a>, <a href="https:&#x2F;&#x2F;futureofcoding.org&#x2F;catalog&#x2F;" rel="nofollow">https:&#x2F;&#x2F;futureofcoding.org&#x2F;catalog&#x2F;</a><p>As much as I love natto (the food), I&#x27;ll likely rename it at some point. Pronunciation hit rate has been 0%

This site&#x27;s negativity&#x2F;nit picking is sometimes incredible.<p>This is an incredibly cool product that is by their own words &quot;very alpha&quot; and people jump to &quot;OMG i know what hijacking is so I&#x27;ll point it out&quot; for attention. It&#x27;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&#x2F;permalinking feature.<p>Great job to the devs and I hope I can find a utility for this product in the future, it&#x27;s kind of a javascriptable excel concept, really cool.

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).<p>My prototype was not as neat and at some point I got convinced that it&#x27;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&#x27;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&#x27;s not only me because I&#x27;m sure that people get exponentially more confused with the addition of a new button or number to the scene.<p>When you don&#x27;t have a simple enforced structure like &quot;instructions execute from top to bottom&quot; 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.<p>This is a very clever&#x2F;usable implementation of flow-based programming (FBP), which is dear to many people&#x27;s heart in HN and out.<p>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.<p>I can only encourage you to take the (harsh) criticism in this comments&#x27; section with the necessary distance, and keep working on the project, because it&#x27;s very good! Well done!

Very neat, and seconding impression of reminding of observable, but much more freeform. Here&#x27;s a dumb little demo of appending some divs to a dom element, with random heights.<p><a href="https:&#x2F;&#x2F;natto.dev&#x2F;@dazld&#x2F;7168773775bd401481366b7d62d14e8c" rel="nofollow">https:&#x2F;&#x2F;natto.dev&#x2F;@dazld&#x2F;7168773775bd401481366b7d62d14e8c</a><p>It&#x27;s quite fun to think about the restrictions of this - getting an animation loop going, for example.

I&#x27;m surprised no one&#x27;s mentioned Node.red yet, something this reminds me on and could see evolving as a competitor to.

Request: Zoom with Ctrl+Scroll.<p>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.<p>It would be cool to have an auto-format&#x2F;auto-layout: - data flowing left to right - draw pipes like yahoo pipes used to - minimize crossing pipes.<p>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 &quot;auto-layout&quot; (or just hit save) and as Steve would say &quot;BOOM&quot;.

this is awesome, great job. by the way, i&#x27;m the creator of the API you&#x27;re using for the nba example :)

Another similar tool: <a href="https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=fQvWMoOjmQk" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=fQvWMoOjmQk</a>

One thing I really appreciate about this is the design! It feels so calm and friendly – like a lot of care went into it.<p>I love how everything snaps to the grid, and that it&#x27;s achieved via CSS transforms.

I need something like this but open-source so I can run it locally...

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&#x27;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?

I&#x27;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?

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.

I really like how it looks. Here&#x27;s my only ideas for improving it:<p>* Some navigation buttons for zooming and panning quickly, maybe the mousewheel or a minimap?<p>* I like how you can drag arrows around to different windows, I think the icon there isn&#x27;t super intuitive but that&#x27;s a minor gripe! :)<p>I think one of the examples is broken, but dang you should add more examples, I like this kind of tool!

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&#x2F;outputs of the big box.<p>Bonus: if you collapse a box, it becomes a black box.

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 <a href="https:&#x2F;&#x2F;nodered.org&#x2F;" rel="nofollow">https:&#x2F;&#x2F;nodered.org&#x2F;</a>

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.<p>Looks cool though!

Wow, this is a really cool project.<p>I&#x27;d really like to see something like this in browser developer tools someday.

amazing! thinking of something to use it for. v. minor bug, +&#x2F;- keys zoom in and out even when editing a field :)

This is killer! Awesome work.

This looks great!

Neat!

Doesn&#x27;t seem to work on Firefox, had to switch to Chrome for testing it, the new normal.

Warning: this website hijack your browser back button

While this is indeed amazing I think it suffers from not being a PWA.<p>Being able to stuff it on its own little instance with no &quot;back&quot; 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.<p>One other thing I&#x27;d love to have is an interactive tutorial, I&#x27;d love to be able to follow some steps to understand the thing better.