React Data Inspector

Inspect the object
you actually have.

A React inspector for real JavaScript object graphs. Explore values, follow shared references and cycles, and keep your application in control.

InstallOpen playgroundRead docs
import { DataInspector } from
  '@nipe-solutions/react-data-inspector'
import '@nipe-solutions/react-data-inspector/styles.css'

<DataInspector value={data} />

Available on npm · 1.0.0

npm install @nipe-solutions/react-data-inspector
Installation and CSS setup

React 18 / 19 · TypeScript · No library runtime dependencies

application-state.tsLive inspection · try a reference
$Object
userObject
id42
name"Nicholas"
createdAt2026-09-07T09:00:00.000Z
copyOfUser
rolesSet(2)
0"admin"
1"editor"
cacheMap(1)
0 · key"status"
0 · value"ready"
revision9007199254740993n
optionalundefined
self
Arrow keys navigate. Enter opens branches or follows references. Space selects. F2 opens actions.
↩ Circular reference↗ Shared identityOwn values, intact
Graph-aware
Values and identity, together.
Application-owned
Your data. Your state.
CSS-first
Style one layer at a time.

JSON is a format.
Your application state isn’t.

A JSON viewer shows serialized data. React Data Inspector understands the JavaScript graph.

JSON can represent

{
  "object": {},
  "array": [],
  "string": "hello",
  "number": 42,
  "boolean": true,
  "null": null
}
End of the JSON format

No Map. No Set. No object identity.

Your application can contain

$Object
undefinedundefined
bigint9007199254740993n
symbolSymbol(request)
date2026-09-07T09:00:00.000Z
urlhttps://example.com/api
Arrow keys navigate. Enter opens branches or follows references. Space selects. F2 opens actions.

Values retain their types. References retain their meaning. Expand identity to follow the graph. Explore the Type Museum →

A tree isn’t always a tree.

Open a branch. Follow a reference. Search inside a collapsed value. These are actual JavaScript objects.

Two paths. One object. Changing the original is visible through both references.

$.user$.copyOfUserObject { id: 42 }same identity

Circular references point into their own ancestor chain. Shared references point to an object already seen elsewhere. Those are different relationships, and the inspector preserves that distinction. Read the graph model

Keyboard navigation enabled
$Object
copyOfUser
revision9007199254740993n
optionalundefined
self
Arrow keys navigate. Enter opens branches or follows references. Space selects. F2 opens actions.

Want to try your own data? Open the full Playground →

Looking at data
shouldn’t run it.

Accessors are represented by their descriptors. Functions stay functions. Promises and weak collections stay opaque.

const value = {
  get token() {
    dangerousSideEffect()
    return 'secret'
  },
  callback() {},
  pending: Promise.resolve('ready'),
  weakMap: new WeakMap(),
  weakSet: new WeakSet(),
}

This demonstration counts getter calls, callback calls and subscriptions to the inspected Promise.

$Object
tokenGetter
callbackƒ callback()
pendingPromise
weakMapWeakMap
weakSetWeakSet
Arrow keys navigate. Enter opens branches or follows references. Space selects. F2 opens actions.
Getter calls 0Function calls 0Promise subscriptions 0

This is descriptor-safe inspection, not a sandbox. Proxy traps and custom renderers can execute application code. Exact inspection semantics

500,000 values.
Still usable.

This is a real half-million-item array. Open a range, then a smaller range. The inspector discovers the values you ask to see.

$Array(500000) · indexed items only
Arrow keys navigate. Enter opens branches or follows references. Space selects. F2 opens actions.

Default grouping: 50 first-level ranges, then groups of 100 values. Search is capped at 100,000 visited rows; partial results are labelled.

Less visible data. Less work.

Collapsed
Descendants are not walked just to paint a row.
Grouped
Hierarchical ranges bound the size of each branch.
Windowed
Above 200 model rows, the client mounts a viewport and overscan, retaining focused ancestry.
Budgeted
Search yields between tasks and discloses incomplete results.
Measurements and methodologyMeasure on your device

Change one layer.
Keep the rest.

Adjust the appearance or connect application behavior. Each example changes only the relevant public API.

  1. CSS variablesColors, type and spacing
  2. Data attributesStyle semantic states
  3. SlotsReplace one piece of content
  4. Custom typesDescribe domain values
  5. ActionsConnect application behavior
  6. Controlled stateOwn selection and expansion
  7. UnstyledOwn the entire appearance
Presentation
Appearance
Extensions
$Object
invoice"INV-0042"
paidtrue
Arrow keys navigate. Enter opens branches or follows references. Space selects. F2 opens actions.
The change is this small.
<DataInspector value={data} className="brand-colors" />
.brand-colors {
  --rdi-background: #f7fbf9;
  --rdi-string-color: #206246;
  --rdi-number-color: #934b08;
  --rdi-focus-ring: #1d664c;
}

Simple customization should remain simple. Deep customization should not require a fork. Explore every layer

State stays
with your application.

The inspector exposes state. It does not become your state manager. Select a field and watch the adjacent application panel respond.

$Object
activetrue
Arrow keys navigate. Enter opens branches or follows references. Space selects. F2 opens actions.

Control expansionConnect selectionExplore continuous updates

Built to live
inside real products.

Keep the surrounding interface yours. Embed the inspector exactly where a raw value helps someone make a decision.

Requests / GET /api/users200 OK
$Object
status200
headersMap(2)
0 · key"content-type"
0 · value"application/json"
1 · key"x-request-id"
1 · value"req_8f42"
bodyObject
cursornull
stateObject
receivedAt2026-09-07T09:00:00.000Z
cachedfalse
Arrow keys navigate. Enter opens branches or follows references. Space selects. F2 opens actions.

Useful in your project?

If React Data Inspector helps you make sense of your data, a GitHub star helps other developers discover it. Explore more tools from NIPE Open Source for your next project.

Star on GitHubExplore NIPE Open Source

Have a real-world edge case? Bring it to the issue tracker.

A focused primitive.
A clear place to start.

Read the contracts, run the examples, and inspect the values your application actually owns.

InstallPlaygroundDocumentationGitHub ↗

Stable inspection API; editing remains out of scope and manual accessibility qualification is documented. Read the limitations.