Introducing react‑obj‑view: A High‑Performance Object Inspector for React

As a React developer you often need to inspect deeply nested JavaScript structures — whether for debugging state, exploring API responses, or visualizing data in development tools. That’s why I created react‑obj‑view, a TypeScript‑first React component that offers a rich “object inspector” UI with performance built in.

What it does

react‑obj‑view enables you to render any value (objects, arrays, promises, maps, sets, errors, etc) in a tree UI directly inside your React app. The key features:

• Virtualised tree view: only visible rows are rendered, so it stays responsive even with 100K+ entries.
• Built‑in resolvers: supports promises, maps, sets, errors, dates, regex, iterables and handles circular references.
• Preview summaries: collapsed nodes show inline previews so you can scan quickly.
• Update Highlighting: optional flashing when values change, helping debugging.
• Theming & styling hooks: override CSS variables or apply class names; includes theme presets.

Why this library?

There are other object viewers (e.g., react‑json‑view) but many come with limitations: full tree rendering (slow for large structures), limited data‑type support (only plain JSON), little customization, or no virtualization.

With react‑obj‑view you get:

• Performance for large data sets
• Rich support for JS/TS data types
• Easy theming and integration in your design system
• TypeScript support for modern React (currently React 19.x)

Quickstart

npm install react-obj-view
# or
yarn add react-obj-view

import { ObjectView } from "react-obj-view";
import "react-obj-view/dist/react-obj-view.css";

const user = {
  name: "Ada",
  stack: ["TypeScript", "React"],
  meta: new Map([["lastLogin", new Date()]])
};

export function DebugPanel() {
  return (
    <ObjectView
      valueGetter={() => user}
      name="user"
      expandLevel={2}
    />
  );
}

Key Props & Config

Prop	Type	Default	Description
valueGetter	() => unknown	required	Provides the data lazily so the tree stays in sync.
name	string	undefined	Label for the root node
expandLevel	`number \	boolean`	false
objectGroupSize, arrayGroupSize	number	0	Group or virtualise large object/array structures
highlightUpdate	boolean	false	If true, changed values flash for visibility

Theming

Using built‑in themes is straightforward:

import { themeMonokai } from "react-obj-view";

<ObjectView
  valueGetter={getter}
  style={themeMonokai}
/>

Some builtin themes

Default	Dracula	Sepia

Use‑cases & Audience

This library is ideal for:

• Developers reviewing complex state trees (Redux, Zustand, MobX)
• Debug tooling inside internal dashboards
• Logging or debug panels in production (with performance concern)
• Data explorers in admin UIs

Roadmap & Contribution

I plan to add:

• More resolver hooks for custom classes
• Improved accessibility (keyboard navigation)
• Smaller bundle size optimisations
• More themes and style presets

Contributions, issue reports and PRs are welcome. Open‑source under MIT license.

Closing

If you’re looking for a high‑performance, flexible object‑inspector for React that works with modern TS/JS patterns — try react‑obj‑view.