<aside> ⚠️ natto.dev is currently in preview and changing every day so this tutorial may be a little out of date. I'll try my best to keep it up to date!

</aside>

In this tutorial, we'll use most of natto's features interacting with the National Weather Service API. We'll end with something like this canvas.

Start with a clean canvas on https://natto.dev.

Right click on the canvas and select add eval.

This creates an eval pane which consists of an expression editor and output. This is very much like a JavaScript console. Try out some expressions.

• 5 + 8
• [1,2,3].map(x => x + 1)
• {x: 3, y: 4}

Expressions can also be promises. In this example, we'll fetch data from the National Weather Service API. To get a location's forecast, we first need to get the NWS office coordinates for that lat long.

By default, panes evaluate its expression whenever it changes. Because this expression will have a side-effect, let's disable autorun by clicking auto so we're not spamming the API on every keystroke.

Enter this expression which evaluates to a JavaScript promise.

fetch("<https://api.weather.gov/points/37.7749,-122.4194>")
.then(r => r.json())

<aside> 💡 Note that you can resize panes as well as the editor height. Double clicking the pane header will maximize the pane.

</aside>

Click the run button. Assuming the HTTP request succeeds, you'll see an interactive JSON object.

The output of a pane can be used as an input to another pane. Drag the top-right arrow to an open space on the canvas to create a new pane. The input is the variable value.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b42cf8bf-9703-4961-abed-84511e7d902b/Screen_Recording_2021-03-11_at_1.42.22_PM.mov

The pane gives us an interactive way to find and extract the data we need. Tweak the expression so the pane shows the URL of the forecast endpoint (value.properties.forecast). Again, drag the arrow in the top right to create yet another pane.