As a React developer, I’ve worked on countless projects that involve handling JSON data. Whether it’s configuration files, API responses, or user-generated content, JSON is everywhere. Editing JSON data directly in a React app can be tricky without a proper editor component. That’s why I want to share my firsthand experience on how to use a React JSON editor component effectively.
In this tutorial, I’ll walk you through a practical example using a popular React JSON editor library. I’ll cover different methods to integrate it, explain the pros and cons, and provide a complete working example.
Use a JSON Editor Component in React
Working with raw JSON strings is error-prone and unfriendly for users. Manually typing JSON often leads to syntax errors and frustration. A JSON editor component provides a visual interface that helps users view, edit, and validate JSON data easily.
From my experience, adding a JSON editor enhances the user experience significantly, especially in admin dashboards or configuration tools where users need to tweak JSON settings.
Popular React JSON Editor Libraries
There are several libraries available, but two stand out based on my usage:
- jsoneditor-react
This is a React wrapper around the popular JSONEditor library. It supports tree view, code view, and text view modes, making it flexible. - json-edit-react
A lightweight React component focused on editing and viewing JSON objects with customizable text/code editors.
For this tutorial, I’ll focus on jsoneditor-react because it’s feature-rich and widely used.
Method 1: Basic Integration of jsoneditor-react
This is the quickest way to get started. You just install the package, import the component, and pass your JSON data as a prop.
Step 1: Install the package
npm install jsoneditor-react jsoneditorStep 2: Basic Usage Example
Here’s a simple React component that loads some US state data in JSON format and lets the user edit it.
import React, { useState } from 'react';
import { JsonEditor as Editor } from 'jsoneditor-react';
import 'jsoneditor-react/es/editor.min.css';
const USStatesEditor = () => {
const [json, setJson] = useState({
states: [
{ name: 'California', abbreviation: 'CA', capital: 'Sacramento' },
{ name: 'Texas', abbreviation: 'TX', capital: 'Austin' },
{ name: 'New York', abbreviation: 'NY', capital: 'Albany' },
],
});
const handleChange = (updatedJson) => {
setJson(updatedJson);
};
return (
<div>
<h2>Edit US States JSON Data</h2>
<Editor
value={json}
onChange={handleChange}
mode="tree"
navigationBar={false}
statusBar={false}
/>
<pre>{JSON.stringify(json, null, 2)}</pre>
</div>
);
};
export default USStatesEditor;You can see the output in the screenshot below.
- We use useState to hold the JSON data.
- The Editor component renders the JSON in a tree view.
- When users make changes, handleChange updates the state.
- The updated JSON is displayed below for clarity.
This method is perfect for quick prototypes or admin tools where users need to manipulate JSON visually.
Method 2: Advanced Integration with Custom Text Editor
Sometimes, you want to provide a more sophisticated code editor experience, like syntax highlighting, auto-completion, or error detection. jsoneditor-react allows you to pass a custom text editor component.
For example, you can integrate Monaco Editor (the editor behind VS Code) for a powerful JSON editing experience.
Step 1: Install Monaco Editor dependencies
npm install @monaco-editor/reactStep 2: Create a Custom Editor Component
import React from 'react';
import Editor from '@monaco-editor/react';
const MonacoJsonEditor = ({ value, onChange }) => {
return (
<Editor
height="400px"
defaultLanguage="json"
value={JSON.stringify(value, null, 2)}
onChange={(code) => {
try {
const parsed = JSON.parse(code);
onChange(parsed);
} catch {
// Ignore JSON parse errors for now
}
}}
options={{
minimap: { enabled: false },
formatOnType: true,
formatOnPaste: true,
}}
/>
);
};
export default MonacoJsonEditor;Step 3: Use it inside jsoneditor-react
import React, { useState } from 'react';
import { JsonEditor as Editor } from 'jsoneditor-react';
import MonacoJsonEditor from './MonacoJsonEditor';
const USStatesAdvancedEditor = () => {
const [json, setJson] = useState({
states: [
{ name: 'California', abbreviation: 'CA', capital: 'Sacramento' },
{ name: 'Texas', abbreviation: 'TX', capital: 'Austin' },
{ name: 'New York', abbreviation: 'NY', capital: 'Albany' },
],
});
return (
<div>
<h2>Advanced US States JSON Editor</h2>
<Editor
value={json}
onChange={setJson}
mode="code"
TextEditor={MonacoJsonEditor}
/>
<pre>{JSON.stringify(json, null, 2)}</pre>
</div>
);
};
export default USStatesAdvancedEditor;You can see the output in the screenshot below.
- Monaco Editor is embedded as the text editor inside the JSON editor.
- It provides syntax highlighting and formatting.
- We parse the JSON input on every change to update the React state.
This method is ideal for applications where users prefer code-like editing with advanced features.
Method 3: Use json-edit-react for Lightweight Editing
If you want something simpler and more lightweight, json-edit-react is a good alternative. It’s less feature-rich but easier to customize.
Step 1: Install the package
npm install json-edit-reactStep 2: Basic Usage
import React, { useState } from 'react';
import JsonEdit from 'json-edit-react';
const USStatesSimpleEditor = () => {
const [json, setJson] = useState({
states: [
{ name: 'California', abbreviation: 'CA', capital: 'Sacramento' },
{ name: 'Texas', abbreviation: 'TX', capital: 'Austin' },
{ name: 'New York', abbreviation: 'NY', capital: 'Albany' },
],
});
return (
<div>
<h2>Simple US States JSON Editor</h2>
<JsonEdit
data={json}
onChange={setJson}
style={{ width: '100%', minHeight: '300px' }}
/>
<pre>{JSON.stringify(json, null, 2)}</pre>
</div>
);
};
export default USStatesSimpleEditor;- json-edit-react provides an easy JSON editing interface.
- It’s easy to set up and customize.
- Good for simple use cases without heavy dependencies.
Tips for Using JSON Editors in React Apps
- Validation: Always validate JSON before saving or using it. Many editors provide built-in validation.
- Performance: Large JSON objects can slow down the editor; consider pagination or lazy loading.
- User Experience: Provide clear error messages if JSON is invalid.
- Styling: Customize the editor styles to match your app’s theme for a seamless look.
Working with JSON data in React apps becomes much easier with the right editor component. From quick setups with jsoneditor-react to advanced code editing with Monaco Editor, you have options to fit your project needs.
Other React articles you may also like:
- Open Source React Component Libraries
- MUI React Component Library
- How to Import CSS Files in React Components
- Optimize React Functional Components with React.memo
I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.
