@observablehq/notebook-inspector

@observablehq/notebook-inspector

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

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.

For example, to render a notebook into elements whose id attribute matches the variable name:

Runtime.load(notebook, variable => {
  return new Inspector(document.getElementById(variable.name));
});

Or, to render a single variable into a new DIV element appended to the body:

Runtime.load(notebook, variable => {
  if (variable.name === "chart") {
    const div = document.createElement("div");
    document.body.appendChild(div);
    return new Inspector(div);
  }
});

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 Runtime.load as the observer factory to conveniently render an entire notebook. For example, to render into the body:

Runtime.load(notebook, Inspector.into(document.body));

To render into a specific element:

Runtime.load(notebook, Inspector.into(".article .visualization"));