@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 91,841 weekly downloads. As such, @textea/json-viewer popularity was classified as popular.
We found that @textea/json-viewer demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 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.
Research
A brand-squatted TanStack npm package used postinstall scripts to steal .env files and exfiltrate developer secrets to an attacker-controlled endpoint.
Research
Compromised SAP CAP npm packages download and execute unverified binaries, creating urgent supply chain risk for affected developers and CI/CD environments.
Company News
Socket has acquired Secure Annex to expand extension security across browsers, IDEs, and AI tools.