# mac-s-g/react-json-view

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/mac-s-g-react-json-view).**

3,665 stars · 502 forks · JavaScript · mit

## Links

- GitHub: https://github.com/mac-s-g/react-json-view
- Homepage: https://mac-s-g.github.io/react-json-view/demo/dist/
- awesome-repositories: https://awesome-repositories.com/repository/mac-s-g-react-json-view.md

## Topics

`json` `json-inspector` `json-tree` `json-viewer` `json-visualization` `react`

## Description

This project is a React component for visualizing, exploring, and editing JSON data structures through an interactive, tree-based user interface. It renders complex JSON arrays and objects in a responsive browser interface that supports collapsing and expanding nodes.

The utility functions as an interactive editor, allowing users to modify, add, or delete keys and values within JSON objects graphically rather than through raw text files. It includes a clipboard manager for copying specific objects or arrays from the visualized tree directly to the system clipboard.

The component supports theme customization and real-time data management, including the ability to validate new values during the editing process.

## Tags

### Data & Databases

- [JSON Editors](https://awesome-repositories.com/f/data-databases/json-editors.md) — Provides a graphical interface for viewing, editing, and manipulating complex JSON data structures. ([source](https://cdn.jsdelivr.net/gh/mac-s-g/react-json-view@master/README.md))
- [JSON Object Inspection](https://awesome-repositories.com/f/data-databases/json-document-stores/json-object-inspection.md) — Renders JSON arrays and objects in a responsive interface for visual inspection and debugging. ([source](https://cdn.jsdelivr.net/gh/mac-s-g/react-json-view@master/README.md))
- [JSON Entry Management](https://awesome-repositories.com/f/data-databases/json-entry-management.md) — Provides an interactive interface for adding new keys and deleting existing entries from JSON structures. ([source](https://mac-s-g.github.io/react-json-view/demo/dist/))
- [JSON Structure Management](https://awesome-repositories.com/f/data-databases/json-structure-management.md) — Provides a programmable interface for adding, deleting, and updating entries within JSON data structures.

### Development Tools & Productivity

- [JSON Editors](https://awesome-repositories.com/f/development-tools-productivity/json-editors.md) — Modifying JSON keys and values through a visual interface instead of editing raw text files.
- [Debugging and Inspection Tools](https://awesome-repositories.com/f/development-tools-productivity/debugging-profiling-testing/debugging-diagnostics/debugging-inspection-tools/debugging-and-inspection-tools.md) — Serves as a tool for inspecting and validating API responses and configuration files during development.

### User Interface & Experience

- [Real-Time Data Editors](https://awesome-repositories.com/f/user-interface-experience/real-time-data-editors.md) — The product enables updating data entries directly within the view via keyboard shortcuts or clicks to change keys and values in real time. ([source](https://mac-s-g.github.io/react-json-view/demo/dist/))
- [Recursive Components](https://awesome-repositories.com/f/user-interface-experience/recursive-components.md) — Uses self-referential components to recursively render deeply nested JSON objects and arrays.
- [CSS Variable Theming](https://awesome-repositories.com/f/user-interface-experience/css-variable-theming.md) — Provides a theming system that maps configuration objects to native CSS variables for dynamic styling.
- [Tree Node State Controls](https://awesome-repositories.com/f/user-interface-experience/tree-node-state-controls.md) — Manages the open or collapsed state of tree nodes to control the visibility of child elements.

### Web Development

- [JSON View Components](https://awesome-repositories.com/f/web-development/json-view-components.md) — Ships a browser component for visualizing and exploring JSON structures via an interactive tree interface.

### Software Engineering & Architecture

- [Runtime Value Validations](https://awesome-repositories.com/f/software-engineering-architecture/static-type-checkers/validation-logic/runtime-value-validations.md) — Executes user-defined functions during editing to ensure new JSON values remain structurally valid.