Introduction

@textea/json-viewer

Overview

Makes data visualization a breeze!

@textea/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

@textea/json-viewer is using Material-UI (opens in a new tab) 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

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/@textea/json-viewer@3"></script>
 
    <script>
      new JsonViewer({
        value: {
          /* ... */
        }
      }).render('#json-viewer')
    </script>
  </body>
</html>

Basic Example

import { JsonViewer } from '@textea/json-viewer'
 
const object = {
  /* my json object */
}
const Component = () => <JsonViewer value={object} />
"root"
:
{6 Items
"string"
:
string
"this is a string"
"number"
:
int
1
"float"
:
float
114.514
"bigint"
:
bigint
10086n
"object"
:
{1 Items
"a"
:
undefined
}
"map"
:
{2 Items (Map)
"oh no"
:
NULL
"birth"
:
date
Sun, Dec 17, 1995, 03:24 AM
}
}

Advanced Example


DEMO

Check the source code (opens in a new tab) for more details.

API

See the documentation below for a complete reference to all of the props available

Contributors

Acknowledge

This package is originally based on mac-s-g/react-json-view (opens in a new tab).

Also thanks open source projects that make this possible.

Sponsoring services

Netlify

Netlify (opens in a new tab) lets us distribute the site (opens in a new tab).

API Reference