react-json-view

@uiw/react-json-view is a React component for rendering and editing JavaScript objects and arrays as an interactive, collapsible tree. Rewritten from the ground up for v2, it ships with zero runtime dependencies, full TypeScript typings, and native support for JavaScript-specific value types — BigInt, Map, Set, NaN, Date, and URL — that plain JSON.stringify can’t represent.

Nine built-in themes (light, dark, nord, GitHub light/dark, gruvbox, VS Code, monokai, and basic) are each exposed as individually importable subpath exports, so bundlers only pull in the themes actually used. Every color is a CSS custom property, making it straightforward to build a custom theme or wire up a live theme editor. A separate /editor entry point adds inline value editing on top of the base read-only viewer.

What You Get

• Collapsible tree view for JSON/JS values with expand-all, collapse-all, and per-node toggling
• Nine built-in themes (light, dark, nord, GitHub, gruvbox, VS Code, monokai, basic) as tree-shakeable subpath imports
• First-class rendering for JS-only types — BigInt, Map, Set, NaN, Date, and URL — not just plain JSON
• An optional /editor entry point for inline, in-place value editing
• Copy-to-clipboard support with a customizable beforeCopy hook
• CSS custom-property theming for building fully custom color schemes

Common Use Cases

• Rendering API responses or request payloads in an internal admin/debug panel
• Building a JSON/config editor UI where users need to inspect and tweak nested values in place
• Displaying structured log entries or event payloads in a developer-facing dashboard
• Adding a “view raw data” toggle to a data table or CMS record inspector

Under The Hood

Architecture The root JsonView component (core/src/index.tsx) wraps its tree in a Provider (core/src/store.tsx) that composes five independent context/reducer pairs — ShowTools, Expands, Types, Symbols, and Section — rather than one monolithic store, so each concern’s state updates in isolation. Rendering is delegated to Container.tsx, which recurses over the value tree; each JS type (Bigint, Date, False, Float, Int, Map, Nan, Null, Set, String, True, Undefined, Url) has its own dedicated renderer file under types/, and row chrome (key name, count info, ellipsis, copy button) is similarly split into single-purpose files under section/. Punctuation (braces, brackets, colon, quotes, arrows) is rendered by its own components under symbol/. This one-concept-per-file layout keeps the type-dispatch and row-rendering logic decoupled from state management, and a separate editor/ tree layers add/edit/delete interactions on top of the same base primitives rather than forking the renderer.

Tech Stack TypeScript throughout, built with tsbb inside a Lerna-managed npm workspace (core, example, www), targeting React >=18 and @babel/runtime as peer dependencies. The package itself declares no runtime dependencies — only dev/test tooling (@testing-library/react, react-test-renderer, jsdom test env) and workspace tooling (husky, lint-staged, prettier, renovate). The www workspace is a static documentation site built and deployed to GitHub Pages via GitHub Actions, which also runs type-checking, coverage, and npm publish --provenance on every push to main.

Code Quality Test coverage is broad relative to the component count — most types/, section/, arrow/, and root-level files (Container, index) have a co-located .test.tsx using @testing-library/react under a jsdom environment, and CI generates and publishes lcov coverage badges on every build. Types are expressed as generics over the value shape (JsonViewProps<T extends object>), giving accurate prop inference for value, onExpand, and related callbacks. There’s no dedicated ESLint config in the repo — code style is enforced via Prettier plus a husky/lint-staged pre-commit hook rather than a full lint pass, and there’s no CONTRIBUTING guide for external contributors.

What Makes It Unique The library is a full API-redesigned rewrite of the older, now-effectively-legacy react-json-view package, distinguishing itself in a fairly saturated JSON-viewer space chiefly through its zero-runtime-dependency footprint (many comparable libraries pull in icon or utility dependencies) and its CSS-custom-property theming model, which lets all nine bundled themes — and any custom theme — be swapped without a JS re-render. Native handling of BigInt, Map, Set, and URL as distinct renderable types, rather than falling back to a generic [object Object] string, is a genuinely useful detail for a library aimed at displaying real JavaScript values rather than strictly parsed JSON.