Access an eval pane's settings by clicking the icon in the pane header.

Editor value

The default behavior is to evaluate the editor value as an expression. You can change this so you write the return statement.

Expression (default)

natto will insert return

Function body

You are writing the contents of the function. Note you can use await

Render output

<aside> 💡 Visit this canvas for an interactive demo of render outputs.

</aside>

You can change how eval panes render the expression.

Default

By default, JavaScript values are rendered to be inspected. For example, booleans show true or false, arrays are collapsible lists, and objects are collapsible key-value maps.

Table

If the pane's value is an array of structured elements (objects with consistent keys or nested arrays), you can render the pane as an interactive table. You can sort and extract columns.

The table render also recognizes an object with the following keys for more options.

{
  data: (Object | Array)[],
  // called when a row is clicked with the row item
  onRowClick?: (rowItem: Object | Array) => void,
  // more to come..
}

Try setting onRowClick to the setter of a state pane to build a quick detail view! See this example of viewing artworks from the Art Institute of Chicago.

DOM

If the expression value is a DOM node, it is set as the pane's child. This is useful for libraries that either render a DOM node or render into a DOM node. If a library requires a DOM node, you can use document.createElement('div') to render a DOM node; the pane's output is a reference to this rendered div.