JSON Editing, Visualization, and Schema Forms in React
These libraries address three distinct challenges in handling JSON data within web applications: raw text manipulation, interactive tree visualization, and schema-driven form generation. jsoneditor and its React wrapper provide robust tools for editing raw JSON structures in text or tree modes. react-json-tree and react-json-view focus on inspecting and visualizing data, with the latter allowing light interaction. react-jsonschema-form stands apart by generating validated UI forms from JSON Schema definitions rather than editing raw JSON text. Choosing the right tool depends on whether your users need to edit code, adjust values in a tree, or fill out a structured form.
Npm Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
JSON Editing, Visualization, and Schema Forms in React
Handling JSON data in modern web applications usually falls into three categories: editing raw text, visualizing structures for inspection, or collecting user input via forms. The packages jsoneditor, jsoneditor-react, react-json-editor-ajrm, react-json-tree, react-json-view, and react-jsonschema-form each tackle these problems differently. Let's break down how they work and where they fit in your architecture.
🛠️ Core Purpose: Editor vs Viewer vs Form
The first decision is understanding what the user actually needs to do. Are they writing code, tweaking values, or filling out a form?
jsoneditor is a vanilla JavaScript library that acts as a full-featured IDE for JSON. It supports switching between code, tree, and text modes.
// jsoneditor: Initialize vanilla instance
const container = document.getElementById('jsoneditor');
const options = { mode: 'tree' };
const editor = new JSONEditor(container, options);
editor.set({ key: 'value' });
jsoneditor-react wraps the vanilla library for React apps, keeping the same heavy-duty capabilities.
// jsoneditor-react: React component wrapper
import { JSONEditor } from 'jsoneditor-react';
function App() {
return <JSONEditor json={{ key: 'value' }} mode="tree" />;
}
react-json-editor-ajrm is a lightweight input component that validates JSON text as you type.
// react-json-editor-ajrm: Simple text input
import JSONInput from 'react-json-editor-ajrm';
function App() {
return <JSONInput placeholder={{ key: 'value' }} width="400px" />;
}
react-json-tree is strictly for visualization. It renders a collapsible tree but does not support editing.
// react-json-tree: Read-only inspection
import JSONTree from 'react-json-tree';
function App() {
return <JSONTree data={{ key: 'value' }} />;
}
react-json-view allows you to view and interact with data, supporting edits and node collapsing.
// react-json-view: Interactive tree
import ReactJson from 'react-json-view';
function App() {
return <ReactJson src={{ key: 'value' }} onEdit={(e) => console.log(e)} />;
}
react-jsonschema-form generates forms from a schema definition, enforcing data structure.
// react-jsonschema-form: Schema-driven form
import Form from 'react-jsonschema-form';
function App() {
const schema = { type: 'object', properties: { name: { type: 'string' } } };
return <Form schema={schema} formData={{ name: 'Alice' }} />;
}
⚙️ Integration & Setup Complexity
Setup varies from simple component drops to managing external instances.
jsoneditorrequires manual DOM management. You must create a container and initialize the editor in auseEffecthook if using React.jsoneditor-reactsimplifies this by handling the lifecycle internally, but you still deal with the heavy vanilla dependency.react-json-editor-ajrmis a pure React component with no external DOM dependencies, making it easy to drop into forms.react-json-treeandreact-json-vieware standard components that render based on props.react-jsonschema-formrequires you to define a schema object first, which adds upfront design work but pays off in validation.
✍️ Editing Capabilities: Text vs Tree vs Form
How the user interacts with the data is the biggest differentiator.
Text-Based Editing
jsoneditor (in code mode) and react-json-editor-ajrm let users type raw JSON. This is powerful for developers but risky for end users.
// jsoneditor: Code mode allows raw text
const options = { mode: 'code' };
const editor = new JSONEditor(container, options);
// react-json-editor-ajrm: Validates while typing
<JSONInput placeholder={data} onChange={(res) => console.log(res.jsObject)} />
Tree-Based Editing
jsoneditor (in tree mode), jsoneditor-react, and react-json-view allow users to click and edit values without touching syntax.
// jsoneditor-react: Tree mode editing
<JSONEditor json={data} mode="tree" onChange={handleChange} />
// react-json-view: Click to edit values
<ReactJson src={data} onEdit={(edit) => updateState(edit.updated_src)} />
Form-Based Editing
react-jsonschema-form hides the JSON structure entirely, presenting standard HTML inputs.
// react-jsonschema-form: Standard inputs generated from schema
<Form schema={schema} uiSchema={uiSchema} onChange={handleChange} />
✅ Validation & Schema Support
Data integrity is critical when users can modify structures.
jsoneditor and jsoneditor-react have built-in JSON syntax validation. They will show errors if the user types invalid JSON in code mode.
// jsoneditor: Built-in syntax validation
// Shows error icon in UI if JSON is invalid
const editor = new JSONEditor(container, { mode: 'code' });
react-json-editor-ajrm highlights syntax errors inline as you type, making it safer than a standard textarea.
// react-json-editor-ajrm: Inline error highlighting
<JSONInput placeholder={data} colors={{ error: '#f00' }} />
react-jsonschema-form goes further by validating data against a schema (e.g., ensuring a field is a number, not a string).
// react-jsonschema-form: Schema validation
// Prevents submission if data doesn't match schema
<Form schema={schema} onError={(errors) => console.log(errors)} />
react-json-view and react-json-tree generally assume the input data is valid JSON and focus on rendering rather than validation.
// react-json-view: No built-in schema validation
// Relies on parent component to validate src prop
<ReactJson src={data} />
🌐 Real-World Scenarios
Scenario 1: API Debugging Tool
You are building an internal tool for developers to inspect API responses.
- ✅ Best choice:
react-json-vieworreact-json-tree - Why? You need to collapse large objects and copy values quickly.
react-json-viewadds the ability to tweak values and see the result immediately.
// react-json-view: Ideal for API explorers
<ReactJson src={apiResponse} collapsed={true} displayDataTypes={false} />
Scenario 2: Configuration Management
Admin users need to edit complex configuration files stored as JSON.
- ✅ Best choice:
jsoneditor-react - Why? Users need the safety of tree mode but the power of code mode for bulk edits. Validation is crucial here.
// jsoneditor-react: Config editor
<JSONEditor json={config} mode="tree" modes={["tree", "code"]} />
Scenario 3: User Onboarding Form
You need to collect user profile data and save it as JSON in your database.
- ✅ Best choice:
react-jsonschema-form - Why? You don't want users seeing JSON. You want a clean form with labels, validation, and error messages.
// react-jsonschema-form: User facing form
<Form schema={profileSchema} formData={userData} onSubmit={submit} />
Scenario 4: Lightweight Settings Input
A simple text area in a settings panel where advanced users paste JSON snippets.
- ✅ Best choice:
react-json-editor-ajrm - Why? It's lighter than
jsoneditorand provides immediate feedback if the JSON is broken.
// react-json-editor-ajrm: Settings snippet
<JSONInput placeholder={defaultSettings} height="200px" />
📊 Summary Table
| Package | Type | Editing | Validation | Best For |
|---|---|---|---|---|
jsoneditor | Vanilla Library | Text & Tree | Syntax | Complex, non-React apps |
jsoneditor-react | React Wrapper | Text & Tree | Syntax | React apps needing full editor |
react-json-editor-ajrm | Input Component | Text Only | Syntax | Simple JSON text inputs |
react-json-tree | Viewer | Read-Only | None | Debugging, logs |
react-json-view | Interactive Viewer | Light Edit | None | Dashboards, API tools |
react-jsonschema-form | Form Generator | Form Fields | Schema | User data collection |
💡 Architectural Recommendations
For Developer Tools: Use react-json-view. It strikes the best balance between performance and interactivity for inspecting data. If you need strict read-only performance, switch to react-json-tree.
For Admin Configuration: Use jsoneditor-react. The ability to switch between tree and code modes is invaluable for managing complex configs. Be aware that it brings in a larger dependency bundle.
For End-User Input: Use react-jsonschema-form (or the modern @rjsf/core). Never let end users edit raw JSON. The package react-jsonschema-form is the legacy name; for new projects, evaluate @rjsf/core for active maintenance, but the API remains similar.
For Simple Snippets: Use react-json-editor-ajrm. It is the lightest option for text-based JSON entry with validation.
Final Thought: These tools are not interchangeable. react-json-view cannot replace react-jsonschema-form if you need schema validation. jsoneditor is overkill for a simple text input. Match the tool to the user's mental model — are they editing code, or filling out a form?
How to Choose: react-json-view vs react-json-tree vs jsoneditor vs react-json-editor-ajrm vs react-jsonschema-form vs jsoneditor-react
- react-json-view:
Choose
react-json-viewwhen you need an interactive viewer that allows users to collapse nodes and edit values directly in a tree structure. It is widely used in dashboards and API explorers where a balance between visualization and light editing is needed. - react-json-tree:
Choose
react-json-treeif your primary goal is read-only inspection and debugging of large JSON objects with customizable themes. It is perfect for developer tools or logs where interaction is not required, and performance with deep nesting is critical. - jsoneditor:
Choose
jsoneditorif you are building a vanilla JavaScript application or need the most feature-complete editor with support for text, tree, and code modes. It is ideal for complex use cases where you need full control over the editor instance and do not want a React-specific wrapper abstraction. - react-json-editor-ajrm:
Choose
react-json-editor-ajrmfor lightweight scenarios where you need a simple input field that validates JSON as you type. It is suitable for admin panels or settings pages where users need to edit small JSON snippets without the complexity of a full tree viewer. - react-jsonschema-form:
Choose
react-jsonschema-form(or its modern fork@rjsf/core) when you have a JSON Schema and need to generate a validated form UI automatically. Use this for user input collection where data structure must be enforced, rather than allowing users to edit raw JSON. - jsoneditor-react:
Choose
jsoneditor-reactif you need the full power of thejsoneditorlibrary but require seamless integration into a React component tree. It is the best fit when you need mode switching (tree vs code) and robust validation within a React ecosystem.
Popular Comparisons
README for react-json-view
react-json-view
RJV is a React component for displaying and editing javascript arrays and JSON objects.
This component provides a responsive interface for displaying arrays or JSON in a web browser. NPM offers a distribution of the source that's transpiled to ES5; so you can include this component with any web-based javascript application.
Check out the Interactive Demo
Implementation Example
// import the react-json-view component
import ReactJson from 'react-json-view'
// use the component in your app!
<ReactJson src={my_json_object} />
Output Examples
Default Theme
Hopscotch Theme, with Triangle Icons:
Installation Instructions
Install this component with NPM.
npm install --save react-json-view
Or add to your package.json config file:
"dependencies": {
"react-json-view": "latest"
}
Props
| Name | Type | Default | Description |
|---|---|---|---|
src | JSON Object | None | This property contains your input JSON |
name | string or false | "root" | Contains the name of your root node. Use null or false for no name. |
theme | string | "rjv-default" | RJV supports base-16 themes. Check out the list of supported themes in the demo. A custom "rjv-default" theme applies by default. |
style | object | {} | Style attributes for react-json-view container. Explicit style attributes will override attributes provided by a theme. |
iconStyle | string | "circle" | Style of expand/collapse icons. Accepted values are "circle", triangle" or "square". |
indentWidth | integer | 4 | Set the indent-width for nested objects |
collapsed | boolean or integer | false | When set to true, all nodes will be collapsed by default. Use an integer value to collapse at a particular depth. |
collapseStringsAfterLength | integer | false | When an integer value is assigned, strings will be cut off at that length. Collapsed strings are followed by an ellipsis. String content can be expanded and collapsed by clicking on the string value. |
shouldCollapse | (field)=>{} | false | Callback function to provide control over what objects and arrays should be collapsed by default. An object is passed to the callback containing name, src, type ("array" or "object") and namespace. |
groupArraysAfterLength | integer | 100 | When an integer value is assigned, arrays will be displayed in groups by count of the value. Groups are displayed with bracket notation and can be expanded and collapsed by clicking on the brackets. |
enableClipboard | boolean or (copy)=>{} | true | When prop is not false, the user can copy objects and arrays to clipboard by clicking on the clipboard icon. Copy callbacks are supported. |
displayObjectSize | boolean | true | When set to true, objects and arrays are labeled with size |
displayDataTypes | boolean | true | When set to true, data type labels prefix values |
onEdit | (edit)=>{} | false | When a callback function is passed in, edit functionality is enabled. The callback is invoked before edits are completed. Returning false from onEdit will prevent the change from being made. see: onEdit docs |
onAdd | (add)=>{} | false | When a callback function is passed in, add functionality is enabled. The callback is invoked before additions are completed. Returning false from onAdd will prevent the change from being made. see: onAdd docs |
defaultValue | string |number |boolean |array |object | null | Sets the default value to be used when adding an item to json |
onDelete | (delete)=>{} | false | When a callback function is passed in, delete functionality is enabled. The callback is invoked before deletions are completed. Returning false from onDelete will prevent the change from being made. see: onDelete docs |
onSelect | (select)=>{} | false | When a function is passed in, clicking a value triggers the onSelect method to be called. |
sortKeys | boolean | false | set to true to sort object keys |
quotesOnKeys | boolean | true | set to false to remove quotes from keys (eg. "name": vs. name:) |
validationMessage | string | "Validation Error" | Custom message for validation failures to onEdit, onAdd, or onDelete callbacks |
displayArrayKey | boolean | true | When set to true, the index of the elements prefix values |
Features
onEdit,onAddandonDeleteprops allow users to edit thesrcvariable- Object, array, string and function values can be collapsed and expanded
- Object and array nodes display length
- Object and array nodes support a "Copy to Clipboard" feature
- String values can be truncated after a specified length
- Arrays can be subgrouped after a specified length
- Base-16 Theme Support
- When
onEditis enabled:Ctrl/Cmd+ClickEdit ModeCtrl/Cmd+EnterSubmit
Customizing Style
Stock Themes
RJV now supports base-16 themes!
You can specify a theme name or object when you instantiate your rjv component.
<ReactJson src={my_important_json} theme="monokai" />
Check out the list of supported themes in the component demo.
Monokai theme example
Solarized theme example
Use Your Own Theme
You can supply your own base-16 theme object.
To better understand custom themes, take a look at my example implementation and the base-16 theme styling guidelines.
onEdit, onAdd and onDelete Interaction
Pass callback methods to onEdit, onAdd and onDelete props. Your method will be invoked when a user attempts to update your src object.
The following object will be passed to your method:
{
updated_src: src, //new src value
name: name, //new var name
namespace: namespace, //list, namespace indicating var location
new_value: new_value, //new variable value
existing_value: existing_value, //existing variable value
}
Returning false from a callback method will prevent the src from being affected.
Contributing to the source code
Run the Dev Server
# clone this repository
git clone [email protected]:mac-s-g/react-json-view.git && cd react-json-view
# install dependencies
npm install --save-dev
# run the dev server with hot reloading
npm run dev
Webpack Dev Server should automatically open up http://localhost:2000 in your web browser. If it does not, open a browser and navigate to port 2000. The hot reloader will automatically reload when files are modified in the /src/ directory.
Run the Production Build
# run the build (note: you may need to use `sudo` priveledges to run the build successfully)
npm run build
Please add tests for your code before posting a pull request.
You can run the test suite with npm run test or npm run test:watch to automatically reload when files are modified.
Docker Tools
I recommend using docker for development because it enforces environmental consistency.
For information about contributing with Docker, see the README in ./docker.
Inspiration
I drew a ton of design ideas from react-json-tree. Thanks to the RJT contributors for putting together an awesome component!
I'm also inspired by users who come up with interesting feature requests. Reach out to me with ideas for this project or other projects you want to collaborate on. My email address is listed on my github user page.