{"id":13594541,"url":"https://github.com/TexteaInc/json-viewer","last_synced_at":"2025-04-09T07:32:52.054Z","repository":{"id":56705819,"uuid":"523772558","full_name":"TexteaInc/json-viewer","owner":"TexteaInc","description":"not only a JSON viewer","archived":false,"fork":false,"pushed_at":"2024-10-28T03:54:16.000Z","size":4423,"stargazers_count":454,"open_issues_count":20,"forks_count":36,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-10-29T22:50:27.321Z","etag":null,"topics":["data-editor","data-viewer","json-editor","json-viewer","react","reactjs","tree-editor","tree-viewer","typescript"],"latest_commit_sha":null,"homepage":"https://viewer.textea.io","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TexteaInc.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["TexteaInc"]}},"created_at":"2022-08-11T15:21:16.000Z","updated_at":"2024-10-28T11:18:58.000Z","dependencies_parsed_at":"2023-10-16T23:50:13.723Z","dependency_job_id":"d19b3a47-5f3f-4368-a629-9172264c43e6","html_url":"https://github.com/TexteaInc/json-viewer","commit_stats":{"total_commits":465,"total_committers":23,"mean_commits":"20.217391304347824","dds":0.5913978494623655,"last_synced_commit":"f2a5636bcd8ee6c567f805d979366f8fb80b950b"},"previous_names":[],"tags_count":79,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TexteaInc%2Fjson-viewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TexteaInc%2Fjson-viewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TexteaInc%2Fjson-viewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TexteaInc%2Fjson-viewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TexteaInc","download_url":"https://codeload.github.com/TexteaInc/json-viewer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222782609,"owners_count":17036984,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["data-editor","data-viewer","json-editor","json-viewer","react","reactjs","tree-editor","tree-viewer","typescript"],"created_at":"2024-08-01T16:01:35.320Z","updated_at":"2024-11-06T16:31:31.086Z","avatar_url":"https://github.com/TexteaInc.png","language":"TypeScript","funding_links":["https://github.com/sponsors/TexteaInc"],"categories":["TypeScript","Frontend components"],"sub_categories":[],"readme":"# @textea/json-viewer\n\n[![npm](https://img.shields.io/npm/v/@textea/json-viewer)](https://www.npmjs.com/package/@textea/json-viewer)\n[![npm](https://img.shields.io/npm/dm/@textea/json-viewer.svg)](https://www.npmjs.com/package/@textea/json-viewer)\n[![npm](https://img.shields.io/npm/l/@textea/json-viewer)](https://github.com/TexteaInc/json-viewer/blob/main/LICENSE)\n[![codecov](https://codecov.io/gh/TexteaInc/json-viewer/branch/main/graph/badge.svg?token=r32mzVhrRl)](https://codecov.io/gh/TexteaInc/json-viewer)\n[![Netlify Status](https://api.netlify.com/api/v1/badges/c2aa0ee1-979b-4512-85d2-f27e63897df0/deploy-status)](https://viewer.textea.io)\n\n`@textea/json-viewer` is a React component that can be used to view and display any kind of data, not just JSON.\n\n~~Json Viewer?~~\n**ANY Data Viewer** ✅\n\n[![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)\n\n## Features 🚀\n\n- 🦾 100% TypeScript\n- 🎨 Customizable: Key, value, editable, copy, select... Anything you can think of!\n- 🌈 Theme support: light or dark, or use [Base16](https://github.com/chriskempson/base16) themes.\n- ⚛️ SSR Ready\n- 📋 Copy to Clipboard\n- 🔍 Inspect anything: `Object`, `Array`, primitive types, and even `Map` and `Set`.\n- 📊 Metadata preview: Total items, length of string...\n- ✏️ Editor: Comes with an editor for basic types, which you can also customize to fit your use case.\n\n## Installation\n\n`@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.\n\n```sh\nnpm install @textea/json-viewer @mui/material @emotion/react @emotion/styled\n```\n\n### CDN\n\n```html\n\u003c!doctype html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"json-viewer\"\u003e\u003c/div\u003e\n    \u003cscript src=\"https://cdn.jsdelivr.net/npm/@textea/json-viewer@3\"\u003e\u003c/script\u003e\n    \u003cscript\u003e\n      new JsonViewer({\n        value: {\n          /* ... */\n        }\n      }).render('#json-viewer')\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Usage\n\nHere is a basic example:\n\n```jsx\nimport { JsonViewer } from '@textea/json-viewer'\n\nconst object = {\n  /* my json object */\n}\nconst Component = () =\u003e \u003cJsonViewer value={object} /\u003e\n```\n\n### Customization\n\nYou 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:\n\n```jsx\nimport { JsonViewer, defineDataType } from '@textea/json-viewer'\n\nconst object = {\n  image: 'https://i.imgur.com/1bX5QH6.jpg'\n  // ... other values\n}\n\n// Let's define a data type for image\nconst imageDataType = defineDataType({\n  is: (value) =\u003e typeof value === 'string' \u0026\u0026 value.startsWith('https://i.imgur.com'),\n  Component: (props) =\u003e \u003cImage height={50} width={50} src={props.value} alt={props.value} /\u003e\n})\n\nconst Component = () =\u003e \u003cJsonViewer value={object} valueTypes={[imageDataType]} /\u003e\n```\n\n![Avatar Preview](public/avatar-preview.png)\n\n[see the full code](docs/pages/full/index.tsx)\n\n## Theme\n\nPlease refer to [Styling and Theming](https://viewer.textea.io/how-to/styling)\n\n![Ocean Theme Preview](public/ocean-theme.png)\n\n## Contributors\n\n\u003ca href=\"https://github.com/TexteaInc/json-viewer/graphs/contributors\"\u003e\u003cimg src=\"https://opencollective.com/json-viewer/contributors.svg?width=890\u0026button=false\" /\u003e\u003c/a\u003e\n\n## Acknowledge\n\nThis package is originally based on [mac-s-g/react-json-view](https://github.com/mac-s-g/react-json-view).\n\nAlso thanks open source projects that make this possible.\n\n## Sponsoring services\n\n![Netlify](https://www.netlify.com/v3/img/components/full-logo-light.svg)\n\n[Netlify](https://www.netlify.com/) lets us distribute the [site](https://viewer.textea.io).\n\n## LICENSE\n\nThis project is licensed under the terms of the [MIT license](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTexteaInc%2Fjson-viewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FTexteaInc%2Fjson-viewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTexteaInc%2Fjson-viewer/lists"}