@observablehq/inspector

This library implements the default value renderer for Observable programs. When used with the Observable runtime as observers, inspectors can insert elements into the DOM and render interactive displays for arbitrary values.

To install this library from npm:

npm install @observablehq/inspector

This library is also available for download from unpkg as an ES module and as a UMD bundle.

API Reference

Inspectors

An inspector implements the Observable runtime’s Observer interface by rendering the current value of its associated variable to a given DOM element. Inspectors display DOM elements “as-is”, and create interactive “devtools”-style inspectors for other arbitrary values such as numbers and objects.

# new Inspector(element) <>

Creates a new inspector attached to the specified DOM element. See also Inspector.into.

# inspector.pending() <>

Applies the observablehq--running class to this inspector’s element.

# inspector.fulfilled(value) <>

Inspects the specified value, replacing the contents of this inspector’s element as appropriate, and dispatching an update event. If the specified value is a DOM element or text node, and the value is not already attached to the DOM, it is inserted into this inspector’s element, replacing any existing contents. Otherwise, for other arbitrary values such as numbers, arrays, or objects, an expandable display of the specified value is generated into this inspector’s element. Applies the observablehq class to this inspector’s element, and for non-element values, the observablehq--inspect class.

# inspector.rejected(error) <>

Inspects the specified error, replacing the contents of this inspector’s element as appropriate with the error’s description, and dispatching an error event. Applies the observablehq and observablehq--error class to this inspector’s element.

# Inspector.into(container) <>

Returns a function that when passed a given variable, returns a new inspector attached to a new DIV element within the specifier container element. If container is a string, it represents a selector, and the container element becomes the matching selected element. This method can be used with an Observable module definition as the observer factory to conveniently render an entire program.