January 20, 2026 - import React from 'react'; import JsonView from '@uiw/react-json-view'; export default function Demo() { return ( <JsonView value={{ url: new URL('https://example.com?t=12'), urlStr: "https://example.com", github: "https://example.com", }} style={{ '--w-rjv-background-color': '#ffffff', }} /> ) } Supports certain partial customizations such as: <Copied />, <CountInfo />, <CountInfoExtra />, <Ellipsis />, <KeyName />, <Row /> import React, { Fragment } from 'react'; import JsonView, { ValueQuote } from '@uiw/react-json-view'; const Copied = JsonView.Copied; export default function Demo() { retu

A React component for displaying and editing javascript arrays and JSON objects.

A React component for displaying and editing javascript arrays and JSON objects. - uiwjs/react-json-view

A React component for displaying and editing javascript arrays and JSON objects. - uiwjs/react-json-view

Use this online @uiw/react-json-view playground to view and fork @uiw/react-json-view example apps and templates on CodeSandbox.

JSON viewer for react.

Find the size of javascript package @uiw/react-json-view. Bundlephobia helps you find the performance impact of npm packages.

We cannot provide a description for this page right now

September 6, 2025 - react-json-view-lite is a tiny component for React allowing to render JSON as a tree. It focused on the balance between performance for large JSON inputs and functionality. It might not have all the rich features (suce as customization, copy, ...

March 9, 2021 - RJV is a React component for displaying and editing javascript arrays and JSON objects.

August 16, 2020 - react-json-view by rhgrieve using @fortawesome/fontawesome-svg-core, @fortawesome/free-regular-svg-icons, @fortawesome/free-solid-svg-icons, @fortawesome/react-fontawesome, aphrodite, clipboard, prism-react-renderer, react, react-alert

JSON viewer for react. Latest: 2.0.0-alpha.39. No known vulnerabilities.

React json view plugin, supports expansion and hiding.

render() { // eslint-disable-next-line no-undef const ReactJson = require('react-json-view').default const { src } = this.props const StyledReactJsonContainer = styled.div` .string-value { text-overflow: ellipsis; max-width: 800px; overflow: hidden; display: inline-block; } ` return ( )

Next generation frontend tooling. It's fast

import React from 'react'; import JsonView from '@uiw/react-json-view'; export default function Demo() { return ( <JsonView value={{ url: new URL('https://example.com?t=12'), urlStr: "https://example.com", github: "https://example.com", }} style={{ '--w-rjv-background-color': '#ffffff', }} /> ) } import React from 'react'; import JsonView from '@uiw/react-json-view'; function value({ type, children, visible, keyName, parentValue, value, setValue, ...props }) { if (value instanceof URL) { return ( <span {...props}> <a href={value.href} target="_blank" rel="noopener noreferrer"> {children} </a>