Themeable JSON Editor For React – JSON View

A lightweight, customizable, themeable JSON editor & viewer component for React applications.

Basic usages:

1. Install and import the JSON View component.

# Yarn
$ yarn add @uiw/react-json-view

# NPM
$ npm i @uiw/react-json-view

import React from 'react';
import JsonView from '@uiw/react-json-view';

// Themes
import { lightTheme } from '@uiw/react-json-view/light';
import { darkTheme } from '@uiw/react-json-view/dark';

2. Add the <JsonView /> component to your app.

const myData = {
     // ...
};
<JsonView value={myData} style={darkTheme} />

3. Create your own themes.

const customTheme = {
  '--w-rjv-font-family': 'monospace',
  '--w-rjv-color': '#9cdcfe',
  '--w-rjv-background-color': '#1e1e1e',
  '--w-rjv-line-color': '#323232',
  '--w-rjv-arrow-color': 'var(--w-rjv-color)',
  '--w-rjv-info-color': '#656565',
  '--w-rjv-update-color': '#ebcb8b',
  '--w-rjv-copied-color': '#9cdcfe',
  '--w-rjv-copied-success-color': '#28a745',
  '--w-rjv-curlybraces-color': '#d4d4d4',
  '--w-rjv-brackets-color': '#d4d4d4',
  '--w-rjv-type-string-color': '#ce9178',
  '--w-rjv-type-int-color': '#268bd2',
  '--w-rjv-type-float-color': '#859900',
  '--w-rjv-type-bigint-color': '#268bd2',
  '--w-rjv-type-boolean-color': '#559bd4',
  '--w-rjv-type-date-color': '#586e75',
  '--w-rjv-type-null-color': '#d33682',
  '--w-rjv-type-nan-color': '#859900',
  '--w-rjv-type-undefined-color': '#586e75',
};

const myData = {
     // ...
};
<JsonView value={myData} style={customTheme} />

4. Available component props.

/** This property contains your input JSON */
value?: T;
/** Set the indent-width for nested objects @default 15 */
indentWidth?: number;
/** When set to `true`, data type labels prefix values @default true */
displayDataTypes?: boolean;
/** When set to `true`, `objects` and `arrays` are labeled with size @default true */
displayObjectSize?: boolean;
/** Define the root node name. @default undefined */
keyName?: string | number;
/** The user can copy objects and arrays to clipboard by clicking on the clipboard icon. @default true */
enableClipboard?: boolean;
/** Whether to highlight updates. @default true */
highlightUpdates?: boolean;
/** Whether sort keys through `String.prototype.localeCompare()` @default false */
objectSortKeys?: boolean | ((a: string, b: string) => number);
/** Display for quotes in object-key @default " */
quotes?: "'" | '"' | '';
/** 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;
/** 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?: CopiedProps<T>['onCopied'];
/** Redefine interface elements to re-render. */
components?: {
  braces?: MetaProps['render'];
  ellipsis?: EllipsisProps['render'];
  arrow?: JSX.Element;
  objectKey?: SemicolonProps['render'];
  value?: ValueViewProps<T>['renderValue'];
  copied?: CopiedProps<T>['render'];
};

Preview:

Download Details:

Author: uiwjs

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/uiwjs/react-json-view

License: MIT