natto.dev is a canvas for JavaScript.

If you are new to natto, I recommend going through the Tutorial to get an overview.

Panes

There are a few types of panes.

Eval pane

Eval panes are the heart of natto. Each eval pane has an editor whose expression is evaluated and rendered. Try creating one and typing an expression like 3+8 or {x: 3, y: 4}. You can use JavaScript Promises to represent async values.

The output of an eval pane can be used as the input of another pane. Drag the arrow in the upper right of the pane to create another eval pane. You'll notice that the expression is prepopulated with value, which is a reference to the connected input.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/bb2f02ea-38d2-430e-a6be-07de846a0ee9/Screen_Recording_2021-03-11_at_1.11.11_PM.mov

Eval panes automatically evaluate its expression whenever its expression or an input changes. This provides immediate feedback when editing the expression. However, you'll want to disable this behavior for expressions with side effects (eg network requests) and expensive computations. Click auto in the pane header to toggle this behavior.

<aside> 💡 All JavaScript is executed in your browser tab. This means network requests have to handle CORS. You won't be able to fetch most webpages (eg google.com). We may add a proxy to enable this in the future.

</aside>

Eval panes will not run while it has an unresolved input (has error or waiting for execution).

Eval panes can have multiple inputs. You can access the input values with the inputs array. value is an alias for inputs[0]. Try creating an eval pane with multiple inputs. Drag the output arrow and move your mouse on top of another pane. Click an input to rename, disconnect, or remove it.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/03c536f0-a6c7-45c9-a78d-9a047fe71ff4/Screen_Recording_2021-03-11_at_1.15.06_PM.mov

You can resize the editor height by dragging the horizontal line below the editor. Click on the pane's title to change its name. A pane's name will be used as its default input name when connected to another pane.

Eval pane settings

Import pane

Import panes allow you to use ES modules on your canvas. This gives you access to almost all NPM modules in your browser! Import panes work very similarly to eval panes once you choose the module. You can optionally give the pane a name and choose whether to define that name as a global variable. This is convenient if you want to use a library as a global utility (eg define lodash as _). This is also useful to define the global variable React to be used if you're rendering React.

If you choose npm, natto will import the specified module from Skypack. You can use either specify a package's name (eg lodash) or with a version ([email protected]). Additionally, natto will automatically try to import the module's type definitions to give you autocomplete! Note this is known not to work perfectly.

You can use the url setting to import a module using a URL. This is useful if you have a ES module that lives elsewhere or you want to use a different ES module CDN (eg JSPM, esm.run)

Text pane

Text panes are similar to eval panes but only contain a textbox. The output of a text pane is a string. You can drop a text file onto a text pane to set its value. This is useful for .json and .csv files which you can then parse in an eval pane.

You can also use text panes to write notes on your canvas. Panes don't need to be connected!

State pane

State pane provide a way to model state on your canvas. The design is a lot like React's useState hook. The pane has two outputs - the value and a function to update the value.

The setValue function output has the same API as React's setState. You can call it with the new value or with a function that takes the current value and returns the new value. To set the value as a function, call it with a function that returns the desired function value.

The input expression sets the pane's initial value. Note that changing this expression will reset the pane's state to the new expression.

Canvas

Pan the canvas by using the pan tool (hand icon) or scrolling. You can also hold space bar and drag anywhere as well as middle-click dragging the background. Press 0 to reset the canvas position. Press O (capital letter O) to align your panes to the origin.

You can change the zoom from the toolbar. You can also hold Z/⌥Z and clicking to zoom in/out on the canvas. - and = also work.

Rename your canvas by clicking on the name in the top toolbar.

Your canvases are saved in your browser. By creating an account, you can publish a canvas to natto's server. A published canvas is visible to anyone with the link. Published canvases are snapshots and are not automatically updated. You can republish a local draft to update a published canvas.

Layouts

Canvas layouts allows you to have multiple views of the same canvas. You can rearrange and hide panes. This can be used to create a user-friendly version of your canvas that hides the implementation details.

Create and switch layouts using the layout selector in the top right. You can also rename and delete layouts from the selector.

When you have a layout selected, any pane movements and resizing apply to that layout only. In eval panes, the editor height is also saved to the active layout. Note you can completely hide the editor input!

Each canvas starts with the main layout. You cannot delete or rename this layout. You can only create and delete panes in the main layout.

The browser's URL is updated when you select a layout. You can share the URL of a published canvas with a specific layout.