Controlling the output


I noticed the examples include rending a map and rendering a graph. It looks like pehaps Tonic is looking for specific properties in the resulting object and if found enables special renderers.

If so what objects are supported? If I want to graph a function how do I go about this?

Is it possible to extend this behavior. Also, is it possible to render nothing?

I was somewhat suprised that something like

const { x, y } = { x: 1, y: 100, z: 1000 };

would stil render all 3 properties, I guess this is because it prints the last evaluated expression and not the assignment.
I then tried console.log({x, n}) which prints this as an object like I want but then with a comment followed by ? undefined. The best workaround I found for this is just to call an identity function so that its the last evaluated expression, but feels like I should have more control over the output somehow, some undocumented command(s) maybe?


I figured it out. If last evaluated expression returns html it will use that. I tried to console.log html and that didn’t work it has to be the result of the last expression.


Hi Kurt,

Let me give you a more comprehensive answer.

First off, yes we do try to “sniff” the object type. For example, if the object contains lat/long its “easy”, but if its an array of 2 numbers, we check whether they are within the allowed boundaries of latitude and longitude, that way we don’t erroneously detect any two item array for example.

Generally, our sniffer has levels of confidence: for sure not, for sure is, and “maybe”. So with lat long it can sometimes be very sure, other times be maybe, and of course most the time say “nope”. Charts on the other hand currently always report “maybe” (that is, we’re never SO SURE you want to look at data as a graph that we’d auto select that option).

Currently you can’t render nothing, but its something we’re thinking about.

So the reason that const { x, y } = { x: 1, y: 100, z: 1000 } renders all three properties is that the expression technically “returns” { x: 1, y: 100, z: 1000 }. You can test this yourself by trying in normal node:

a = ({ x, y } = { x:1, y:100, z:1000 })

a will equal { x:1, y:100, z:1000 }

To get it to just print { x , y } and nothing else, you can just put that at the end (without a log, which returns undefined, which is why it then shows undefined – this can be confusing we know, but its hard because sometimes you call a function that ACTUALLY returns undefined and you want to see the undefined). But, this should do exactly what you want:

const { x, y } = { x: 1, y: 100, z: 1000 };
{ x, y };


Great work! Runkit could be an alternative to jupyter.