This library implements the default value rendering implementation for Observable notebooks. When plugged in to the Observable runtime as observers, inspectors can be used to insert DOM elements into the page or to render interactive inspectors for arbitrary values.
To install this library from npm:
npm install @observablehq/notebook-inspector
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.
Creates a new inspector attached to the specified DOM element.
For example, to render a notebook into elements whose id attribute matches the variable name:
Or, to render a single variable into a new DIV element appended to the body:
See also Inspector.into.
observablehq-running class to this inspector’s element.
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
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--error class to this inspector’s element.
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 Runtime.load as the observer factory to conveniently render an entire notebook. For example, to render into the body:
To render into a specific element: