Home

Awesome

@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 🚀

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

<a href="https://github.com/TexteaInc/json-viewer/graphs/contributors"><img src="https://opencollective.com/json-viewer/contributors.svg?width=890&button=false" /></a>

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.