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.
- Fully implemented all v1 JSON display features.
- Adding editing functionality to v2.
- Added comprehensive test cases for v2.
npm install @uiw/react-json-viewimportJsonViewfrom'@uiw/react-json-view';importJsonViewEditorfrom'@uiw/react-json-view/editor';import{lightTheme}from'@uiw/react-json-view/light';import{darkTheme}from'@uiw/react-json-view/dark';import{TriangleArrow}from'@uiw/react-json-view/triangle-arrow';import{TriangleSolidArrow}from'@uiw/react-json-view/triangle-solid-arrow';importJsonViewfrom'@uiw/react-json-view';constavatar='https://i.imgur.com/MK3eW3As.jpg';constlongArray=newArray(1000).fill(1);constexample={
avatar,string: 'Lorem ipsum dolor sit amet',integer: 42,float: 114.514,bigint: 10086n,null: null,
undefined,timer: 0,date: newDate('Tue Sep 13 2022 14:07:44 GMT-0500 (Central Daylight Time)'),array: [19,100.86,'test',NaN,Infinity],nestedArray: [[1,2],[3,4],],object: {'first-child': true,'second-child': false,'last-child': null,},
longArray,string_number: '1234',};<JsonViewvalue={example}/>By default, the lightTheme light theme is used, and a darkTheme dark theme configuration is built in. The library provides multiple built-in themes including dark, light, nord, github themes, gruvbox, vscode, monokai, and basic themes.
importReactfrom'react';importJsonViewfrom'@uiw/react-json-view';import{lightTheme}from'@uiw/react-json-view/light';import{darkTheme}from'@uiw/react-json-view/dark';import{nordTheme}from'@uiw/react-json-view/nord';import{githubLightTheme}from'@uiw/react-json-view/githubLight';import{githubDarkTheme}from'@uiw/react-json-view/githubDark';import{vscodeTheme}from'@uiw/react-json-view/vscode';import{gruvboxTheme}from'@uiw/react-json-view/gruvbox';import{monokaiTheme}from'@uiw/react-json-view/monokai';import{basicTheme}from'@uiw/react-json-view/basic';constobject={string: 'Lorem ipsum dolor sit amet',integer: 42,float: 114.514,boolean: true,null: null,nan: NaN,url: newURL('https://example.com'),}conststyle={display: 'grid',gap: '1rem',gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))'};exportdefaultfunctionDemo(){return(<divstyle={style}><JsonViewvalue={object}style={darkTheme}/><JsonViewvalue={object}style={lightTheme}/><JsonViewvalue={object}style={nordTheme}/><JsonViewvalue={object}style={githubLightTheme}/><JsonViewvalue={object}style={githubDarkTheme}/><JsonViewvalue={object}style={gruvboxTheme}/><JsonViewvalue={object}style={vscodeTheme}/><JsonViewvalue={object}style={monokaiTheme}/><JsonViewvalue={object}style={basicTheme}/></div>);}Example of custom vscode theme styles using CSS custom properties:
importReactfrom'react';importJsonViewfrom'@uiw/react-json-view';constobject={string: 'Lorem ipsum dolor sit amet',integer: 42,float: 114.514,object: {'first-child': true,'second-child': false,'last-child': null,},}constcustomTheme={'--w-rjv-font-family': 'monospace','--w-rjv-color': '#9cdcfe','--w-rjv-key-number': '#268bd2','--w-rjv-key-string': '#9cdcfe','--w-rjv-background-color': '#1e1e1e','--w-rjv-line-color': '#36334280','--w-rjv-arrow-color': '#838383','--w-rjv-edit-color': 'var(--w-rjv-color)','--w-rjv-info-color': '#9c9c9c7a','--w-rjv-update-color': '#9cdcfe','--w-rjv-copied-color': '#9cdcfe','--w-rjv-copied-success-color': '#28a745','--w-rjv-curlybraces-color': '#d4d4d4','--w-rjv-colon-color': '#d4d4d4','--w-rjv-brackets-color': '#d4d4d4','--w-rjv-ellipsis-color': '#cb4b16','--w-rjv-quotes-color': 'var(--w-rjv-key-string)','--w-rjv-quotes-string-color': 'var(--w-rjv-type-string-color)','--w-rjv-type-string-color': '#ce9178','--w-rjv-type-int-color': '#b5cea8','--w-rjv-type-float-color': '#b5cea8','--w-rjv-type-bigint-color': '#b5cea8','--w-rjv-type-boolean-color': '#569cd6','--w-rjv-type-date-color': '#b5cea8','--w-rjv-type-url-color': '#3b89cf','--w-rjv-type-null-color': '#569cd6','--w-rjv-type-nan-color': '#859900','--w-rjv-type-undefined-color': '#569cd6',};exportdefaultfunctionDemo(){return(<JsonViewvalue={object}keyName="root"style={customTheme}/>)}Interactive theme customization example with real-time color picker. You can modify theme colors and see changes instantly. Check the full interactive editor in the documentation website
importReact,{useState,useEffect}from'react';importColorfulfrom'@uiw/react-color-colorful';importJsonViewfrom'@uiw/react-json-view';constobject={avatar: 'https://i.imgur.com/MK3eW3As.jpg',string: 'Lorem ipsum dolor sit amet',integer: 42,float: 114.514,bigint: 10086n,null: null,
undefined,timer: 0,nan: NaN,url: newURL('https://example.com'),date: newDate('Tue Sep 13 2022 14:07:44 GMT-0500 (Central Daylight Time)'),array: [19,100.86,'test',NaN,Infinity],nestedArray: [[1,2],[3,4],],object: {'first-child': true,'second-child': false,'last-child': null,},string_number: '1234',}constcustomTheme={'--w-rjv-color': '#9cdcfe','--w-rjv-key-number': '#268bd2','--w-rjv-key-string': '#9cdcfe','--w-rjv-background-color': '#1e1e1e','--w-rjv-line-color': '#36334280','--w-rjv-arrow-color': '#838383','--w-rjv-edit-color': '#9cdcfe','--w-rjv-info-color': '#9c9c9c7a','--w-rjv-update-color': '#9cdcfe','--w-rjv-copied-color': '#9cdcfe','--w-rjv-copied-success-color': '#28a745','--w-rjv-curlybraces-color': '#d4d4d4','--w-rjv-colon-color': '#d4d4d4','--w-rjv-brackets-color': '#d4d4d4','--w-rjv-ellipsis-color': '#cb4b16','--w-rjv-quotes-color': '#9cdcfe','--w-rjv-quotes-string-color': '#ce9178','--w-rjv-type-string-color': '#ce9178','--w-rjv-type-int-color': '#b5cea8','--w-rjv-type-float-color': '#b5cea8','--w-rjv-type-bigint-color': '#b5cea8','--w-rjv-type-boolean-color': '#569cd6','--w-rjv-type-date-color': '#b5cea8','--w-rjv-type-url-color': '#3b89cf','--w-rjv-type-null-color': '#569cd6','--w-rjv-type-nan-color': '#859900','--w-rjv-type-undefined-color': '#569cd6',};exportdefaultfunctionDemo(){const[cssvar,setCssvar]=useState('--w-rjv-background-color');const[hex,setHex]=useState("#1e1e1e");const[editable,setEditable]=useState(false);const[theme,setTheme]=useState(customTheme);constonChange=({ hexa })=>{setHex(hexa);setTheme({ ...theme,[cssvar]: hexa});};const[src,setSrc]=useState({ ...object})useEffect(()=>{constloop=()=>{setSrc(src=>({
...src,timer: src.timer+1}))}constid=setInterval(loop,1000)return()=>clearInterval(id)},[]);constchangeEditable=(evn)=>setEditable(evn.target.checked);return(<React.Fragment><divstyle={{display: 'flex',gap: '1rem',alignItems: 'flex-start'}}><JsonView// editable={editable}value={src}keyName="root"style={{flex: 1,overflow: 'auto', ...theme}}/><div><Colorfulcolor={hex}onChange={onChange}/><divstyle={{display: 'flex',gap: '0.4rem',flexDirection: 'column', ...customTheme}}>{Object.keys(customTheme).map((varname,idx)=>{constclick=()=>{setCssvar(varname);setHex(customTheme[varname]);};constactive=cssvar===varname ? '#a8a8a8' : '';return(<buttonkey={idx}style={{background: active,border: 0,boxShadow: 'inset 0px 0px 1px #000',display: 'flex',alignItems: 'center',gap: 5,padding: '1px 3px'}}onClick={click}><spanstyle={{display: 'inline-block',width: 12,height: 12,background: `var(${varname})`}}></span>{varname}</button>)})}</div></div></div><div>
Copy the theme configuration below into your project.
</div><prestyle={{padding: 10}}>{JSON.stringify(theme,null,2)}</pre></React.Fragment>);}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 />. This example shows custom rendering of string values as images and custom colon symbols.
importReactfrom'react';importJsonViewfrom'@uiw/react-json-view';constobject={avatar: 'https://i.imgur.com/MK3eW3As.jpg',string: 'Lorem ipsum dolor sit amet',integer: 42,}exportdefaultfunctionDemo(){return(<JsonViewvalue={object}keyName="root"displayObjectSize={false}style={{'--w-rjv-background-color': '#ffffff',}}><JsonView.Stringrender={({ children, ...reset},{ type, value, keyName })=>{constisImg=/^https?.*\.(jpg|png)$/i.test(value)if(type==='type'&&isImg){return<span/>}if(type==='value'&&isImg){return<img{...reset}height="26"src={value}/>}}}/><JsonView.Colon> -> </JsonView.Colon></JsonView>)}URL Type Support - Automatic recognition and display of URL objects with proper styling.
importReactfrom'react';importJsonViewfrom'@uiw/react-json-view';exportdefaultfunctionDemo(){return(<JsonViewvalue={{url: newURL('https://example.com?t=12'),urlStr: "https://example.com",github: "https://example.com",}}style={{'--w-rjv-background-color': '#ffffff',}}/>)}Component Customization - Example showing custom copy functionality and URL rendering with clickable links. Supports partial customizations such as: <Copied />, <CountInfo />, <CountInfoExtra />, <Ellipsis />, <KeyName />, <Row />
importReact,{Fragment}from'react';importJsonView,{ValueQuote}from'@uiw/react-json-view';constCopied=JsonView.Copied;exportdefaultfunctionDemo(){return(<JsonViewvalue={{url: newURL('https://example.com?t=12'),urlStr: "https://example.com",github: "https://example.com",}}style={{'--w-rjv-background-color': '#ffffff',}}><Copiedrender={({'data-copied': copied, style, onClick, ...props},{ value })=>{conststyl={whiteSpace: 'nowrap'}if(copied){return<spanstyle={{ ...style, ...styl}}>复制成功</span>}return<spanstyle={{ ...style, ...styl}}onClick={onClick}>复制</span>}}/><JsonView.Urlrender={(props,{ type, value })=>{if(type==='type'&&valueinstanceofURL){return<span/>}if(type==='value'&&valueinstanceofURL){return(<Fragment><ahref={value.href}target="_blank"{...props}><ValueQuote/>{value.href}<ValueQuote/></a>
Open URL
</Fragment>);}}}/></JsonView>)}Advanced Customization - Deep customization example showing how to hide type indicators and quotes for a cleaner MongoDB-like object display (#19)
importReactfrom'react';importJsonViewfrom'@uiw/react-json-view';constobject={_id: "ObjectId('13212hakjdhajksd')",uid: "test1",attival_time: newDate('Tue Sep 13 2022 14:07:44 GMT-0500 (Central Daylight Time)'),__v: 0}exportdefaultfunctionDemo(){return(<JsonViewvalue={object}// keyName="root"displayObjectSize={false}style={{'--w-rjv-background-color': '#ffffff',}}><JsonView.Quoterender={()=><span/>}/><JsonView.Stringrender={({ children, ...reset},{ type, value, keyName })=>{if(type==='type'){return<span/>}if(type==='value'&&/ObjectId\(['"](.*?)['"]\)/.test(value)){return<span{...reset}>{children}</span>}}}/><JsonView.Daterender={({ children, ...reset},{ type, value, keyName })=>{if(type==='type'){return<span/>}}}/><JsonView.Intrender={({ children, ...reset},{ type, value, keyName })=>{if(type==='type'){return<span/>}}}/></JsonView>)}Array Inspector Style - Example showing how to create a table-like inspector view for arrays, similar to browser DevTools object inspection.
importReactfrom'react';importJsonViewfrom'@uiw/react-json-view';constobject=[{"_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"},]constcustomTheme={'--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',};constQuote=JsonView.Quote;constBraceLeft=JsonView.BraceLeft;constBraceRight=JsonView.BraceRight;constCountInfo=JsonView.CountInfo;constEllipsis=JsonView.Ellipsis;constCountInfoExtra=JsonView.CountInfoExtra;exportdefaultfunctionDemo(){return(<JsonViewvalue={object}style={customTheme}enableClipboard={false}displayDataTypes={false}><Ellipsisrender={({'data-expanded': isExpanded, className, ...props},{ value })=>{if(Array.isArray(value)&&isExpanded){console.log('props:',value,isExpanded,props)return(<spanclassName={className}>{Array.from({length: value.length},()=>'Object').join(', ')}</span>)}return<span/>;}}/><Quote><span/></Quote><BraceLeft><span/></BraceLeft><BraceRight><span/></BraceRight><CountInforender={({'data-length': length, ...props},{ value })=>{constisArray=Array.isArray(value);if(isArray)return<span/>;return(<span{...props}>Object</span>);}}/></JsonView>);}Component Type Inference - Passing as="tagName" will automatically infer the TypeScript type for better type safety.
<JsonView.CountInfoas="del"render={(props,{ value, keyName })=>{if(keyName==='integer'&&typeofvalue==='number'&&value>10){console.log('value:',value,props)return<del{...props}>{keyName}</del>;}}}/>Row Click Events - Example showing how to add click event handlers to data rows for interactive functionality.
importReactfrom'react';importJsonViewfrom'@uiw/react-json-view';exportdefaultfunctionDemo(){return(<JsonViewstyle={{'--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'}}}}><JsonView.Rowas="div"render={(props,{ keyName, value, parentValue })=>{return(<div{...props}onClick={()=>{console.log("keyName",keyName)console.log("value",value)console.log("parentValue",parentValue)}}/>)}}/></JsonView>)}Demonstration of automatic highlighting when JSON values change. The timer value updates every second and gets highlighted to show the change.
importReact,{useState,useEffect}from'react';importJsonViewfrom'@uiw/react-json-view';constobject={string: 'Lorem ipsum dolor sit amet',integer: 42,timer: 0,object: {'first-child': true,'second-child': false,'last-child': null},}exportdefaultfunctionDemo(){const[src,setSrc]=useState({ ...object})useEffect(()=>{constloop=()=>{setSrc(src=>({
...src,timer: src.timer+1}))}constid=setInterval(loop,1000)return()=>clearInterval(id)},[]);return(<JsonViewvalue={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.
Example showing how to hide array indices for a cleaner display by customizing the Colon and KeyName components.
importReact,{Fragment}from'react';importJsonViewfrom'@uiw/react-json-view';exportdefaultfunctionDemo(){constvalue={data: ["123",23]}return(<JsonViewvalue={value}style={{'--w-rjv-background-color': '#ffffff'}}><JsonView.Colonrender={(props,{ parentValue, value, keyName })=>{if(Array.isArray(parentValue)&&props.children==":"){return<span/>}return<span{...props}/>}}/><JsonView.KeyNamerender={({ ...props},{ type, parentValue, value, keyName })=>{if(Array.isArray(parentValue)&&Number.isFinite(props.children)){return<span/>}return<span{...props}/>}}/></JsonView>)}Controls the initial expand/collapse state of JSON nodes. Demonstrates both the collapsed prop and shouldExpandNodeInitially callback. 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.
importReact,{useState}from'react';importJsonViewfrom'@uiw/react-json-view';constobject={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],],}exportdefaultfunctionDemo(){const[collapsed,setCollapsed]=useState(false)return(<><inputtype="checkbox"id="collapsed"checked={collapsed}onChange={(e)=>setCollapsed(e.target.checked)}/><labelfor="collapsed"> collapsed={collapsed==true ? "false" : "2"}</label><JsonViewvalue={object}collapsed={collapsed==true ? false : 2}shouldExpandNodeInitially={(isExpanded,{ value, keys, level })=>{if(keys.length>0&&keys[0]=="object"){returnfalse}returnisExpanded}}style={{'--w-rjv-background-color': '#ffffff',}}></JsonView></>)}Example showing how to customize expand/collapse arrow icons using built-in icon components.
importReactfrom'react';importJsonViewfrom'@uiw/react-json-view';import{TriangleArrow}from'@uiw/react-json-view/triangle-arrow';import{TriangleSolidArrow}from'@uiw/react-json-view/triangle-solid-arrow';constobject={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],],}exportdefaultfunctionDemo(){return(<JsonViewvalue={object}keyName="root"style={{'--w-rjv-background-color': '#ffffff','--w-rjv-border-left': '1px dashed #ebebeb',}}><JsonView.Arrow><TriangleSolidArrow/></JsonView.Arrow></JsonView>)}Custom SVG Icons - Example showing how to implement completely custom SVG icons for expand/collapse arrows with plus/minus symbols.
importReactfrom'react';importJsonViewfrom'@uiw/react-json-view';import{TriangleArrow}from'@uiw/react-json-view/triangle-arrow';import{TriangleSolidArrow}from'@uiw/react-json-view/triangle-solid-arrow';constobject={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],],}exportdefaultfunctionDemo(){return(<JsonViewvalue={object}keyName="root"style={{'--w-rjv-background-color': '#ffffff','--w-rjv-border-left': '1px dashed #ebebeb',}}><JsonView.Arrowrender={({'data-expanded': isExpanded, ...props})=>{constsvgProps={style: {cursor: 'pointer',height: '1em',width: '1em',marginRight: 5,userSelect: 'none'},fill: "var(--w-rjv-arrow-color, currentColor)"}if(!isExpanded){return(<svgviewBox="0 0 24 24"{...svgProps}><pathd="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"/></svg>);}return(<svgviewBox="0 0 24 24"{...svgProps}><pathd="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"/></svg>);}}/></JsonView>);}Migrate from JSON View v1 to v2. The new v2 version has removed the quotescomponents
export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
- quotes?: "'" | '"' | '';- components?: {};
}exportinterfaceJsonViewProps<Textendsobject>extendsReact.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>,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<T>;/** 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;}exporttypeShouldExpandNodeInitially<Textendsobject>=(isExpanded: boolean,props: {keyName?: string|number;value?: T;parentValue?: T;keys: (number|string)[];level: number;})=>boolean;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';typeJsonViewComponent=React.FC<React.PropsWithRef<JsonViewProps<object>>>&{BraceLeft: typeofBraceLeft;BraceRight: typeofBraceRight;BracketsLeft: typeofBracketsLeft;BracketsRight: typeofBracketsRight;Arrow: typeofArrow;Colon: typeofColon;Quote: typeofQuote;ValueQuote: typeofValueQuote;Bigint: typeofBigint;Date: typeofDate;False: typeofFalse;Float: typeofFloat;Int: typeofInt;Map: typeofMap;Nan: typeofNan;Null: typeofNull;Set: typeofSet;String: typeofStringText;True: typeofTrue;Undefined: typeofUndefined;Url: typeofUrl;Copied: typeofCopied;CountInfo: typeofCountInfo;CountInfoExtra: typeofCountInfoExtra;Ellipsis: typeofEllipsis;KeyName: typeofKeyName;Row: typeofRow;};declareconstJsonView: JsonViewComponent;exportdefaultJsonView;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.
# Step 1, run first, listen to the component compile and output the .js file# listen for compilation output type .d.ts file
npm run watch
# Step 2, development mode, listen to compile preview website instance
npm run startBuilds the app for production to the build folder.
npm run buildThe 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.