react-json-view

react-json-view (rjv) is a React component for displaying JavaScript arrays and JSON objects.

Live demo

Fork from https://github.com/uiwjs/react-json-view.

This fork aims to keep the viewer lightweight and reduce dependencies by removing editing, selection, and validation properties. It also adds some extra features, like path pinning or flashing updates.

Highlights

• Object, array, string and function values can be collapsed and expanded.
• Object and array nodes display length.
• Object and array nodes support a "Copy to Clipboard" feature.
• String values can be truncated after a specified length.
• Arrays can be subgrouped after a specified length.
• Base-16 Theme Support.

Installation

Requires React 19 or newer.

This package is ESM-only. Development requires Node.js 22.12 or newer.

npm install @sergiotx/react-json-view --save

Usage

import ReactJsonView from '@sergiotx/react-json-view';

// Pass an object or array as `src`. Raw JSON text strings are not parsed,
// though string values nested in the data are supported.

<ReactJsonView
  src={{
    string: 'this is a test string',
    integer: 42,
    array: [1, 2, 3, 'test', NaN],
    float: 3.14159,
    undefined: undefined,
    object: {
      'first-child': true,
      'second-child': false,
      'last-child': null,
    },
    string_number: '1234',
    date: new Date(),
  }}
/>;

API

| Name | Type | Default | Description | | :--------------------------- | :------------------------ | :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | src | object | Required | Parsed object or array to display. If omitted or null at runtime, an empty object is shown. Raw JSON text strings and other primitive top-level values are not parsed. | | name | string or null | null | Contains the name of your root node. Use null for no name. | | theme | string | 'rjv-default' | RJV supports base-16 themes. Check out the themes in the demo source. | | style | object | {} | Style attributes for react-json-view container. Explicit style attributes will override attributes provided by a theme. | | iconStyle | string | 'triangle' | Style of expand/collapse icons. Accepted values are "circle", "triangle" or "square". | | indentWidth | integer | 4 | Set the indent-width for nested objects. | | collapsed | boolean or integer | false | When set to true, all nodes will be collapsed by default. Use an integer value to collapse at a particular depth. | | collapseStringsAfterLength | integer | false | When an integer value is assigned, strings will be cut off at that length. Collapsed strings are followed by an ellipsis. String content can be expanded and collapsed by clicking on the string value. | | shouldCollapse | (field)=>{} | false | Callback function to provide control over what objects and arrays should be collapsed by default. An object is passed to the callback containing name, src, type ("array" or "object") and namespace. | | groupArraysAfterLength | integer | 100 | When an integer value is assigned, arrays will be displayed in groups by count of the value. Groups are displayed with bracket notation and can be expanded and collapsed by clicking on the brackets. | | enableClipboard | boolean or (copy)=>{} | true | When prop is not false, the user can copy objects and arrays to clipboard by clicking on the clipboard icon. Copy callbacks are supported. | | enablePathNavigation | boolean | false | When set to true, property rows show a hover-only pin button that filters the viewer to that subpath. A breadcrumb remains visible and updates when the source changes. | | displayObjectSize | boolean | false | When set to true, objects and arrays are labeled with size. | | displayDataTypes | boolean | false | When set to true, data type labels prefix values. | | hideVerticalLines | boolean | false | When set to true, hides the vertical guide lines between tree rows. | | sortKeys | boolean | false | Set to true to sort object keys. | | quotesOnKeys | boolean | true | Set to false to remove quotes from keys (e.g., "name": vs. name:). | | displayArrayKey | boolean | true | When set to true, the index of the elements prefix values. | | escapeStrings | boolean | true | When set to true, strings sequences such as \n, \t, \r, \f will be escaped. | | timestampFields | string or string[] | 'timestamp' | Field names whose numeric values should be parsed as Unix timestamps and show a date tooltip. Matching is by field name at any nesting depth. | | flashingUpdates | boolean | false | Set to true when src changes over time. Each value is compared with its previous value at the same path and changed values flash briefly. Added properties flash, and object sizes flash when properties are added or removed. The animation is disabled when the user prefers reduced motion. |

Theming

Builtin theme

You can specify a theme name or object when you instantiate your rjv component.

<ReactJsonView src={my_important_json} theme="monokai" />

Named built-in themes load on demand in separate chunks. Until the selected theme is ready, the viewer uses rjv-default; the default and custom theme objects render synchronously.

The following themes are builtin with the library:

• 'apathy'
• 'ashes'
• 'atelierDune'
• 'atelierForest'
• 'atelierHeath'
• 'atelierLakeside'
• 'atelierSeaside'
• 'bespin'
• 'brewer'
• 'bright'
• 'chalk'
• 'codeschool'
• 'colors'
• 'eighties'
• 'embers'
• 'flat'
• 'google'
• 'grayscale'
• 'greenscreen'
• 'harmonic'
• 'hopscotch'
• 'isotope'
• 'marrakesh'
• 'mocha'
• 'monokai'
• 'ocean'
• 'paraiso'
• 'pop'
• 'railscasts'
• 'shapeshifter'
• 'solarized'
• 'summerfruit'
• 'threezerotwofour'
• 'tomorrow'
• 'tube'
• 'twilight'

Custom theme

rjv supports any base-16 theme. You can supply your own base-16 theme object.

To better understand custom themes, take a look at the base-16 theme styling guidelines.