2b:null 2c:["$","title",null,{"children":"@observablehq/inspector | Irakli Gozalishvili | Observable"}] 31:Tec5,# [@observablehq/inspector](https://github.com/observablehq/inspector) This library implements the default value renderer for Observable programs. When used with the [Observable runtime](https://github.com/observablehq/runtime) as [observers](https://github.com/observablehq/runtime/blob/main/README.md#observers), inspectors can insert elements into the DOM and render interactive displays for arbitrary values. To install this library from [npm](https://www.npmjs.com/package/@observablehq/inspector): ``` npm install @observablehq/inspector ``` This library is also available for download [from unpkg](https://unpkg.com/@observablehq/inspector/) as an [ES module](https://unpkg.com/@observablehq/inspector?module) and as a [UMD bundle](https://unpkg.com/@observablehq/inspector/dist/inspector.js). ## API Reference ### Inspectors An inspector implements the Observable runtime’s [*Observer* interface](https://github.com/observablehq/runtime/blob/main/README.md#observers) by rendering the current value of its associated [variable](https://github.com/observablehq/runtime/blob/main/README.md#variables) 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*) [<>](https://github.com/observablehq/inspector/blob/main/src/index.js "Source") Creates a new inspector attached to the specified DOM *element*. See also [Inspector.into](#Inspector_into). # *inspector*.**pending**() [<>](https://github.com/observablehq/inspector/blob/main/src/index.js "Source") Applies the `observablehq--running` class to this inspector’s *element*. # *inspector*.**fulfilled**(*value*) [<>](https://github.com/observablehq/inspector/blob/main/src/index.js "Source") 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 *value*s, the `observablehq--inspect` class. # *inspector*.**rejected**(*error*) [<>](https://github.com/observablehq/inspector/blob/main/src/index.js "Source") 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*) [<>](https://github.com/observablehq/inspector/blob/main/src/index.js "Source") Returns a function that when passed a given [*variable*](https://github.com/observablehq/runtime/blob/main/README.md#variables), returns a new [*inspector*](#inspectors) 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](https://github.com/observablehq/runtime/blob/main/README.md#_define) as the observer factory to conveniently render an entire program. 32:[] 2f:{"id":"77404db0ea3cd33b","slug":"inspect","title":"@observablehq/inspector","thumbnail":"3ce0fc8098f8f98b30a2afca690b5013138f86874cbb5bc2fdcc9869b7e2b99e","access_level":"public","create_time":"$D2023-02-10T06:18:08.476Z","update_time":"$D2023-02-10T06:29:26.099Z","view_time":null,"first_public_time":"$D2023-02-10T06:18:08.476Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"b5b68141c8cf6180","login":"gozala","name":"Irakli Gozalishvili","avatar_url":"https://avatars-next.observableusercontent.com/0117298600419b54ef5a1d77c46951e7418985d103a10ee32ca5047157ea0924","tier":"starter_2024"},"version":37,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e9e28faabc1f7da7","login":"gozala","name":"Irakli Gozalishvili","avatar_url":"https://avatars-next.observableusercontent.com/0117298600419b54ef5a1d77c46951e7418985d103a10ee32ca5047157ea0924","tier":null}],"members":[{"type":"individual","id":"e9e28faabc1f7da7","login":"gozala","name":"Irakli Gozalishvili","avatar_url":"https://avatars-next.observableusercontent.com/0117298600419b54ef5a1d77c46951e7418985d103a10ee32ca5047157ea0924","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"@observablehq/inspector","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"Inspector = (await import(\"https://unpkg.com/@observablehq/inspector?module\"))\n .Inspector","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"inspect = (value) => {\n const view = document.createElement(\"div\");\n const inspector = new Inspector(view);\n inspector.pending();\n Promise.resolve(value).then(\n (ok) => inspector.fulfilled(ok),\n (error) => inspector.rejected(error)\n );\n return view;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"