Gathering detailed insights and metrics for @uiw/react-json-view
Gathering detailed insights and metrics for @uiw/react-json-view
Gathering detailed insights and metrics for @uiw/react-json-view
Gathering detailed insights and metrics for @uiw/react-json-view
A React component for displaying and editing javascript arrays and JSON objects.
npm install @uiw/react-json-view
Typescript
Module System
Node Version
NPM Version
94.9
Supply Chain
94.4
Quality
83.2
Maintenance
100
Vulnerability
100
License
v2.0.0-alpha.32
Updated on May 01, 2025
v2.0.0-alpha.31
Updated on Apr 30, 2025
v2.0.0-alpha.30
Updated on Oct 23, 2024
v2.0.0-alpha.29
Updated on Oct 16, 2024
v2.0.0-alpha.28
Updated on Oct 16, 2024
v2.0.0-alpha.27
Updated on Sep 03, 2024
TypeScript (97.91%)
HTML (2.09%)
Total Downloads
3,669,414
Last Day
5,133
Last Week
100,611
Last Month
407,807
Last Year
2,984,128
MIT License
308 Stars
212 Commits
16 Forks
4 Watchers
9 Branches
9 Contributors
Updated on Jul 07, 2025
Minified
Minified + Gzipped
Latest Version
2.0.0-alpha.32
Package Id
@uiw/react-json-view@2.0.0-alpha.32
Unpacked Size
319.99 kB
Size
45.66 kB
File Count
250
NPM Version
10.8.2
Node Version
20.19.1
Published on
May 01, 2025
Cumulative downloads
Total Downloads
Last Day
24.5%
5,133
Compared to previous day
Last Week
8.3%
100,611
Compared to previous week
Last Month
9.1%
407,807
Compared to previous month
Last Year
335.5%
2,984,128
Compared to previous year
3
A React component for displaying and editing javascript arrays and JSON objects. Preview of v1 documentation is available here.
🚀 Improved with TypeScript – Better code hints for a smoother development experience.
🎨 Customizable Themes – Supports theme customization & online editing
.
🌒 Dark/Light Mode – Seamless switching between themes.
📦 Zero Dependencies – Lightweight and efficient.
📋 Clipboard Support – Easily copy JSON data.
✏️ Editable & Extendable – Supports editing and adding new properties.
♻️ Update Highlighting – Option to highlight changes.
The latest version v2 features a redesigned API for better maintainability, a more flexible component customization system, and fully customizable rendering, making it more aligned with React’s component model. 📖 Check out the v2 documentation and examples.
1npm install @uiw/react-json-view
1import JsonView from '@uiw/react-json-view'; 2import JsonViewEditor from '@uiw/react-json-view/editor'; 3import { lightTheme } from '@uiw/react-json-view/light'; 4import { darkTheme } from '@uiw/react-json-view/dark'; 5import { TriangleArrow } from '@uiw/react-json-view/triangle-arrow'; 6import { TriangleSolidArrow } from '@uiw/react-json-view/triangle-solid-arrow';
1import JsonView from '@uiw/react-json-view'; 2 3const avatar = 'https://i.imgur.com/MK3eW3As.jpg'; 4const longArray = new Array(1000).fill(1); 5const example = { 6 avatar, 7 string: 'Lorem ipsum dolor sit amet', 8 integer: 42, 9 float: 114.514, 10 bigint: 10086n, 11 null: null, 12 undefined, 13 timer: 0, 14 date: new Date('Tue Sep 13 2022 14:07:44 GMT-0500 (Central Daylight Time)'), 15 array: [19, 100.86, 'test', NaN, Infinity], 16 nestedArray: [ 17 [1, 2], 18 [3, 4], 19 ], 20 object: { 21 'first-child': true, 22 'second-child': false, 23 'last-child': null, 24 }, 25 longArray, 26 string_number: '1234', 27}; 28 29<JsonView value={example} />
By default, the lightTheme
light theme is used, and a darkTheme
dark theme configuration is built in
1import React from 'react'; 2import JsonView from '@uiw/react-json-view'; 3import { lightTheme } from '@uiw/react-json-view/light'; 4import { darkTheme } from '@uiw/react-json-view/dark'; 5import { nordTheme } from '@uiw/react-json-view/nord'; 6import { githubLightTheme } from '@uiw/react-json-view/githubLight'; 7import { githubDarkTheme } from '@uiw/react-json-view/githubDark'; 8import { vscodeTheme } from '@uiw/react-json-view/vscode'; 9import { gruvboxTheme } from '@uiw/react-json-view/gruvbox'; 10import { monokaiTheme } from '@uiw/react-json-view/monokai'; 11import { basicTheme } from '@uiw/react-json-view/basic'; 12 13const object = { 14 string: 'Lorem ipsum dolor sit amet', 15 integer: 42, 16 float: 114.514, 17 boolean: true, 18 null: null, 19 nan: NaN, 20 url: new URL('https://example.com'), 21} 22 23const style = { display: 'grid', gap: '1rem', gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))' }; 24 25export default function Demo() { 26 return ( 27 <div style={style}> 28 <JsonView value={object} style={darkTheme} /> 29 <JsonView value={object} style={lightTheme} /> 30 <JsonView value={object} style={nordTheme} /> 31 <JsonView value={object} style={githubLightTheme} /> 32 <JsonView value={object} style={githubDarkTheme} /> 33 <JsonView value={object} style={gruvboxTheme} /> 34 <JsonView value={object} style={vscodeTheme} /> 35 <JsonView value={object} style={monokaiTheme} /> 36 <JsonView value={object} style={basicTheme} /> 37 </div> 38 ); 39}
Example of custom vscode
theme styles:
1import React from 'react'; 2import JsonView from '@uiw/react-json-view'; 3 4const object = { 5 string: 'Lorem ipsum dolor sit amet', 6 integer: 42, 7 float: 114.514, 8 object: { 9 'first-child': true, 10 'second-child': false, 11 'last-child': null, 12 }, 13} 14const customTheme = { 15 '--w-rjv-font-family': 'monospace', 16 '--w-rjv-color': '#9cdcfe', 17 '--w-rjv-key-number': '#268bd2', 18 '--w-rjv-key-string': '#9cdcfe', 19 '--w-rjv-background-color': '#1e1e1e', 20 '--w-rjv-line-color': '#36334280', 21 '--w-rjv-arrow-color': '#838383', 22 '--w-rjv-edit-color': 'var(--w-rjv-color)', 23 '--w-rjv-info-color': '#9c9c9c7a', 24 '--w-rjv-update-color': '#9cdcfe', 25 '--w-rjv-copied-color': '#9cdcfe', 26 '--w-rjv-copied-success-color': '#28a745', 27 28 '--w-rjv-curlybraces-color': '#d4d4d4', 29 '--w-rjv-colon-color': '#d4d4d4', 30 '--w-rjv-brackets-color': '#d4d4d4', 31 '--w-rjv-ellipsis-color': '#cb4b16', 32 '--w-rjv-quotes-color': 'var(--w-rjv-key-string)', 33 '--w-rjv-quotes-string-color': 'var(--w-rjv-type-string-color)', 34 35 '--w-rjv-type-string-color': '#ce9178', 36 '--w-rjv-type-int-color': '#b5cea8', 37 '--w-rjv-type-float-color': '#b5cea8', 38 '--w-rjv-type-bigint-color': '#b5cea8', 39 '--w-rjv-type-boolean-color': '#569cd6', 40 '--w-rjv-type-date-color': '#b5cea8', 41 '--w-rjv-type-url-color': '#3b89cf', 42 '--w-rjv-type-null-color': '#569cd6', 43 '--w-rjv-type-nan-color': '#859900', 44 '--w-rjv-type-undefined-color': '#569cd6', 45}; 46 47export default function Demo() { 48 return ( 49 <JsonView value={object} keyName="root" style={customTheme} /> 50 ) 51}
Online custom style example, please check in the documentation website
1import React, { useState, useEffect } from 'react'; 2import Colorful from '@uiw/react-color-colorful'; 3import JsonView from '@uiw/react-json-view'; 4 5const object = { 6 avatar: 'https://i.imgur.com/MK3eW3As.jpg', 7 string: 'Lorem ipsum dolor sit amet', 8 integer: 42, 9 float: 114.514, 10 bigint: 10086n, 11 null: null, 12 undefined, 13 timer: 0, 14 nan: NaN, 15 url: new URL('https://example.com'), 16 date: new Date('Tue Sep 13 2022 14:07:44 GMT-0500 (Central Daylight Time)'), 17 array: [19, 100.86, 'test', NaN, Infinity], 18 nestedArray: [ 19 [1, 2], 20 [3, 4], 21 ], 22 object: { 23 'first-child': true, 24 'second-child': false, 25 'last-child': null, 26 }, 27 string_number: '1234', 28} 29const customTheme = { 30 '--w-rjv-color': '#9cdcfe', 31 '--w-rjv-key-number': '#268bd2', 32 '--w-rjv-key-string': '#9cdcfe', 33 '--w-rjv-background-color': '#1e1e1e', 34 '--w-rjv-line-color': '#36334280', 35 '--w-rjv-arrow-color': '#838383', 36 '--w-rjv-edit-color': '#9cdcfe', 37 '--w-rjv-info-color': '#9c9c9c7a', 38 '--w-rjv-update-color': '#9cdcfe', 39 '--w-rjv-copied-color': '#9cdcfe', 40 '--w-rjv-copied-success-color': '#28a745', 41 42 '--w-rjv-curlybraces-color': '#d4d4d4', 43 '--w-rjv-colon-color': '#d4d4d4', 44 '--w-rjv-brackets-color': '#d4d4d4', 45 '--w-rjv-ellipsis-color': '#cb4b16', 46 '--w-rjv-quotes-color': '#9cdcfe', 47 '--w-rjv-quotes-string-color': '#ce9178', 48 49 '--w-rjv-type-string-color': '#ce9178', 50 '--w-rjv-type-int-color': '#b5cea8', 51 '--w-rjv-type-float-color': '#b5cea8', 52 '--w-rjv-type-bigint-color': '#b5cea8', 53 '--w-rjv-type-boolean-color': '#569cd6', 54 '--w-rjv-type-date-color': '#b5cea8', 55 '--w-rjv-type-url-color': '#3b89cf', 56 '--w-rjv-type-null-color': '#569cd6', 57 '--w-rjv-type-nan-color': '#859900', 58 '--w-rjv-type-undefined-color': '#569cd6', 59}; 60 61export default function Demo() { 62 const [cssvar, setCssvar] = useState('--w-rjv-background-color'); 63 const [hex, setHex] = useState("#1e1e1e"); 64 const [editable, setEditable] = useState(false); 65 const [theme, setTheme] = useState(customTheme); 66 const onChange = ({ hexa }) => { 67 setHex(hexa); 68 setTheme({ ...theme, [cssvar]: hexa }); 69 }; 70 71 const [src, setSrc] = useState({ ...object }) 72 useEffect(() => { 73 const loop = () => { 74 setSrc(src => ({ 75 ...src, 76 timer: src.timer + 1 77 })) 78 } 79 const id = setInterval(loop, 1000) 80 return () => clearInterval(id) 81 }, []); 82 83 const changeEditable = (evn) => setEditable(evn.target.checked); 84 return ( 85 <React.Fragment> 86 <div style={{ display: 'flex', gap: '1rem', alignItems: 'flex-start' }}> 87 <JsonView 88 // editable={editable} 89 value={src} 90 keyName="root" 91 style={{ flex: 1, overflow: 'auto', ...theme }} 92 /> 93 <div> 94 <Colorful color={hex} onChange={onChange} /> 95 <div style={{ display: 'flex', gap: '0.4rem', flexDirection: 'column', ...customTheme }}> 96 {Object.keys(customTheme).map((varname, idx) => { 97 const click = () => { 98 setCssvar(varname); 99 setHex(customTheme[varname]); 100 }; 101 const active = cssvar === varname ? '#a8a8a8' : ''; 102 return ( 103 <button key={idx} 104 style={{ background: active, border: 0,boxShadow: 'inset 0px 0px 1px #000', display: 'flex', alignItems: 'center', gap: 5, padding: '1px 3px' }} 105 onClick={click} 106 > 107 <span style={{ display: 'inline-block', width: 12, height: 12, background: `var(${varname})` }}></span> 108 {varname} 109 </button> 110 ) 111 })} 112 </div> 113 </div> 114 </div> 115 <div> 116 Copy the theme configuration below into your project. 117 </div> 118 <pre style={{ padding: 10 }}> 119 {JSON.stringify(theme, null, 2)} 120 </pre> 121 </React.Fragment> 122 ); 123}
v2
version allows flexible customization of each "part" by providing small sub-components for customization, including value and type components: <Bigint />
, <Date />
, <False />
, <Float />
, <Int />
, <Map />
, <Nan />
, <Null />
, <Set />
, <String />
, <True />
, <Undefined />
, <Url />
, and symbol components: <ValueQuote />
, <Arrow />
, <Colon />
, <Quote />
, <BraceLeft />
, <BraceRight />
, <BracketsLeft />
, <BracketsRight />
.
1import React from 'react'; 2import JsonView from '@uiw/react-json-view'; 3 4const object = { 5 avatar: 'https://i.imgur.com/MK3eW3As.jpg', 6 string: 'Lorem ipsum dolor sit amet', 7 integer: 42, 8} 9 10export default function Demo() { 11 return ( 12 <JsonView 13 value={object} 14 keyName="root" 15 displayObjectSize={false} 16 style={{ 17 '--w-rjv-background-color': '#ffffff', 18 }} 19 > 20 <JsonView.String 21 render={({ children, ...reset }, { type, value, keyName }) => { 22 const isImg = /^https?.*\.(jpg|png)$/i.test(value) 23 if (type === 'type' && isImg) { 24 return <span /> 25 } 26 if (type === 'value' && isImg) { 27 return <img {...reset} height="26" src={value} /> 28 } 29 }} 30 /> 31 <JsonView.Colon> -> </JsonView.Colon> 32 </JsonView> 33 ) 34}
Support for the URL(opens in a new tab) API.
1import React from 'react'; 2import JsonView from '@uiw/react-json-view'; 3 4export default function Demo() { 5 return ( 6 <JsonView 7 value={{ 8 url: new URL('https://example.com?t=12'), 9 urlStr: "https://example.com", 10 github: "https://example.com", 11 }} 12 style={{ 13 '--w-rjv-background-color': '#ffffff', 14 }} 15 /> 16 ) 17}
Supports certain partial customizations such as: <Copied />
, <CountInfo />
, <CountInfoExtra />
, <Ellipsis />
, <KeyName />
, <Row />
1import React, { Fragment } from 'react'; 2import JsonView, { ValueQuote } from '@uiw/react-json-view'; 3 4const Copied = JsonView.Copied; 5 6export default function Demo() { 7 return ( 8 <JsonView 9 value={{ 10 url: new URL('https://example.com?t=12'), 11 urlStr: "https://example.com", 12 github: "https://example.com", 13 }} 14 style={{ 15 '--w-rjv-background-color': '#ffffff', 16 }} 17 > 18 <Copied 19 render={({ 'data-copied': copied, style, onClick, ...props }, { value }) => { 20 const styl = { whiteSpace: 'nowrap' } 21 if (copied) { 22 return <span style={{ ...style, ...styl }}>复制成功</span> 23 } 24 return <span style={{ ...style, ...styl }} onClick={onClick}>复制</span> 25 }} 26 /> 27 <JsonView.Url 28 render={(props, { type, value }) => { 29 if (type === 'type' && value instanceof URL) { 30 return <span /> 31 } 32 if (type === 'value' && value instanceof URL) { 33 return ( 34 <Fragment> 35 <a href={value.href} target="_blank" {...props}> 36 <ValueQuote /> 37 {value.href} 38 <ValueQuote /> 39 </a> 40 Open URL 41 </Fragment> 42 ); 43 } 44 }} 45 /> 46 </JsonView> 47 ) 48}
More in-depth customization (#19)
1import React from 'react'; 2import JsonView from '@uiw/react-json-view'; 3 4const object = { 5 _id: "ObjectId('13212hakjdhajksd')", 6 uid: "test1", 7 attival_time: new Date('Tue Sep 13 2022 14:07:44 GMT-0500 (Central Daylight Time)'), 8 __v: 0 9} 10 11export default function Demo() { 12 return ( 13 <JsonView 14 value={object} 15 // keyName="root" 16 displayObjectSize={false} 17 style={{ 18 '--w-rjv-background-color': '#ffffff', 19 }} 20 > 21 <JsonView.Quote render={() => <span />}/> 22 <JsonView.String 23 render={({ children, ...reset }, { type, value, keyName }) => { 24 if (type === 'type') { 25 return <span /> 26 } 27 if (type === 'value' && /ObjectId\(['"](.*?)['"]\)/.test(value)) { 28 return <span {...reset}>{children}</span> 29 } 30 }} 31 /> 32 <JsonView.Date 33 render={({ children, ...reset }, { type, value, keyName }) => { 34 if (type === 'type') { 35 return <span /> 36 } 37 }} 38 /> 39 <JsonView.Int 40 render={({ children, ...reset }, { type, value, keyName }) => { 41 if (type === 'type') { 42 return <span /> 43 } 44 }} 45 /> 46 </JsonView> 47 ) 48}
Inspector
1import React from 'react'; 2import JsonView from '@uiw/react-json-view'; 3 4const object = [ 5 { 6 "_id": "56dcf573b09c217d39fd7621", 7 "name": "Howard Christensen", 8 "email": "howardchristensen@gmail.com", 9 "phone": "+1 (830) 529-3176", 10 "address": "511 Royce Street, Hilltop, Tennessee, 9712" 11 }, 12 { 13 "_id": "56dcf57323630b06251e93cd", 14 "name": "Eleanor Lynn", 15 "email": "eleanorlynn@gmail.com", 16 "phone": "+1 (911) 576-2345", 17 "address": "547 Dearborn Court, Trona, California, 8629" 18 }, 19 { 20 "_id": "56dcf5738279cac6b081e512", 21 "name": "Baxter Mooney", 22 "email": "baxtermooney@gmail.com", 23 "phone": "+1 (954) 456-3456", 24 "address": "349 Cumberland Walk, Washington, Alaska, 3154" 25 }, 26 { 27 "_id": "56dcf57303accabd43740957", 28 "name": "Calhoun Tyson", 29 "email": "calhountyson@gmail.com", 30 "phone": "+1 (818) 456-2529", 31 "address": "367 Lyme Avenue, Ladera, Louisiana, 6292" 32 }, 33] 34 35const customTheme = { 36 '--w-rjv-background-color': '#fff', 37 '--w-rjv-border-left-width': 0, 38 '--w-rjv-color': '#881391', 39 '--w-rjv-type-int-color': '#881391', 40 '--w-rjv-key-number': '#881391', 41 '--w-rjv-key-string': '#881391', 42}; 43 44const Quote = JsonView.Quote; 45const BraceLeft = JsonView.BraceLeft; 46const BraceRight = JsonView.BraceRight; 47const CountInfo = JsonView.CountInfo; 48const Ellipsis = JsonView.Ellipsis; 49const CountInfoExtra = JsonView.CountInfoExtra; 50 51export default function Demo() { 52 return ( 53 <JsonView 54 value={object} 55 style={customTheme} 56 enableClipboard={false} 57 displayDataTypes={false} 58 > 59 <Ellipsis 60 render={({ 'data-expanded': isExpanded, className, ...props }, { value }) => { 61 if (Array.isArray(value) && isExpanded) { 62 console.log('props:',value, isExpanded, props) 63 return ( 64 <span className={className}> 65 {Array.from({ length: value.length }, () => 'Object').join(', ')} 66 </span> 67 ) 68 } 69 return <span />; 70 }} 71 /> 72 <Quote> 73 <span /> 74 </Quote> 75 <BraceLeft> 76 <span /> 77 </BraceLeft> 78 <BraceRight> 79 <span /> 80 </BraceRight> 81 <CountInfo 82 render={({ 'data-length': length, ...props }, { value }) => { 83 const isArray = Array.isArray(value); 84 if (isArray) return <span />; 85 return ( 86 <span {...props}>Object</span> 87 ); 88 }} 89 /> 90 </JsonView> 91 ); 92}
Passing as="tagName" will automatically infer the type.
1<JsonView.CountInfo 2 as="del" 3 render={(props, { value, keyName }) => { 4 if (keyName === 'integer' && typeof value === 'number' && value > 10) { 5 console.log('value:', value, props) 6 return <del {...props}>{keyName}</del>; 7 } 8 }} 9/>
Add a click event on the data row
1import React from 'react'; 2import JsonView from '@uiw/react-json-view'; 3 4export default function Demo() { 5 return ( 6 <JsonView 7 style={{ 8 '--w-rjv-background-color': '#ffffff', 9 }} 10 value={{ 11 name: 'John', 12 age: 30, 13 hobbies: ['reading', 'coding', 'swimming'], 14 address: { 15 street: '123 Main St', 16 city: 'New York', 17 country: { 18 name: 'Main ', 19 codex: '123' 20 } 21 } 22 }} 23 > 24 <JsonView.Row 25 as="div" 26 render={(props, { keyName, value, parentValue }) => { 27 return ( 28 <div 29 {...props} 30 onClick={() => { 31 console.log("keyName", keyName) 32 console.log("value", value) 33 console.log("parentValue", parentValue) 34 }} 35 /> 36 ) 37 }} 38 /> 39 </JsonView> 40 ) 41}
1import React, { useState, useEffect } from 'react'; 2import JsonView from '@uiw/react-json-view'; 3 4const object = { 5 string: 'Lorem ipsum dolor sit amet', 6 integer: 42, 7 timer: 0, 8 object: { 'first-child': true, 'second-child': false, 'last-child': null }, 9} 10export default function Demo() { 11 const [src, setSrc] = useState({ ...object }) 12 useEffect(() => { 13 const loop = () => { 14 setSrc(src => ({ 15 ...src, 16 timer: src.timer + 1 17 })) 18 } 19 const id = setInterval(loop, 1000) 20 return () => clearInterval(id) 21 }, []); 22 23 return ( 24 <JsonView 25 value={src} 26 keyName="root" 27 style={{ 28 '--w-rjv-background-color': '#ffffff', 29 '--w-rjv-border-left': '1px dashed #ebebeb', 30 // ✅ Change default update background color ✅ 31 '--w-rjv-update-color': '#ff6ffd', 32 }} 33 /> 34 ) 35}
This feature can be disabled with highlightUpdates={false}
, and the default color can be changed with --w-rjv-update-color
.
1import React, { Fragment } from 'react'; 2import JsonView from '@uiw/react-json-view'; 3 4export default function Demo() { 5 const value = { data: ["123", 23] } 6 return ( 7 <JsonView value={value} style={{ '--w-rjv-background-color': '#ffffff' }}> 8 <JsonView.Colon render={(props, { parentValue, value, keyName }) => { 9 if (Array.isArray(parentValue) && props.children == ":") { 10 return <span /> 11 } 12 return <span {...props} /> 13 }}/> 14 <JsonView.KeyName 15 render={({ ...props }, { type, parentValue, value, keyName }) => { 16 if (Array.isArray(parentValue) && Number.isFinite( props.children)) { 17 return <span /> 18 } 19 return <span {...props} /> 20 }} 21 /> 22 </JsonView> 23 ) 24}
1import React from 'react'; 2import JsonView from '@uiw/react-json-view'; 3const object = { 4 string: 'Lorem ipsum dolor sit amet', 5 integer: 42, 6 float: 114.514, 7 object: { 8 'first-child': true, 9 'second-child': false, 10 'last-child': null, 11 }, 12 nestedArray: [ 13 [1, 2], 14 [3, 4], 15 ], 16} 17export default function Demo() { 18 return ( 19 <JsonView 20 value={object} 21 collapsed={2} 22 shouldExpandNodeInitially={(isExpanded, { value, keys, level }) => { 23 if (keys.length > 0 && keys[0] == "object") { 24 return true 25 } 26 return isExpanded 27 }} 28 style={{ 29 '--w-rjv-background-color': '#ffffff', 30 }} 31 > 32 </JsonView> 33 ) 34}
Use built-in default icons.
1import React from 'react'; 2import JsonView from '@uiw/react-json-view'; 3import { TriangleArrow } from '@uiw/react-json-view/triangle-arrow'; 4import { TriangleSolidArrow } from '@uiw/react-json-view/triangle-solid-arrow'; 5 6const object = { 7 string: 'Lorem ipsum dolor sit amet', 8 integer: 42, 9 float: 114.514, 10 object: { 11 'first-child': true, 12 'second-child': false, 13 'last-child': null, 14 }, 15 nestedArray: [ 16 [1, 2], 17 [3, 4], 18 ], 19} 20export default function Demo() { 21 return ( 22 <JsonView 23 value={object} 24 keyName="root" 25 style={{ 26 '--w-rjv-background-color': '#ffffff', 27 '--w-rjv-border-left': '1px dashed #ebebeb', 28 }} 29 > 30 <JsonView.Arrow> 31 <TriangleSolidArrow /> 32 </JsonView.Arrow> 33 </JsonView> 34 ) 35}
Display of custom svg icon
components
1import React from 'react'; 2import JsonView from '@uiw/react-json-view'; 3import { TriangleArrow } from '@uiw/react-json-view/triangle-arrow'; 4import { TriangleSolidArrow } from '@uiw/react-json-view/triangle-solid-arrow'; 5 6const object = { 7 string: 'Lorem ipsum dolor sit amet', 8 integer: 42, 9 float: 114.514, 10 object: { 11 'first-child': true, 12 'second-child': false, 13 'last-child': null, 14 }, 15 nestedArray: [ 16 [1, 2], 17 [3, 4], 18 ], 19} 20export default function Demo() { 21 return ( 22 <JsonView 23 value={object} 24 keyName="root" 25 style={{ 26 '--w-rjv-background-color': '#ffffff', 27 '--w-rjv-border-left': '1px dashed #ebebeb', 28 }} 29 > 30 <JsonView.Arrow 31 render={({ 'data-expanded': isExpanded, ...props }) => { 32 const svgProps = { 33 style: { 34 cursor: 'pointer', height: '1em', width: '1em', marginRight: 5, userSelect: 'none' 35 }, 36 fill: "var(--w-rjv-arrow-color, currentColor)" 37 } 38 if (!isExpanded) { 39 return ( 40 <svg viewBox="0 0 24 24" {...svgProps}> 41 <path d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z" /> 42 </svg> 43 ); 44 } 45 return ( 46 <svg viewBox="0 0 24 24" {...svgProps}> 47 <path d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M7,13H17V11H7" /> 48 </svg> 49 ); 50 }} 51 /> 52 </JsonView> 53 ); 54}
Migrate from JSON View v1 to v2. The new v2 version has removed the and quotes
props.components
1export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> { 2- quotes?: "'" | '"' | ''; 3- components?: {}; 4}
1export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> { 2 /** This property contains your input JSON */ 3 value?: T; 4 /** Define the root node name. @default undefined */ 5 keyName?: string | number; 6 /** Whether sort keys through `String.prototype.localeCompare()` @default false */ 7 objectSortKeys?: boolean | ((keyA: string, keyB: string, valueA: T, valueB: T) => number); 8 /** Set the indent-width for nested objects @default 15 */ 9 indentWidth?: number; 10 /** When set to `true`, `objects` and `arrays` are labeled with size @default true */ 11 displayObjectSize?: boolean; 12 /** When set to `true`, data type labels prefix values @default true */ 13 displayDataTypes?: boolean; 14 /** The user can copy objects and arrays to clipboard by clicking on the clipboard icon. @default true */ 15 enableClipboard?: boolean; 16 /** When set to true, all nodes will be collapsed by default. Use an integer value to collapse at a particular depth. @default false */ 17 collapsed?: boolean | number; 18 /** 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). */ 19 shouldExpandNodeInitially?: ( 20 isExpanded: boolean, 21 props: { value?: T; keys: (number | string)[]; level: number }, 22 ) => boolean; 23 /** Whether to highlight updates. @default true */ 24 highlightUpdates?: boolean; 25 /** Shorten long JSON strings, Set to `0` to disable this feature @default 30 */ 26 shortenTextAfterLength?: number; 27 /** When the text exceeds the length, `...` will be displayed. Currently, this `...` can be customized. @default "..." */ 28 stringEllipsis?: number; 29 /** Callback function for when a treeNode is expanded or collapsed */ 30 onExpand?: (props: { expand: boolean; value?: T; keyid: string; keyName?: string | number }) => void; 31 /** Fires event when you copy */ 32 onCopied?: (text: string, value?: T) => void; 33}
1import { BraceLeft } from './symbol/BraceLeft'; 2import { BraceRight } from './symbol/BraceRight'; 3import { BracketsLeft } from './symbol/BracketsLeft'; 4import { BracketsRight } from './symbol/BracketsRight'; 5import { Arrow } from './symbol/Arrow'; 6import { Colon } from './symbol/Colon'; 7import { Quote } from './symbol/Quote'; 8import { ValueQuote } from './symbol/ValueQuote'; 9 10import { Bigint } from './types/Bigint'; 11import { Date } from './types/Date'; 12import { False } from './types/False'; 13import { Float } from './types/Float'; 14import { Int } from './types/Int'; 15import { Map } from './types/Map'; 16import { Nan } from './types/Nan'; 17import { Null } from './types/Null'; 18import { Set } from './types/Set'; 19import { StringText } from './types/String'; 20import { True } from './types/True'; 21import { Undefined } from './types/Undefined'; 22import { Url } from './types/Url'; 23 24import { Copied } from './section/Copied'; 25import { CountInfo } from './section/CountInfo'; 26import { CountInfoExtra } from './section/CountInfoExtra'; 27import { Ellipsis } from './section/Ellipsis'; 28import { KeyName } from './section/KeyName'; 29import { Row } from './section/Row'; 30 31type JsonViewComponent = React.FC<React.PropsWithRef<JsonViewProps<object>>> & { 32 BraceLeft: typeof BraceLeft; 33 BraceRight: typeof BraceRight; 34 BracketsLeft: typeof BracketsLeft; 35 BracketsRight: typeof BracketsRight; 36 Arrow: typeof Arrow; 37 Colon: typeof Colon; 38 Quote: typeof Quote; 39 ValueQuote: typeof ValueQuote; 40 41 Bigint: typeof Bigint; 42 Date: typeof Date; 43 False: typeof False; 44 Float: typeof Float; 45 Int: typeof Int; 46 Map: typeof Map; 47 Nan: typeof Nan; 48 Null: typeof Null; 49 Set: typeof Set; 50 String: typeof StringText; 51 True: typeof True; 52 Undefined: typeof Undefined; 53 Url: typeof Url; 54 55 Copied: typeof Copied; 56 CountInfo: typeof CountInfo; 57 CountInfoExtra: typeof CountInfoExtra; 58 Ellipsis: typeof Ellipsis; 59 KeyName: typeof KeyName; 60 Row: typeof Row; 61}; 62declare const JsonView: JsonViewComponent; 63export default JsonView;
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 | ✅ | demo | ||||
react-json-view-lite | ❌ | demo | ||||
react-json-pretty | ❌ | - | ||||
❌ | demo | |||||
react-json-tree | ❌ | |||||
✅ | demo | |||||
react-inspector | ❌ | demo | ||||
react-domify | ❌ | demo | ||||
react18-json-view | ❌ | demo | ||||
@textea/json-viewer | ✅ | demo | ||||
react-editable-json-tree | ✅ | demo | ||||
react-json-view | ❌ | demo |
Runs the project in development mode.
1# Step 1, run first, listen to the component compile and output the .js file 2# listen for compilation output type .d.ts file 3npm run watch 4# Step 2, development mode, listen to compile preview website instance 5npm run start
Builds the app for production to the build folder.
1npm run build
The build is minified and the filenames include the hashes. Your app is ready to be deployed!
As always, thanks to our amazing contributors!
Made with contributors.
Licensed under the MIT License.
No vulnerabilities found.
No security vulnerabilities found.