Web components for visually inspecting objects.

Embed inspectors similar to Chrome's devtools inspectors in your web app. Works in any framework!

npm i inspector-elements

1. Import the elements:

   import 'inspector-elements';

2. Create an element: You can create an element in any way: DOM APIs, frameworks, template systems, etc.

   const inspector = document.createElement('ix-object-inspector');

3. Set the data:

   inspector.data = {foo: 'bar'};

Shows the properties and values of an object in a navigable tree.

Example (Lit template syntax):

const data = {
  string: 'foo',
  number: 42,
  array: [7, 8, 9],
  object: {foo: 'bar'},
};
return html`<ix-object-inspector .data=${data}></ix-object-inspector>`

• data: any: Any value to inspect
• name: string: Optional name of the root object
• expandLevel: number: An integer specifying to which level the tree should be initially expanded
• expandPaths: string | Array<string>: An array containing all the paths that should be expanded, or a string of just one path
• showNonenumerable: boolean: Whether to show non-enumerable properties
• sortObjectKeys: boolean | ((a: PropertyKey, b: PropertyKey) => number): Sort object keys with optional compare function

Shows DOM elemets with attributes and children in a navigable tree.

Example (Lit):

const data = document.querySelector('#app');
return html`<ix-dom-inspector .data=${data}></ix-dom-inspector>`;

• data: Node: Any DOM Node to inspect

Displays objects and properties in a table.

• data: Record<string, unknown> | Array<unknown>: An object or array
• columns: Array<string>: An array of column names to include in the output.

Example (Lit):

const data = ['apples', 'oranges', 'bananas'];
return html`<ix-table-inspector .data=${data}></ix-table-inspector>`;

• --ix-base-font-family
• --ix-base-font-size
• --ix-base-line-height
• --ix-base-background-color
• --ix-base-color
• --ix-object-name-color
• --ix-object-value-null-color
• --ix-object-value-undefined-color
• --ix-object-value-regexp-color
• --ix-object-value-string-color
• --ix-object-value-symbol-color
• --ix-object-value-number-color
• --ix-object-value-boolean-color
• --ix-object-value-function-prefix-color
• --ix-object-preview-font-style
• --ix-html-tag-color
• --ix-html-tagname-color
• --ix-html-tagname-text-transform
• --ix-html-attribute-name-color
• --ix-html-attribute-value-color
• --ix-html-comment-color
• --ix-html-doctype-color
• --ix-arrow-color
• --ix-arrow-margin-right
• --ix-arrow-font-size
• --ix-arrow-animation-duration
• --ix-treenode-font-family
• --ix-treenode-font-size
• --ix-treenode-line-height
• --ix-treenode-padding-left
• --ix-table-border-color
• --ix-table-th-background-color
• --ix-table-th-hover-color
• --ix-table-sort-icon-color
• --ix-table-tr-even-background-color
• --ix-table-tr-odd-background-color

This port is very much in progress! Rough first passes of object, dom, and table inspectors are done, but tests and stories are incomplete. There may be many bugs with cases that weren't covered during this initial development.

• Elements
  • <ix-object-inspector>
  • <ix-dom-inspector>
  • <ix-table-inspector>
• Add CSS Parts
• Tests
• Storybook
  • Add Storybook to project
  • Hook up custom properties and attributes
  • Publish static storybook

This projecte started as a web components port of the https://github.com/storybookjs/react-inspector