Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@textea/json-viewer

TexteaInc220.9kMIT4.0.1TypeScript support: included

Interactive Json Viewer, but not only a json viewer

react-18, react, react-json, react-json-viewer, array-viewer, component, interactive, interactive-json, json, json-component, json-display, json-tree, json-view, json-viewer, json-inspector, json-tree, tree, tree-view, treeview

readme

@textea/json-viewer

npm npm npm codecov Netlify Status

@textea/json-viewer is a React component that can be used to view and display any kind of data, not just JSON.

Json Viewer? ANY Data Viewer ✅

Open in StackBlitz

Features 🚀

  • 🦾 100% TypeScript
  • 🎨 Customizable: Key, value, editable, copy, select... Anything you can think of!
  • 🌈 Theme support: light or dark, or use Base16 themes.
  • ⚛️ SSR Ready
  • 📋 Copy to Clipboard
  • 🔍 Inspect anything: Object, Array, primitive types, and even Map and Set.
  • 📊 Metadata preview: Total items, length of string...
  • ✏️ Editor: Comes with an editor for basic types, which you can also customize to fit your use case.

Installation

@textea/json-viewer is using Material-UI as the base component library, so you need to install it and its peer dependencies first.

npm install @textea/json-viewer @mui/material @emotion/react @emotion/styled

CDN

<!doctype html>
<html lang="en">
  <body>
    <div id="json-viewer"></div>
    <script src="https://cdn.jsdelivr.net/npm/@textea/json-viewer@3"></script>
    <script>
      new JsonViewer({
        value: {
          /* ... */
        }
      }).render('#json-viewer')
    </script>
  </body>
</html>

Usage

Here is a basic example:

import { JsonViewer } from '@textea/json-viewer'

const object = {
  /* my json object */
}
const Component = () => <JsonViewer value={object} />

Customization

You can define custom data types to handle data that is not supported out of the box. Here is an example of how to display an image:

import { JsonViewer, defineDataType } from '@textea/json-viewer'

const object = {
  image: 'https://i.imgur.com/1bX5QH6.jpg'
  // ... other values
}

// Let's define a data type for image
const imageDataType = defineDataType({
  is: (value) => typeof value === 'string' && value.startsWith('https://i.imgur.com'),
  Component: (props) => <Image height={50} width={50} src={props.value} alt={props.value} />
})

const Component = () => <JsonViewer value={object} valueTypes={[imageDataType]} />

Avatar Preview

see the full code

Theme

Please refer to Styling and Theming

Ocean Theme Preview

Contributors

Acknowledge

This package is originally based on mac-s-g/react-json-view.

Also thanks open source projects that make this possible.

Sponsoring services

Netlify

Netlify lets us distribute the site.

LICENSE

This project is licensed under the terms of the MIT license.

changelog

Changelog

4.0.1 (2024-12-15)

Bug Fixes

  • update Object datatype for correct pluralization of Items (#531) (004e5c0)

4.0.0 (2024-09-15)

⚠ BREAKING CHANGES

  • remove deprecated createDataType and displayObjectSize
  • migrate to MUI v6

Features

  • migrate to MUI v6 (5ed7245)
  • remove deprecated createDataType and displayObjectSize (2923478)

3.5.0 (2024-08-26)

Features

  • add data-key-toggle-* class name for customization (c1e605a)
  • add utils getPathValue (194ac43)
  • hide colon when key is empty (c1ce6ed)
  • passing path to Editor for better customizability (f03ab10)
  • support displayComma for showing comma (2c85bdb)

3.4.1 (2024-04-06)

Bug Fixes

  • fix type register error on server (a952c53)
  • update theme logic (7fbb50b)

3.4.0 (2024-02-15)

Features

  • expose dataTypes, themes and utils in browser build (922065f)

3.3.2 (2024-02-09)

Bug Fixes

  • missing key for self referential object (95ee8ca)
  • typo in doc (925456a)

3.3.1 (2024-01-24)

Bug Fixes

  • improve part of ui not covered by theme color (867c791)
  • remove browser from package.json (a173bd0)

3.3.0 (2024-01-16)

Features

3.2.3 (2023-11-04)

Bug Fixes

  • should handle key and path of nested grouped array with nestedIndex (6efeac6)

3.2.2 (2023-10-09)

Bug Fixes

  • fix publishing script and add provenance statements (f644caf)

3.2.0 (2023-10-09)

Features

  • improve built-in editor with autoFocus and better keyboard control (1a757e8)

Bug Fixes

  • super long string can be partially selected without collapsing (c2282dd)

3.1.1 (2023-06-20)

Bug Fixes

3.1.0 (2023-06-20)

Features

  • support default inspect state with defaultInspectControl (7982300)

3.0.0 (2023-04-25)

For the detail and migration guide, check out the Migrating from v2 to v3

Main Changes

This major focus on providing the ability to customize and extend data types. We also moved MUI to peerdependency to reflect the correct dependency relationship.

Dependencies

Starting from v3, dependencies from Material-UI are no longer included in the package's dependencies.\ Run this to install all the necessary dependencies.

npm install @mui/material @emotion/react @emotion/styled

Browser compatibility

This package was set to support ES5 by default, but it's no longer the case.\ Since V3, as this package is using Material-UI, we have adjusted the browser compatibility to match the Material-UI's one.

Use defineDataType instead of createDataType

serialize and deserialize have been added to datatype to support editing feature on any data type.

As the result, createDataType has been renamed to defineDataType and the signature has been changed to accept an object instead of a long list of arguments. For more information, please refer to Defining data types.

- createDataType(
-   (value) => typeof value === 'string' && value.startsWith('https://i.imgur.com'),
-   (props) => <Image height={50} width={50} src={props.value} alt={props.value} />
- )
+ defineDataType({
+   is: (value) => typeof value === 'string' && value.startsWith('https://i.imgur.com'),
+   Component: (props) => <Image height={50} width={50} src={props.value} alt={props.value} />
+ })

Rename displayObjectSize to displaySize

displayObjectSize has been renamed to displaySize to describe the prop's purpose more accurately.

<JsonViewer
-  displayObjectSize={true}
+  displaySize={true}
   value={value}
/>

Now you can provide a function to customize this behavior by returning a boolean based on the value and path.

<JsonViewer
  displaySize={(path, value) => {
    if (Array.isArray(value)) return false
    if (value instanceof Map) return true
    return true
  }}
  value={value}
/>

Expose built-in type for extending

For more information, check Extend Built-in Data Types.

Features

  • dropping createDataType and change the signature of EditorComponent to only accept string
  • expose defineEasyType for easier customization (d727adb)
  • expose built-in type (ed64769)
  • rename displayObjectSize to displaySize (2e5739c)

Bug Fixes

  • fix editing on any datatype (69a359f)
  • improve deprecation message (5e73886)
  • move emotion to peer dependency (5616257)
  • move mui to peerDependencies (9c45b90)
  • remove @emotion/* from jsx importSource (658fddb)
  • type matching should not early return when value is object (0c9ef70)

Miscellaneous Chores

2.17.2 (2023-04-20)

Bug Fixes

  • use swc in the right way (4b437fb)

2.17.1 (2023-04-20)

Bug Fixes

  • disable externalHelpers (aaa31a5)

2.17.0 (2023-04-19)

Features

  • expose copy function to onCopy callback (5e4c7f3)

2.16.2 (2023-04-02)

Bug Fixes

  • NaN should not trigger highlightUpdates (f09b769)

2.16.1 (2023-03-28)

Bug Fixes

  • applyValue should shallow copy the input (5c632a4)
  • editing value not correct (8a8d1cb)

2.16.0 (2023-03-27)

Features

Bug Fixes

  • hucky hooks are not executable at unix (1e5169a)

2.15.0 (2023-03-21)

Features

  • expose class json-viewer-theme-* for style customization (3ea2805)
  • support passing sx props to customize the style (e10fe1d)

Bug Fixes

  • copying on circular JSON/Array throws error (edfe2f3)
  • eliminate eslint warning (e598660)
  • improve copy on BigInt / Map / Set (7c46e07)

2.14.1 (2023-03-07)

Bug Fixes

  • migrate zustand away from `zustand/context' (ed6c699)
  • migrate zustand to v4 (5bbfcf9)

2.14.0 (2023-02-23)

Features

Bug Fixes

  • reduce MUI size by using @swc/plugin-transform-imports (#169) (f5739d6)

2.13.1 (2023-01-26)

Bug Fixes

2.13.0 (2023-01-14)

Features

  • ui: replace triple dots (...) with ellipsis (…) (#165) (6e3f1cf)

Bug Fixes

2.12.5 (2023-01-11)

Bug Fixes

  • move eslint related deps to devDependencies (#142) (7e2705d)
  • remove workspaces in package.json before release (#143) (e3723c1)

2.12.4 (2023-01-01)

Bug Fixes

  • cannot resolve @textea/dev-kit/utils (#134) (2b7abc8)

2.12.3 (2022-12-26)

Bug Fixes

2.12.2 (2022-12-24)

Bug Fixes

2.12.1 (2022-12-24)

Bug Fixes

2.12.0 (2022-12-05)

Features

  • collapse all empty iterables and disable expanding them (#123) (105b002)
  • invert logic for showing dots (#122) (0e7292d)

2.11.2 (2022-11-28)

Bug Fixes

  • show three dots only on collapsed strings (#118) (aca110e)

2.11.1 (2022-11-09)

Bug Fixes

2.11.0 (2022-11-07)

Features

2.10.0 (2022-10-17)

Features

2.9.1 (2022-10-10)

Bug Fixes

  • remove scripts when publishing (45d9cf9)

2.9.0 (2022-10-06)

Features

2.8.1 (2022-10-04)

Bug Fixes

2.8.0 (2022-10-02)

Features

  • support props.collapseStringsAfterLength with false (#97) (5c611a2)

2.7.4 (2022-10-02)

Bug Fixes

2.7.3 (2022-09-24)

Bug Fixes

  • add compare function in baseCellType Editor (53bb796)

2.7.2 (2022-09-24)

Bug Fixes

  • disable ssr in function inspect (8a303f2)

2.7.1 (2022-09-23)

Bug Fixes

  • browser field cause vite build fail (#85) (3dd6842)
  • example: image url match (19fd4eb)
  • throw error if change 'proto' (209788e)

2.7.0 (2022-09-23)

Features

2.6.0 (2022-09-23)

Features

Bug Fixes

2.5.3 (2022-09-22)

Bug Fixes

2.5.2 (2022-09-22)

Bug Fixes

  • set editable to false by default (#69) (66c8d68)

2.5.1 (2022-09-22)

Bug Fixes

  • type registry runs multiple times (#67) (03761ed)

2.5.0 (2022-09-22)

Features

  • add helper function createDataType (#60) (8c626cf)
  • backport support for props.displayDataTypes (#63) (fa10c9e)

Bug Fixes

  • move type registry into component state (#64) (3e0fdd6)

2.4.1 (2022-09-22)

Bug Fixes

2.4.0 (2022-09-22)

Features

Bug Fixes

  • example: add netlify badge (60d1cc7)

2.3.1 (2022-09-22)

Bug Fixes

  • style add padding to null and undefined (#50) (5f5884f)

2.3.0 (2022-09-21)

Features

  • backport support for props.quotesOnKeys and props.sortKeys (#48) (6b2eb14)

2.2.4 (2022-09-21)

Bug Fixes

  • ignore error when key of Map is an object (4af9609)

2.2.3 (2022-09-21)

Bug Fixes

2.2.2 (2022-09-21)

Bug Fixes

  • missing props.defaultInspectDepth (#40) (0b04cd7)

2.2.1 (2022-09-21)

Documentation

2.2.0 (2022-09-20)

Features

Bug Fixes

  • add license in package.json (3c35865)

2.1.0 (2022-09-20)

Features

  • support base16 on props.theme (1c7e127)

2.0.0 (2022-09-20)

⚠ BREAKING CHANGES

  • remove react-lifecycles-compat
  • component ObjectKeyModal (#6)

Features

Bug Fixes

Code Refactoring

  • component ObjectKeyModal (#6) (5c572d9)
  • remove react-lifecycles-compat (9ad888e)

Build System

1.24.4 (2022-08-23)

Bug Fixes

  • rename class into className (2a2cfe3)

1.24.3 (2022-08-23)

Bug Fixes

  • ignore postinstall when publish (21c5148)