@dataxpdtn/mui-json-viewer

Overview

Makes data visualization a breeze!

@dataxpdtn/mui-json-viewer allows you to display JSON data in a readable and user-friendly format. But it’s not just limited to JSON - you can use it to view ANY kind of data. The library is highly customizable and supports 100% TypeScript, making it easy to modify and tailor to your specific needs.

Getting Started

Installation

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

npm

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

yarn

yarn add @dataxpdtn/mui-json-viewer @mui/material @emotion/react @emotion/styled

pnpm

pnpm add @dataxpdtn/mui-json-viewer @mui/material @emotion/react @emotion/styled

You can also use it directly from a CDN:

index.html


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

Basic Example


import { JsonViewer } from '@dataxpdtn/mui-json-viewer'
 
const object = {
  /* my json object */
}
const Component = () => <JsonViewer value={object} />