react18-json-view

react18-json-view is a React function component for rendering JavaScript objects, arrays, and all JS primitive types as an interactive, collapsible JSON tree. It supports multiple built-in color themes (default, GitHub, VS Code, Atom, and more), dark mode, clipboard copy per node, automatic URL detection with clickable links, and configurable collapsing behavior for long strings, large arrays, and deeply nested objects.

Beyond read-only display, the component supports an editable mode that lets users add, edit, or delete properties directly in the tree, firing onAdd/onEdit/onDelete callbacks so host applications can persist changes. It is commonly used in developer tools, admin panels, and debugging UIs (including observability tools like Langfuse, per its contributor list) wherever raw JSON needs a readable, interactive presentation inside a React app built for React 18.

What You Get

• A single <JsonView src={...} /> component supporting all JS types, not just strict JSON
• Seven built-in color themes (default, a11y, github, vscode, atom, winter-is-coming, vitesse) plus dark mode
• Per-node clipboard copy and automatic URL detection with clickable links
• Configurable collapsing by depth, string length, or array/object size, including a custom collapse function
• Optional editable mode with onAdd/onEdit/onDelete callbacks for in-place JSON editing
• An exported stringify helper for consistent JSON serialization

Common Use Cases

• Debugging panels and admin dashboards that need to inspect API responses or application state
• Observability and LLM-tracing tools displaying request/response payloads (e.g. tracing/logging UIs)
• Developer-facing configuration or settings editors that expose raw JSON for advanced users
• Documentation or API-explorer pages that render example JSON payloads interactively

Under The Hood

Architecture - src/index.tsx exports the top-level JsonView component, which recursively renders src/components/ sub-components per value type (object, array, string, number, boolean, null/undefined), each responsible for its own collapse state, copy button, and URL-detection rendering; src/utils.ts centralizes the stringify helper and shared formatting/type-detection logic, and src/types.ts defines the prop and callback contracts (onAdd/onEdit/onDelete/onCollapse). Theming is implemented via CSS custom properties in style.css/dark.css and per-theme class overrides rather than inline styles, keeping the theme switch a pure CSS concern. Tech Stack - Built with TypeScript and Tailwind/PostCSS tooling (tailwind.config.cjs, postcss.config.js) for the shipped stylesheets, bundled via Rollup (rollup.config.js); the repo is a pnpm/Turborepo workspace (pnpm-workspace.yaml, turbo.json) that also contains a website/ Storybook/docs app alongside the publishable react18-json-view package. Code Quality - src/stories/ provides Storybook stories that double as interaction examples and a lightweight manual-test surface for the many collapse/theme/editable prop combinations; there is no dedicated unit-test suite evident in the published package, so correctness for edge-case JS types leans on the Storybook examples and community usage. API Design - A single <JsonView src={...} /> component with a large, well-documented prop table (collapsing, theming, editing, URL matching) keeps the common case (<JsonView src={data} />) trivial while still exposing deep customization through optional props, and the exported stringify helper reuses the same serialization the component relies on internally.