Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: about 1 month 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 (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-28T03:54:16.000Z (about 2 months ago)
- Last Synced: 2024-10-29T22:50:27.321Z (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: 4.22 MB
- Stars: 454
- Watchers: 2
- Forks: 36
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-json - @textea/json-viewer - A React component for JSON viewer. (React) (Frontend components)
README
# @textea/json-viewer
[](https://www.npmjs.com/package/@textea/json-viewer)
[](https://www.npmjs.com/package/@textea/json-viewer)
[](https://github.com/TexteaInc/json-viewer/blob/main/LICENSE)
[](https://codecov.io/gh/TexteaInc/json-viewer)
[](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** ✅
[](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 = () =>
```
[see the full code](docs/pages/full/index.tsx)
## Theme
Please refer to [Styling and Theming](https://viewer.textea.io/how-to/styling)
## 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/) lets us distribute the [site](https://viewer.textea.io).
## LICENSE
This project is licensed under the terms of the [MIT license](LICENSE).