React package · v0.1.0

react-json-glimpse

A small, virtualized JSON viewer for React apps where payload previews need to be readable, fast, and boring in the best way.

View on npmContact me

Why it exists

Sometimes the job is simple: show a large JSON payload without making the page feel large. Visible rows are virtualized, collapsed branches stay cheap, and styling uses CSS variables instead of another theme dependency.

Live demo

180 nested rows, rendered through the actual package.

-payloadObject(8) {
"requestId": "req_live_preview_7f29"
"status": "ok"
"receivedAt": "2026-07-05T18:42:11.000Z"
"durationMs": 146
-"cache": Object(3) {
"hit": true
"ttlSeconds": 300
"key": "project:react-json-glimpse:demo"
-"project": Object(4) {
"name": "react-json-glimpse demo"
"package": "react-json-glimpse"
"release": "0.1.0"
"tags": Array(3) [...]
-"rows": Array(180) [
0: Object(8) {...}
1: Object(8) {...}
2: Object(8) {...}
3: Object(8) {...}
4: Object(8) {...}
5: Object(8) {...}
6: Object(8) {...}
7: Object(8) {...}
8: Object(8) {...}
9: Object(8) {...}

payload.summary

Object(4)

Install

pnpm add react-json-glimpse

Use

import { JsonGlimpse } from "react-json-glimpse";

export function PayloadPreview({ payload }: { payload: unknown }) {
  return (
    <JsonGlimpse
      value={payload}
      height={520}
      initialExpandedDepth={2}
      onSelect={({ path, value }) => console.log(path, value)}
    />
  );
}

What it is good at

  • · TypeScript-first API
  • · Virtualized rows for large payloads
  • · Lazy expand and collapse behavior
  • · SSR-safe rendering
  • · React 18 and React 19 peer support

Need a clearer way to inspect JSON?

Open the package to install it, or contact me to talk through your React data-preview use case.

View on npmContact me