https://github.com/TexteaInc/json-viewer

not only a JSON viewer
https://github.com/TexteaInc/json-viewer

data-editor data-viewer json-editor json-viewer react reactjs tree-editor tree-viewer typescript

Last synced: 12 days ago
JSON representation

not only a JSON viewer

• Host: GitHub
• URL: https://github.com/TexteaInc/json-viewer
• Owner: TexteaInc
• License: mit
• Created: 2022-08-11T15:21:16.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-04-29T03:38:37.000Z (about 2 months ago)
• Last Synced: 2024-05-01T11:34:01.253Z (about 2 months ago)
• Topics: data-editor, data-viewer, json-editor, json-viewer, react, reactjs, tree-editor, tree-viewer, typescript
• Language: TypeScript
• Homepage: https://viewer.textea.io
• Size: 2.98 MB
• Stars: 363
• Watchers: 2
• Forks: 29
• Open Issues: 19
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Lists

• awesome-stars - TexteaInc/json-viewer - not only a JSON viewer (TypeScript)
• awesome-json - @textea/json-viewer - A React component for JSON viewer. (React) (Frontend components)

README

        
# @textea/json-viewer

[![npm](https://img.shields.io/npm/v/@textea/json-viewer)](https://www.npmjs.com/package/@textea/json-viewer)

[![npm](https://img.shields.io/npm/dm/@textea/json-viewer.svg)](https://www.npmjs.com/package/@textea/json-viewer)

[![npm](https://img.shields.io/npm/l/@textea/json-viewer)](https://github.com/TexteaInc/json-viewer/blob/main/LICENSE)

[![codecov](https://codecov.io/gh/TexteaInc/json-viewer/branch/main/graph/badge.svg?token=r32mzVhrRl)](https://codecov.io/gh/TexteaInc/json-viewer)

[![Netlify Status](https://api.netlify.com/api/v1/badges/c2aa0ee1-979b-4512-85d2-f27e63897df0/deploy-status)](https://viewer.textea.io)

`@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](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/textea-json-viewer-v3-b4wgxq?file=pages%2Findex.js)

## Features 🚀

- 🦾 100% TypeScript

- 🎨 Customizable: Key, value, editable, copy, select... Anything you can think of!

- 🌈 Theme support: light or dark, or use [Base16](https://github.com/chriskempson/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](https://mui.com/) as the base component library, so you need to install it and its peer dependencies first.

```sh

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

```

### CDN

```html

  

    


    

    

      new JsonViewer({

        value: {

          /* ... */

        }

      }).render('#json-viewer')

    

  


```

## Usage

Here is a basic example:

```jsx

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

const object = {

  /* my json object */

}

const Component = () => 

```

### 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:

```jsx

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) => 

})

const Component = () => 

```

![Avatar Preview](public/avatar-preview.png)

[see the full code](docs/pages/full/index.tsx)

## Theme

Please refer to [Styling and Theming](https://viewer.textea.io/how-to/styling)

![Ocean Theme Preview](public/ocean-theme.png)

## Contributors



## Acknowledge

This package is originally based on [mac-s-g/react-json-view](https://github.com/mac-s-g/react-json-view).

Also thanks open source projects that make this possible.

## Sponsoring services

![Netlify](https://www.netlify.com/v3/img/components/full-logo-light.svg)

[Netlify](https://www.netlify.com/) lets us distribute the [site](https://viewer.textea.io).

## LICENSE

This project is licensed under the terms of the [MIT license](LICENSE).