@textea/json-viewer
Advanced tools
@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 ✅
Object, Array, primitive types, and even Map and Set.@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
<!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>
Here is a basic example:
import { JsonViewer } from '@textea/json-viewer'
const object = {
/* my json object */
}
const Component = () => <JsonViewer value={object} />
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]} />
Please refer to Styling and Theming
This package is originally based on mac-s-g/react-json-view.
Also thanks open source projects that make this possible.
Netlify lets us distribute the site.
This project is licensed under the terms of the MIT license.
FAQs
Interactive Json Viewer, but not only a json viewer
The npm package @textea/json-viewer receives a total of 42,414 weekly downloads. As such, @textea/json-viewer popularity was classified as popular.
We found that @textea/json-viewer demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
AI-generated slop reports are making bug bounty triage harder, wasting maintainer time, and straining trust in vulnerability disclosure programs.
Research
Security News
The Socket Research team investigates a malicious Python package disguised as a Discord error logger that executes remote commands and exfiltrates data via a covert C2 channel.
Research
Socket uncovered npm malware campaign mimicking popular Node.js libraries and packages from other ecosystems; packages steal data and execute remote code.