tessl/npm-react-inspector

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

—

Pending

Overview

Eval results

Files

DOM Inspector

Name: tessl/npm-react-inspector
Author: tessl

Specialized inspector for DOM nodes that displays the DOM tree structure with proper HTML element representation. Designed for examining DOM nodes in a hierarchical tree format similar to browser developer tools.

Capabilities

DOMInspector Component

Main component for inspecting DOM nodes with appropriate tree structure and HTML formatting.

/**
 * Inspector for DOM nodes displaying HTML tree structure
 * @param props - DOMInspector configuration props
 * @returns React element displaying the DOM tree
 */
function DOMInspector(props: DOMInspectorProps): React.ReactElement;

interface DOMInspectorProps {
  /** DOM Node to inspect - Element, Text, Comment, Document, etc. */
  data: Node;
  /** Theme configuration - preset string or custom theme object */
  theme?: string | ThemeObject;
  /** Optional root node name */
  name?: string;
  /** Initial expansion level - 0 means collapsed, 1 expands first level, etc. */
  expandLevel?: number;
  /** 
   * Paths to expand on initialization - JSONPath-style strings or array
   * Example: ["$", "$.0", "$.0.1"] to expand specific child nodes
   */
  expandPaths?: string | string[];
}

Usage Examples:

import React, { useRef, useEffect } from "react";
import { DOMInspector } from "react-inspector";

// Inspect a DOM element
function BasicDOMExample() {
  const divRef = useRef<HTMLDivElement>(null);
  
  useEffect(() => {
    if (divRef.current) {
      // Add some content to inspect
      divRef.current.innerHTML = `
        <span class="greeting">Hello</span>
        <p id="message">World!</p>
      `;
    }
  }, []);
  
  return (
    <div>
      <div ref={divRef} className="demo-content" />
      {divRef.current && (
        <DOMInspector 
          data={divRef.current} 
          name="demoDiv"
          expandLevel={2}
        />
      )}
    </div>
  );
}

// Inspect document or other DOM objects
function DocumentExample() {
  return (
    <DOMInspector 
      data={document.documentElement} 
      name="document.documentElement"
      expandLevel={1}
    />
  );
}

DOM Node Types Support

DOMInspector handles all standard DOM node types appropriately:

Element Nodes (Node.ELEMENT_NODE = 1):

Display as HTML tags: <div>, <span>, <p>, etc.
Show attributes as properties
Display child elements in tree structure
Include closing tags for elements with children

Text Nodes (Node.TEXT_NODE = 3):

Display text content
Skip empty whitespace-only text nodes
Show actual text values inline for elements with simple text content

Comment Nodes (Node.COMMENT_NODE = 8):

Display as HTML comments: 
Preserved in tree structure

Document Nodes (Node.DOCUMENT_NODE = 9):

Display document structure
Show document properties and child nodes

Document Fragment Nodes (Node.DOCUMENT_FRAGMENT_NODE = 11):

Display fragment contents
Show all child nodes

HTML Element Representation

DOM elements are displayed with proper HTML syntax and styling:

// Element display format examples:
// <div class="container" id="main">
//   <span>Hello</span>
//   <p>World</p>
// </div>

// Self-closing elements:
// <img src="image.jpg" alt="Description" />
// <br />

// Elements with attributes:
// <input type="text" value="example" data-id="123" />

Attribute Handling:

All attributes displayed with proper syntax
Attribute names and values properly styled
Boolean attributes handled correctly
Data attributes and custom attributes included

Text Content Inlining

DOMInspector intelligently handles text content display:

Inline Text: Simple text content is displayed inline with the element

<span>Simple text</span>  <!-- Text shown inline -->

Complex Content: Elements with multiple children show expanded structure

<div>
  <span>Child 1</span>
  <span>Child 2</span>
</div>

Whitespace Handling: Empty whitespace-only text nodes are automatically filtered out to reduce clutter.

Tree Node Naming

DOM nodes are labeled in the tree using a specific naming convention:

// Node naming format: TAGNAME[index]
// Examples:
// DIV[0] - First div child
// SPAN[1] - Second span child  
// P[0] - First paragraph child
// CLOSE_TAG - Closing tag marker for elements with children

Expansion Control

Control which parts of the DOM tree are initially expanded:

// Expand specific DOM paths
<DOMInspector 
  data={domElement}
  expandPaths={[
    "$",           // Root element
    "$.0",         // First child
    "$.0.1",       // Second child of first child
  ]}
/>

// Expand to show element structure
<DOMInspector 
  data={domElement}
  expandLevel={2}  // Show 2 levels deep
/>

Styling and Themes

DOMInspector uses specialized theme variables for HTML element styling:

interface DOMThemeVariables {
  /** Color for HTML tag brackets < > */
  HTML_TAG_COLOR?: string;
  /** Color for tag names (div, span, p, etc.) */
  HTML_TAGNAME_COLOR?: string;
  /** Text transform for tag names (uppercase, lowercase, none) */
  HTML_TAGNAME_TEXT_TRANSFORM?: string;
  /** Color for attribute names (class, id, src, etc.) */
  HTML_ATTRIBUTE_NAME_COLOR?: string;
  /** Color for attribute values */
  HTML_ATTRIBUTE_VALUE_COLOR?: string;
  /** Color for HTML comments */
  HTML_COMMENT_COLOR?: string;
  /** Color for DOCTYPE declarations */
  HTML_DOCTYPE_COLOR?: string;
}

Default Chrome Light Theme Colors:

Tag brackets: Gray (#888)
Tag names: Purple (#881280)
Attribute names: Brown (#994500)
Attribute values: Blue (#1a1aa6)
Comments: Gray (#708090)

Practical Use Cases

Development Tools:

// Create a DOM inspector tool for debugging
function DOMDebugger({ selector }: { selector: string }) {
  const element = document.querySelector(selector);
  
  if (!element) {
    return <div>Element not found: {selector}</div>;
  }
  
  return (
    <div>
      <h3>DOM Inspector: {selector}</h3>
      <DOMInspector 
        data={element}
        expandLevel={1}
        theme="chromeDark"
      />
    </div>
  );
}

Component Structure Analysis:

// Inspect React component DOM output
function ComponentInspector({ children }: { children: React.ReactNode }) {
  const containerRef = useRef<HTMLDivElement>(null);
  
  return (
    <div>
      <div ref={containerRef}>
        {children}
      </div>
      {containerRef.current && (
        <details>
          <summary>DOM Structure</summary>
          <DOMInspector 
            data={containerRef.current}
            expandLevel={3}
          />
        </details>
      )}
    </div>
  );
}