{JSON.stringify(theme, null, 2)}
      

v2 version allows flexible customization of each "part" by providing small sub-components for customization, including value and type components: , , , , ,

`tsx mdx:preview
import React from 'react';
import JsonView from '@uiw/react-json-view';

const object = {
avatar: 'https://i.imgur.com/MK3eW3As.jpg',
string: 'Lorem ipsum dolor sit amet',
integer: 42,
}

export default function Demo() {
return (
value={object}
keyName="root"
displayObjectSize={false}
style={{
'--w-rjv-background-color': '#ffffff',
}}
>
render={({ children, ...reset }, { type, value, keyName }) => {
const isImg = /^https?.*\.(jpg|png)$/i.test(value)
if (type === 'type' && isImg) {
return
}
if (type === 'value' && isImg) {
return
}
}}
/>
->

)
}
`

Support for the URL(opens in a new tab) API.

`tsx mdx:preview
import React from 'react';
import JsonView from '@uiw/react-json-view';

export default function Demo() {
return (
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: , , , , ,

`tsx mdx:preview
import React, { Fragment } from 'react';
import JsonView, { ValueQuote } from '@uiw/react-json-view';

const Copied = JsonView.Copied;

export default function Demo() {
return (
value={{
url: new URL('https://example.com?t=12'),
urlStr: "https://example.com",
github: "https://example.com",
}}
style={{
'--w-rjv-background-color': '#ffffff',
}}
>
render={({ 'data-copied': copied, style, onClick, ...props }, { value }) => {
const styl = { whiteSpace: 'nowrap' }
if (copied) {
return 复制成功
}
return 复制
}}
/>
render={(props, { type, value }) => {
if (type === 'type' && value instanceof URL) {
return
}
if (type === 'value' && value instanceof URL) {
return (



{value.href}


Open URL

);
}
}}
/>

)
}
`

More in-depth customization (#19)

`tsx mdx:preview
import React from 'react';
import JsonView from '@uiw/react-json-view';

const object = {
_id: "ObjectId('13212hakjdhajksd')",
uid: "test1",
attival_time: new Date('Tue Sep 13 2022 14:07:44 GMT-0500 (Central Daylight Time)'),
__v: 0
}

export default function Demo() {
return (
value={object}
// keyName="root"
displayObjectSize={false}
style={{
'--w-rjv-background-color': '#ffffff',
}}
>
}/>
render={({ children, ...reset }, { type, value, keyName }) => {
if (type === 'type') {
return
}
if (type === 'value' && /ObjectId\('"['"]\)/.test(value)) {
return {children}
}
}}
/>
render={({ children, ...reset }, { type, value, keyName }) => {
if (type === 'type') {
return
}
}}
/>
render={({ children, ...reset }, { type, value, keyName }) => {
if (type === 'type') {
return
}
}}
/>

)
}
`

Inspector

`tsx mdx:preview
import React from 'react';
import JsonView from '@uiw/react-json-view';

const object = [
{
"_id": "56dcf573b09c217d39fd7621",
"name": "Howard Christensen",
"email": "howardchristensen@gmail.com",
"phone": "+1 (830) 529-3176",
"address": "511 Royce Street, Hilltop, Tennessee, 9712"
},
{
"_id": "56dcf57323630b06251e93cd",
"name": "Eleanor Lynn",
"email": "eleanorlynn@gmail.com",
"phone": "+1 (911) 576-2345",
"address": "547 Dearborn Court, Trona, California, 8629"
},
{
"_id": "56dcf5738279cac6b081e512",
"name": "Baxter Mooney",
"email": "baxtermooney@gmail.com",
"phone": "+1 (954) 456-3456",
"address": "349 Cumberland Walk, Washington, Alaska, 3154"
},
{
"_id": "56dcf57303accabd43740957",
"name": "Calhoun Tyson",
"email": "calhountyson@gmail.com",
"phone": "+1 (818) 456-2529",
"address": "367 Lyme Avenue, Ladera, Louisiana, 6292"
},
]

const customTheme = {
'--w-rjv-background-color': '#fff',
'--w-rjv-border-left-width': 0,
'--w-rjv-color': '#881391',
'--w-rjv-type-int-color': '#881391',
'--w-rjv-key-number': '#881391',
'--w-rjv-key-string': '#881391',
};

const Quote = JsonView.Quote;
const BraceLeft = JsonView.BraceLeft;
const BraceRight = JsonView.BraceRight;
const CountInfo = JsonView.CountInfo;
const Ellipsis = JsonView.Ellipsis;
const CountInfoExtra = JsonView.CountInfoExtra;

export default function Demo() {
return (
value={object}
style={customTheme}
enableClipboard={false}
displayDataTypes={false}
>
render={({ 'data-expanded': isExpanded, className, ...props }, { value }) => {
if (Array.isArray(value) && isExpanded) {
console.log('props:',value, isExpanded, props)
return (

{Array.from({ length: value.length }, () => 'Object').join(', ')}

)
}
return ;
}}
/>









render={({ 'data-length': length, ...props }, { value }) => {
const isArray = Array.isArray(value);
if (isArray) return ;
return (
Object
);
}}
/>

);
}
`

Passing as="tagName" will automatically infer the type.

`tsx
as="del"
render={(props, { value, keyName }) => {
if (keyName === 'integer' && typeof value === 'number' && value > 10) {
console.log('value:', value, props)
return {keyName};
}
}}
/>
`

Add a click event on the data row

`tsx mdx:preview
import React from 'react';
import JsonView from '@uiw/react-json-view';

export default function Demo() {
return (
style={{
'--w-rjv-background-color': '#ffffff',
}}
value={{
name: 'John',
age: 30,
hobbies: ['reading', 'coding', 'swimming'],
address: {
street: '123 Main St',
city: 'New York',
country: {
name: 'Main ',
codex: '123'
}
}
}}
>
as="div"
render={(props, { keyName, value, parentValue }) => {
return (
{...props}
onClick={() => {
console.log("keyName", keyName)
console.log("value", value)
console.log("parentValue", parentValue)
}}
/>
)
}}
/>

)
}
`

Highlight Updates

`tsx mdx:preview
import React, { useState, useEffect } from 'react';
import JsonView from '@uiw/react-json-view';

const object = {
string: 'Lorem ipsum dolor sit amet',
integer: 42,
timer: 0,
object: { 'first-child': true, 'second-child': false, 'last-child': null },
}
export default function Demo() {
const [src, setSrc] = useState({ ...object })
useEffect(() => {
const loop = () => {
setSrc(src => ({
...src,
timer: src.timer + 1
}))
}
const id = setInterval(loop, 1000)
return () => clearInterval(id)
}, []);

return (
value={src}
keyName="root"
style={{
'--w-rjv-background-color': '#ffffff',
'--w-rjv-border-left': '1px dashed #ebebeb',
// ✅ Change default update background color ✅
'--w-rjv-update-color': '#ff6ffd',
}}
/>
)
}
`

This feature can be disabled with highlightUpdates={false}, and the default color can be changed with --w-rjv-update-color.

Do not display array index

`tsx mdx:preview
import React, { Fragment } from 'react';
import JsonView from '@uiw/react-json-view';

export default function Demo() {
const value = { data: ["123", 23] }
return (

{
if (Array.isArray(parentValue) && props.children == ":") {
return
}
return
}}/>
render={({ ...props }, { type, parentValue, value, keyName }) => {
if (Array.isArray(parentValue) && Number.isFinite( props.children)) {
return
}
return
}}
/>

)
}
`

Default Collapse/Expand

Determines whether the node should be expanded on the first render. The default value of collapsed is false.
If both collapsed and shouldExpandNodeInitially are set, collapsed takes precedence; shouldExpandNodeInitially only takes effect when collapsed is false.

`tsx mdx:preview
import React, { useState } from 'react';
import JsonView from '@uiw/react-json-view';
const object = {
string: 'Lorem ipsum dolor sit amet',
integer: 42,
float: 114.514,
object: {
'first-child': true,
'second-child': false,
'last-child': null,
},
nestedArray: [
[1, 2],
[3, 4],
],
}
export default function Demo() {
const [collapsed, setCollapsed] = useState(false)
return (
<>
setCollapsed(e.target.checked)} />
collapsed={collapsed == true ? "false" : "2"}
value={object}
collapsed={collapsed == true ? false : 2}
shouldExpandNodeInitially={(isExpanded, { value, keys, level }) => {
if (keys.length > 0 && keys[0] == "object") {
return false
}
return isExpanded
}}
style={{
'--w-rjv-background-color': '#ffffff',
}}
>


)
}
`

Modify Icon Style

Use built-in default icons.

`tsx mdx:preview
import React from 'react';
import JsonView from '@uiw/react-json-view';
import { TriangleArrow } from '@uiw/react-json-view/triangle-arrow';
import { TriangleSolidArrow } from '@uiw/react-json-view/triangle-solid-arrow';

const object = {
string: 'Lorem ipsum dolor sit amet',
integer: 42,
float: 114.514,
object: {
'first-child': true,
'second-child': false,
'last-child': null,
},
nestedArray: [
[1, 2],
[3, 4],
],
}
export default function Demo() {
return (
value={object}
keyName="root"
style={{
'--w-rjv-background-color': '#ffffff',
'--w-rjv-border-left': '1px dashed #ebebeb',
}}
>




)
}
`

Display of custom svg icon components

`tsx mdx:preview
import React from 'react';
import JsonView from '@uiw/react-json-view';
import { TriangleArrow } from '@uiw/react-json-view/triangle-arrow';
import { TriangleSolidArrow } from '@uiw/react-json-view/triangle-solid-arrow';

const object = {
string: 'Lorem ipsum dolor sit amet',
integer: 42,
float: 114.514,
object: {
'first-child': true,
'second-child': false,
'last-child': null,
},
nestedArray: [
[1, 2],
[3, 4],
],
}
export default function Demo() {
return (
value={object}
keyName="root"
style={{
'--w-rjv-background-color': '#ffffff',
'--w-rjv-border-left': '1px dashed #ebebeb',
}}
>
render={({ 'data-expanded': isExpanded, ...props }) => {
const svgProps = {
style: {
cursor: 'pointer', height: '1em', width: '1em', marginRight: 5, userSelect: 'none'
},
fill: "var(--w-rjv-arrow-color, currentColor)"
}
if (!isExpanded) {
return (



);
}
return (



);
}}
/>

);
}
`

Props

Migrate from JSON View v1 to v2. The new v2 version has removed the ~~quotes~~ and ~~components~~ props.

`diff
export interface JsonViewProps extends React.DetailedHTMLProps, HTMLDivElement> {
- quotes?: "'" | '"' | '';
- components?: {};
}
`

`ts
export interface JsonViewProps extends React.DetailedHTMLProps, HTMLDivElement> {
/* This property contains your input JSON /
value?: T;
/* Define the root node name. @default undefined /
keyName?: string | number;
/* Whether sort keys through String.prototype.localeCompare() @default false /
objectSortKeys?: boolean | ((keyA: string, keyB: string, valueA: T, valueB: T) => number);
/* Set the indent-width for nested objects @default 15 /
indentWidth?: number;
/* When set to true, objects and arrays are labeled with size @default true /
displayObjectSize?: boolean;
/* When set to true, data type labels prefix values @default true /
displayDataTypes?: boolean;
/* The user can copy objects and arrays to clipboard by clicking on the clipboard icon. @default true /
enableClipboard?: boolean;
/* When set to true, all nodes will be collapsed by default. Use an integer value to collapse at a particular depth. @default false /
collapsed?: boolean | number;
/* Determine whether the node should be expanded on the first render, or you can use collapsed to control the level of expansion (by default, the root is expanded). /
shouldExpandNodeInitially?: ShouldExpandNodeInitially;
/* Whether to highlight updates. @default true /
highlightUpdates?: boolean;
/* Shorten long JSON strings, Set to 0 to disable this feature @default 30 /
shortenTextAfterLength?: number;
/* When the text exceeds the length, ... will be displayed. Currently, this ... can be customized. @default "..." /
stringEllipsis?: number;
/* Callback function for when a treeNode is expanded or collapsed /
onExpand?: (props: { expand: boolean; value?: T; keyid: string; keyName?: string | number }) => void;
/* Fires event when you copy /
onCopied?: (text: string, value?: T) => void;
}
export type ShouldExpandNodeInitially = (isExpanded: boolean, props: {
keyName?: string | number;
value?: T;
parentValue?: T;
keys: (number | string)[];
level: number;
}) => boolean;
`

`ts
import { BraceLeft } from './symbol/BraceLeft';
import { BraceRight } from './symbol/BraceRight';
import { BracketsLeft } from './symbol/BracketsLeft';
import { BracketsRight } from './symbol/BracketsRight';
import { Arrow } from './symbol/Arrow';
import { Colon } from './symbol/Colon';
import { Quote } from './symbol/Quote';
import { ValueQuote } from './symbol/ValueQuote';

import { Bigint } from './types/Bigint';
import { Date } from './types/Date';
import { False } from './types/False';
import { Float } from './types/Float';
import { Int } from './types/Int';
import { Map } from './types/Map';
import { Nan } from './types/Nan';
import { Null } from './types/Null';
import { Set } from './types/Set';
import { StringText } from './types/String';
import { True } from './types/True';
import { Undefined } from './types/Undefined';
import { Url } from './types/Url';

import { Copied } from './section/Copied';
import { CountInfo } from './section/CountInfo';
import { CountInfoExtra } from './section/CountInfoExtra';
import { Ellipsis } from './section/Ellipsis';
import { KeyName } from './section/KeyName';
import { Row } from './section/Row';

type JsonViewComponent = React.FC>> & {
BraceLeft: typeof BraceLeft;
BraceRight: typeof BraceRight;
BracketsLeft: typeof BracketsLeft;
BracketsRight: typeof BracketsRight;
Arrow: typeof Arrow;
Colon: typeof Colon;
Quote: typeof Quote;
ValueQuote: typeof ValueQuote;

Bigint: typeof Bigint;
Date: typeof Date;
False: typeof False;
Float: typeof Float;
Int: typeof Int;
Map: typeof Map;
Nan: typeof Nan;
Null: typeof Null;
Set: typeof Set;
String: typeof StringText;
True: typeof True;
Undefined: typeof Undefined;
Url: typeof Url;

Copied: typeof Copied;
CountInfo: typeof CountInfo;
CountInfoExtra: typeof CountInfoExtra;
Ellipsis: typeof Ellipsis;
KeyName: typeof KeyName;
Row: typeof Row;
};
declare const JsonView: JsonViewComponent;
export default JsonView;
`

Size and dependencies

Here is the size benchmark (using bundlephobia.com) against similar React libraries (found by npmjs.com/search):

| Library | Bundle size (gzip) | Deps | Last commit | Download | Editable | Demo |
| ------- | ------- | ------- | ------- | ------- | ------- | ------- |
| @uiw/react-json-view | ![](https://bundlephobia.com/result?p=@uiw/react-json-view) ![](https://bundlephobia.com/result?p=@uiw/react-json-view) | ![](https://bundlephobia.com/result?p=@uiw/react-json-view) | ![GitHub last commit](https://github.com/uiwjs/react-json-view/commits) | ![NPM Downloads](https://www.npmjs.com/package/@uiw/react-json-view) | ✅ | demo |
| react-json-view-lite | ![](https://bundlephobia.com/result?p=react-json-view-lite) ![](https://bundlephobia.com/result?p=react-json-view-lite) | ![](https://bundlephobia.com/result?p=react-json-view-lite) | ![GitHub last commit](https://github.com/AnyRoad/react-json-view-lite/commits) | ![NPM Downloads](https://www.npmjs.com/package/react-json-view-lite) | ❌ | demo |
| react-json-pretty | ![](https://bundlephobia.com/result?p=react-json-pretty) ![](https://bundlephobia.com/result?p=react-json-pretty) | ![](https://bundlephobia.com/result?p=react-json-pretty) | ![GitHub last commit](https://github.com/chenckang/react-json-pretty/commits) | ![NPM Downloads](https://www.npmjs.com/package/react-json-pretty) | ❌ | - |
| ~~react-json-inspector~~ | ![](https://bundlephobia.com/result?p=react-json-inspector) ![](https://bundlephobia.com/result?p=react-json-inspector) | ![](https://bundlephobia.com/result?p=react-json-inspector) | ![GitHub last commit](https://github.com/Lapple/react-json-inspector/commits) | ![NPM Downloads](https://www.npmjs.com/package/react-json-inspector) | ❌ | demo
| react-json-tree | ![](https://bundlephobia.com/result?p=react-json-tree) ![](https://bundlephobia.com/result?p=react-json-tree) | ![](https://bundlephobia.com/result?p=react-json-tree) | ![GitHub last commit](https://github.com/reduxjs/redux-devtools/commits) | ![NPM Downloads](https://www.npmjs.com/package/react-json-tree) | ❌ |
| ~~react-json-view~~ | ![](https://bundlephobia.com/result?p=react-json-view) ![](https://bundlephobia.com/result?p=react-json-view) | ![](https://bundlephobia.com/result?p=react-json-view) | ![GitHub last commit](https://github.com/mac-s-g/react-json-view/commits) | ![NPM Downloads](https://www.npmjs.com/package/react-json-view) | ✅ | demo |
| react-inspector | ![](https://bundlephobia.com/result?p=react-inspector) ![](https://bundlephobia.com/result?p=react-inspector) | ![](https://bundlephobia.com/result?p=react-inspector) | ![GitHub last commit](https://github.com/storybookjs/react-inspector/commits) | ![NPM Downloads](https://www.npmjs.com/package/react-inspector) | ❌ | demo |
| react-domify | ![](https://bundlephobia.com/result?p=react-domify) ![](https://bundlephobia.com/result?p=react-domify) | ![](https://bundlephobia.com/result?p=react-domify) | ![GitHub last commit](https://github.com/JedWatson/react-domify/commits) | ![NPM Downloads](https://www.npmjs.com/package/react-domify) | ❌ | demo |
| react18-json-view | ![](https://bundlephobia.com/result?p=react18-json-view) ![](https://bundlephobia.com/result?p=react18-json-view) | ![](https://bundlephobia.com/result?p=react18-json-view) | ![GitHub last commit](https://github.com/YYsuni/react18-json-view/commits) | ![NPM Downloads](https://www.npmjs.com/package/react18-json-view) | ❌ | demo |
| @textea/json-viewer | ![](https://bundlephobia.com/result?p=@textea/json-viewer) ![](https://bundlephobia.com/result?p=@textea/json-viewer) | ![](https://bundlephobia.com/result?p=@textea/json-viewer) | ![GitHub last commit](https://github.com/TexteaInc/json-viewer/commits) | ![NPM Downloads](https://www.npmjs.com/package/@textea/json-viewer) | ✅ | demo |
| react-editable-json-tree | ![](https://bundlephobia.com/result?p=react-editable-json-tree) ![](https://bundlephobia.com/result?p=react-editable-json-tree) | ![](https://bundlephobia.com/result?p=react-editable-json-tree) | ![GitHub last commit](https://github.com/oxyno-zeta/react-editable-json-tree/commits) | ![NPM Downloads](https://www.npmjs.com/package/react-editable-json-tree) | ✅ | demo |
| react-json-view | ![](https://bundlephobia.com/result?p=@huolala-tech/react-json-view) ![](https://bundlephobia.com/result?p=@huolala-tech/react-json-view) | ![](https://bundlephobia.com/result?p=@huolala-tech/react-json-view) | ![GitHub last commit](https://github.com/HuolalaTech/react-json-view/commits) | ![NPM Downloads](https://www.npmjs.com/package/@huolala-tech/react-json-view) | ❌ | demo |

Development

Runs the project in development mode.

`bash


Step 1, run first, listen to the component compile and output the .js file

`bash
npm run build
``

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

Contributors

As always, thanks to our amazing contributors!

Made with contributors.

License

Licensed under the MIT License.