react-json-view is a widely used React component for displaying and editing JSON, but the original package (mac-s-g/react-json-view) is no longer maintained, and that is the single most important security fact about it. The last release, 1.21.3, has sat untouched on npm for well over a year while the package still pulls more than a million downloads a week. That gap between usage and upkeep is where risk accumulates.
This guide covers what the component does, the real risks of shipping an abandoned dependency, the XSS considerations when you render untrusted JSON, and the maintained fork you should move to.
What react-json-view Does
The package renders a JSON object as an interactive, collapsible tree. You pass it a value and it gives you syntax highlighting, expand and collapse controls, and optional inline editing. It is the kind of thing you reach for when building an admin panel, a debugging view, or a config editor.
import ReactJson from "react-json-view";
function DebugPanel({ payload }) {
return <ReactJson src={payload} collapsed={2} enableClipboard />;
}
The API is pleasant, which is why so many teams adopted it. The problem is that the component sits in the render path for data you may not fully control, and it has stopped receiving updates.
The Maintenance Problem
When people search "is react json view safe," the honest answer starts with maintenance status, not a CVE list. The original repository has not shipped a release in a long time, and the maintainer has publicly pointed users toward a fork. An unmaintained UI dependency carries a specific kind of risk: when a vulnerability is found in it or in one of its own dependencies, nobody is going to publish a patch. You inherit the fix work yourself, or you carry the exposure.
react-json-view also depends on a chain of older support libraries. Even if the component's own code is fine today, its transitive dependencies age, and a stale tree is exactly the situation where npm audit starts lighting up with advisories you cannot resolve by upgrading the top-level package.
npm ls react-json-view
npm audit
Run those in a project that uses it and you will often find the deprecation notice plus a handful of nested advisories.
XSS and Untrusted JSON
The component is designed to render data, and the security question that follows is: what happens when that data comes from an attacker? A JSON tree viewer that faithfully displays strings is generally safe against script injection, because React escapes text content by default. The risk appears at the edges: custom value renderers, features that interpret string content, or any wrapper you build that takes a value out of the escaped path and injects it as HTML.
The rule holds regardless of the library. If you display JSON that originated from user input, an external API, or a webhook, treat every string field as hostile. Do not pass those values into dangerouslySetInnerHTML, do not feed URLs from the payload into href or src without validating the scheme, and do not assume the shape of the object. For a broader treatment of that class of bug, our write-up on preventing XSS in React applications walks through the escaping model in detail.
The Maintained Fork
The practical fix is to switch to the actively maintained fork published as @microlink/react-json-view. It keeps the same component API, so the migration is usually a change to your import and your dependency entry rather than a rewrite.
npm uninstall react-json-view
npm install @microlink/react-json-view
// before
import ReactJson from "react-json-view";
// after
import ReactJson from "@microlink/react-json-view";
Confirm the current version and its own dependency health on the npm page for the fork before you commit, since fork health can change over time too. If you want to reduce your surface further, lighter-weight viewers such as react-json-view-lite exist with far smaller dependency trees, at the cost of some editing features.
Auditing Your Tree for the Old Package
Because react-json-view is frequently pulled in indirectly by admin scaffolding and internal tooling, you may be shipping it without a direct dependency entry. Check the full tree, not just your package.json.
npm ls react-json-view --all
If it shows up under a build tool or a component kit you installed, you cannot just swap the import. In that case, an SCA tool such as Safeguard can flag the transitive copy and its stale sub-dependencies across the whole tree, which is the part manual review tends to miss. Our software composition analysis product explains how that resolution works inside a CI gate.
Practical Checklist
Keep the decision simple. If you are starting fresh, install the maintained fork. If you already ship the original, plan the swap and audit for transitive copies. Whatever viewer you land on, never trust the JSON you render, validate any URLs it contains, and keep the dependency tree current so advisories stay resolvable.
The reason to act is not a single dramatic exploit. It is that shipping an abandoned component in your render path means the next advisory in its dependency chain has no upstream fix waiting for you.
FAQ
Is react-json-view still maintained?
The original mac-s-g/react-json-view is effectively unmaintained; its last npm release has gone a long time without an update. The maintainer has recommended moving to the @microlink/react-json-view fork, which is actively maintained.
Does react json view have known vulnerabilities?
The component itself has no widely cited direct CVE, but because it is unmaintained and depends on older libraries, its transitive dependencies can accumulate advisories that will not be patched upstream. Scan the full tree rather than trusting the top-level package.
What should I use instead of react-json-view?
The drop-in choice is @microlink/react-json-view, which keeps the same API. If you want a smaller footprint, react-json-view-lite is a lighter alternative that trades some editing features for a slimmer dependency tree.
Is it safe to render untrusted JSON with react-json-view?
Rendering plain text values is generally safe because React escapes them. The danger is custom renderers or wrappers that inject payload strings as HTML or use payload URLs directly. Validate and escape any attacker-controlled fields regardless of the viewer.