or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

dom-inspector.mdindex.mdobject-inspector.mdtable-inspector.mdthemes.mduniversal-inspector.mdutility-components.md
tile.json

tessl/npm-react-inspector

Browser DevTools-style inspectors for React applications to display JavaScript objects, tables, and DOM nodes.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-inspector@9.0.x

To install, run

npx @tessl/cli install tessl/npm-react-inspector@9.0.0

index.mddocs/

React Inspector

React Inspector brings the power of Browser DevTools inspectors directly into React applications. It provides three main inspector components for displaying JavaScript objects in a hierarchical tree view (ObjectInspector), tabular data display (TableInspector), and DOM node examination (DOMInspector). The library supports extensive customization through themes, expandable tree nodes, sortable object keys, and custom node renderers.

Package Information

  • Package Name: react-inspector
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install react-inspector

Core Imports

import { 
  Inspector, 
  ObjectInspector, 
  TableInspector,
  ObjectLabel,
  ObjectRootLabel,
  ObjectPreview,
  ObjectValue,
  ObjectName,
  chromeLight,
  chromeDark
} from "react-inspector";

For CommonJS:

const { 
  Inspector, 
  ObjectInspector, 
  TableInspector,
  ObjectLabel,
  ObjectRootLabel,
  ObjectPreview,
  ObjectValue,
  ObjectName,
  chromeLight,
  chromeDark
} = require("react-inspector");

Basic Usage

import React from "react";
import { Inspector, ObjectInspector, TableInspector } from "react-inspector";

const MyComponent = () => {
  const data = {
    user: { name: "Alice", age: 30, active: true },
    items: [{ id: 1, name: "Item 1" }, { id: 2, name: "Item 2" }],
    metadata: { created: new Date(), tags: ["important", "demo"] }
  };

  return (
    <div>
      {/* Universal inspector - automatically selects appropriate type */}
      <Inspector data={data} />
      
      {/* Table view */}
      <Inspector table data={data.items} />
      
      {/* Object tree view with expanded first level */}
      <ObjectInspector data={data} expandLevel={1} />
      
      {/* Tabular display */}
      <TableInspector data={data.items} />
    </div>
  );
};

Architecture

React Inspector is built around several key components:

  • Universal Inspector: Inspector component that automatically selects the appropriate inspector type based on data
  • Tree-based Inspection: ObjectInspector for hierarchical object exploration with expandable nodes
  • Table-based Inspection: TableInspector for tabular data display similar to console.table
  • DOM Inspection: DOMInspector for examining DOM nodes in a tree structure
  • Theming System: Customizable themes with Chrome DevTools light/dark presets
  • State Management: Tree expansion state persistence across component unmounting

Capabilities

Universal Inspector

The main Inspector component that automatically selects the appropriate inspector type based on the provided data. Provides a simple interface for most use cases.

/**
 * Universal inspector component that automatically selects appropriate inspector type
 * Note: Components use FC<any> - prop contracts defined via PropTypes comments in source
 * @param props - Inspector props object
 * @returns React element with appropriate inspector
 */
function Inspector(props: {
  /** Data to inspect - any JavaScript value */
  data: any;
  /** When true, uses TableInspector instead of ObjectInspector */
  table?: boolean;
  /** Theme configuration - string preset or custom theme object */
  theme?: string | object;
  /** Optional root node name */
  name?: string;
  /** Initial expansion level for ObjectInspector */
  expandLevel?: number;
  /** Paths to expand on initialization */
  expandPaths?: string | string[];
  /** Show non-enumerable properties */
  showNonenumerable?: boolean;
  /** Sort object keys */
  sortObjectKeys?: boolean | ((a: string, b: string) => number);
  /** Custom node renderer function */
  nodeRenderer?: (props: any) => React.ReactElement;
  /** Column names for TableInspector */
  columns?: string[];
}): React.ReactElement;

Universal Inspector

Object Inspector

Tree-view inspector for JavaScript objects, similar to console.log output. Displays objects in an expandable hierarchical structure with support for all JavaScript data types.

/**
 * Tree-view inspector for JavaScript objects (like console.log)
 * Note: Uses FC<any> - actual props defined via PropTypes comments in source
 * @param props - ObjectInspector props object
 * @returns React element displaying object tree
 */
function ObjectInspector(props: {
  /** The JavaScript object to inspect */
  data?: any;
  /** Optional root node name */
  name?: string;
  /** Initial expansion level (depth) */
  expandLevel?: number;
  /** Paths to expand on initialization */
  expandPaths?: string | string[];
  /** Show non-enumerable properties */
  showNonenumerable?: boolean;
  /** Sort object keys alphabetically or with custom function */
  sortObjectKeys?: boolean | ((a: string, b: string) => number);
  /** Custom node renderer function */
  nodeRenderer?: (props: any) => React.ReactElement;
  /** Theme configuration */
  theme?: string | object;
}): React.ReactElement;

Object Inspector

Table Inspector

Tabular inspector for arrays and objects, similar to console.table. Displays data in a sortable table format with column selection support.

/**
 * Tabular inspector for arrays and objects (like console.table)
 * Note: Uses FC<any> - actual props defined via PropTypes comments in source
 * @param props - TableInspector props object
 * @returns React element displaying data table
 */
function TableInspector(props: {
  /** Array or object to display in table format */
  data: any[] | object;
  /** Array of column names to display */
  columns?: string[];
  /** Theme configuration */
  theme?: string | object;
}): React.ReactElement;

Table Inspector

DOM Inspector

Specialized inspector for DOM nodes, displaying the DOM tree structure with proper HTML element representation. Note: DOMInspector is not directly exported - it is used internally by the Inspector component when DOM nodes are detected.

// DOMInspector is used internally by Inspector component
// Access via: <Inspector data={domNode} />

DOM Inspector

Utility Components

Low-level components for building custom inspector interfaces and node renderers.

/**
 * Utility components for building custom inspector interfaces
 * Note: All components use FC<any> - actual props defined via PropTypes comments in source
 */
function ObjectLabel(props: {
  name: string | any;
  data: any;
  isNonenumerable?: boolean;
}): React.ReactElement;

function ObjectRootLabel(props: {
  name?: string;
  data: any;
}): React.ReactElement;

function ObjectPreview(props: {
  data: any;
}): React.ReactElement;

function ObjectValue(props: {
  object: any;
  styles?: React.CSSProperties;
}): React.ReactElement;

function ObjectName(props: {
  name: string;
  dimmed?: boolean;
  styles?: React.CSSProperties;
}): React.ReactElement;

Utility Components

Themes

Pre-built themes and theming system for customizing the appearance of inspectors.

const chromeLight: ThemeObject;
const chromeDark: ThemeObject;

interface ThemeObject {
  BASE_FONT_FAMILY?: string;
  BASE_FONT_SIZE?: string;
  BASE_LINE_HEIGHT?: number;
  BASE_BACKGROUND_COLOR?: string;
  BASE_COLOR?: string;
  OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES?: number;
  OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES?: number;
  OBJECT_NAME_COLOR?: string;
  OBJECT_VALUE_NULL_COLOR?: string;
  OBJECT_VALUE_UNDEFINED_COLOR?: string;
  OBJECT_VALUE_REGEXP_COLOR?: string;
  OBJECT_VALUE_STRING_COLOR?: string;
  OBJECT_VALUE_SYMBOL_COLOR?: string;
  OBJECT_VALUE_NUMBER_COLOR?: string;
  OBJECT_VALUE_BOOLEAN_COLOR?: string;
  OBJECT_VALUE_FUNCTION_PREFIX_COLOR?: string;
  OBJECT_VALUE_FUNCTION_NAME_COLOR?: string;
  HTML_TAG_COLOR?: string;
  HTML_TAGNAME_COLOR?: string;
  HTML_TAGNAME_TEXT_TRANSFORM?: string;
  HTML_ATTRIBUTE_NAME_COLOR?: string;
  HTML_ATTRIBUTE_VALUE_COLOR?: string;
  HTML_COMMENT_COLOR?: string;
  HTML_DOCTYPE_COLOR?: string;
  ARROW_COLOR?: string;
  ARROW_MARGIN_RIGHT?: number;
  ARROW_FONT_SIZE?: number;
  ARROW_ANIMATION_DURATION?: string;
  TREENODE_FONT_FAMILY?: string;
  TREENODE_FONT_SIZE?: string;
  TREENODE_LINE_HEIGHT?: number;
  TREENODE_PADDING_LEFT?: number;
  TABLE_BORDER_COLOR?: string;
  TABLE_TH_BACKGROUND_COLOR?: string;
  TABLE_TH_HOVER_COLOR?: string;
  TABLE_SORT_ICON_COLOR?: string;
  TABLE_DATA_BACKGROUND_IMAGE?: string;
  TABLE_DATA_BACKGROUND_SIZE?: string;
}

Themes

Types

/**
 * Node renderer function signature (not formally defined in source)
 * Based on actual usage patterns in the codebase
 */
type NodeRenderer = (props: {
  /** Current depth in the tree */
  depth: number;
  /** Property name or array index */
  name: string | number;
  /** The data value at this node */
  data: any;
  /** Whether this property is non-enumerable */
  isNonenumerable?: boolean;
  /** Whether this node is expanded */
  expanded?: boolean;
}) => React.ReactElement;