react-json-view-lite

react-json-view-lite is a small React component focused on rendering large JSON payloads efficiently without sacrificing accessibility or customizability. Rather than bundling every conceivable feature (inline editing, copy-to-clipboard, search), it sticks to one job — turning a JSON object or array into a readable, collapsible tree — and does it with zero runtime dependencies and a tree-shakeable build.

The component follows the WAI-ARIA treeview pattern, exposing role="tree"/role="treeitem" semantics and full arrow-key navigation between expandable nodes, which is unusual for a library this size. Expand/collapse state is controlled per-node through a shouldExpandNode callback that gets re-evaluated on prop changes, so consumers can drive UI state (e.g. “expand only the changed keys”) without reimplementing the tree traversal themselves.

Styling is entirely CSS-class driven via a StyleProps object, with defaultStyles and darkStyles presets shipped out of the box and every class overridable, so teams can restyle the component to match their design system without fighting specificity wars against inline styles.

What You Get

• A <JsonView> component that takes any data object/array and renders it as a collapsible tree
• Built-in defaultStyles (light) and darkStyles (dark) presets, plus a fully overridable StyleProps shape for custom themes
• Per-node expand/collapse control via a shouldExpandNode(level, value, field) callback, with allExpanded and collapseAllNested helpers included
• Full keyboard navigation (arrow keys move between nodes, matching the WAI-ARIA treeview pattern) and ARIA roles/labels out of the box
• A beforeExpandChange hook to intercept and veto expand/collapse transitions before they apply
• Zero runtime dependencies and a tree-shakeable, dual CJS/ESM build via microbundle

Common Use Cases

• API response inspectors - render a fetched JSON payload in a debug panel or admin tool without pulling in a heavyweight JSON-editor library
• Developer tools and log viewers - display structured log entries or event payloads as collapsible trees for quick scanning
• Config/state viewers - show the current shape of app state or configuration objects inside internal dashboards
• Embedded JSON display in docs or demos - drop working examples of API responses directly into documentation sites with dark-mode support
• Accessible data browsers - any UI that needs to expose nested JSON to keyboard and screen-reader users, thanks to the built-in ARIA treeview semantics

Under The Hood

Architecture The library is a thin two-file core: src/index.tsx exports the public JsonView component, the defaultStyles/darkStyles presets, and the allExpanded/collapseAllNested helpers, while src/DataRenderer.tsx holds the actual recursive rendering logic split into JsonObject, JsonArray, and JsonPrimitiveValue functions that all funnel through a single ExpandableObject implementation for objects and arrays. Expand/collapse state is local useState per node, re-synced via useEffect whenever the shouldExpandNode callback identity changes, and keyboard focus movement is handled by directly querying [role=button] elements under a shared outerRef rather than through React context — a pragmatic choice given the component’s small surface area. DataTypeDetection.ts centralizes all the typeof/instanceof checks (string, number, bigint, date, function, array, object) that the renderer dispatches on.

Tech Stack Written in TypeScript and built with microbundle-crl, producing both a modern ESM bundle (dist/index.modern.js) and a CJS bundle (dist/index.js) with generated .d.ts types. Styling ships as CSS Modules (styles.module.css) compiled alongside the JS. React is a peer dependency (^18.0.0 || ^19.0.0) rather than a bundled dependency, keeping the published package dependency-free. Storybook (with the Vite builder) is used for interactive component documentation and visual review, deployed to GitHub Pages.

Code Quality The test suite is proportionally large relative to the source — DataRenderer.test.tsx, DataTypeDetection.test.ts, and index.test.tsx together substantially exceed the size of the implementation files they cover, using Jest with @testing-library/react and jest-environment-jsdom. ESLint is configured with eslint-config-standard, standard-react, and jsx-a11y plugins, plus Prettier for formatting, and npm test chains unit tests, lint, and a production build as one CI gate. Naming is consistent and the type surface (Props, StyleProps, NodeExpandingEvent, AriaLabels) is explicit and exported for consumers.

What Makes It Unique Most lightweight JSON-view components stop at syntax highlighting; this one commits to full WAI-ARIA treeview semantics — role="tree"/role="treeitem", arrow-key navigation between sibling and nested nodes, and configurable ARIA labels — while still keeping zero runtime dependencies and a tree-shakeable build. The beforeExpandChange veto hook and the re-evaluated shouldExpandNode callback give consumers fine-grained, externally driven control over tree state that most comparable libraries only expose as an initial prop.