react-json-view

Features

Quick Start

npm install @uiw/react-json-view

importJsonViewfrom'@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}/>

Theme

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>);}

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}/>)}

Online Editing Theme

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>);}

Render

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> -&gt;</JsonView.Colon></JsonView>)}

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',}}/>)}

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>)}

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>)}

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>);}

<JsonView.CountInfoas="del"render={(props,{ value, keyName})=>{if(keyName==='integer'&&typeofvalue==='number'&&value>10){console.log('value:',value,props)return<del{...props}>{keyName}</del>;}}}/>

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>)}

Highlight Updates

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',}}/>)}

Do not display array index

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>)}

Default Collapse/Expand

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,},nestedArray:[[1,2],[3,4],],}exportdefaultfunctionDemo(){return(<JsonViewvalue={object}collapsed={2}shouldExpandNodeInitially={(isExpanded,{ value, keys, level})=>{if(keys.length>0&&keys[0]=="object"){returnfalse}returnisExpanded}}style={{'--w-rjv-background-color':'#ffffff',}}></JsonView>)}

Modify Icon Style

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>)}

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,2M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z"/></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,2M7,13H17V11H7"/></svg>);}}/></JsonView>);}

Props

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;

Size and dependencies

Development

# Step 1, run first, listen to the component compile and output the .js file# listen for compilation output type .d.ts filenpm run watch# Step 2, development mode, listen to compile preview website instancenpm run start

npm run build

Contributors

License