GitHub
github.com › CarlosNZ › json-edit-react
GitHub - CarlosNZ/json-edit-react: React component for editing/viewing JSON/object data · GitHub
Pass a component to offer a custom text/code editor when editing full JSON object as text.
Starred by 616 users
Forked by 37 users
Languages TypeScript 86.8% | CSS 5.5% | Python 4.1% | JavaScript 3.4% | HTML 0.2%
npm
npmjs.com › package › json-edit-react
json-edit-react - npm
October 1, 2025 - import { JsonEditor } from 'json-edit-react' // In your React component: return ( <JsonEditor data={ jsonData } setData={ setJsonData } // optional { ...otherProps } /> ); (for end user) It's pretty self explanatory (click the "edit" icon to edit, etc.), but there are a few not-so-obvious ways of interacting with the editor: Double-click a value (or a key) to edit it ·
» npm install json-edit-react
Published Oct 01, 2025
Version 1.29.0
Author Carl Smith
Repository https://github.com/CarlosNZ/json-edit-react
Which JSON Viewer Component do you recommend since react-json-view no one maintains it anymore.
console.log(JSON.stringify(object, null, 2)) More on reddit.com
22
19
October 16, 2023JSON Viewer with Editor
Very cool. I could see using this in my admin dashboard for live updating my JSON-based application configuration. One tiny visual gripe: The default height of the text-area is too tall for single line inputs. The text-area should be the same size as the input, and grow as needed. This would also eliminate any jank seen when toggling edit mode. More on reddit.com
9
26
August 1, 2017Json (grid / table) editor
You may try https://jsonlife.github.io/json-table-editor/ More on reddit.com
8
4
May 15, 2022How would you create a JSON editor with autocomplete?
You want something like this:
https://www.npmjs.com/package/vscode-json-languageserver/v/1.3.1
Or some other language server for json. That project looks a bit stale but then again json and json-schema don't change much
More on reddit.com 2
1
August 16, 2019Videos
06:09
Build a Next.js JSON Editor Offline Web App to Format ...
04:08
Build a React.js JSON Editor Web App in Browser to Format,Validate ...
14:18
Build a React.js JSON Viewer & Editor App to Render JSON ...
04:10
Build a JSON Editor to Format, Validate & Minify JSON in Browser ...
03:43
Build a JSON Editor to Format, Validate & Minify JSON in ...
14:40
JSON Viewer App | React JS - YouTube
Carlosnz
carlosnz.github.io › json-edit-react
JSON•Edit•React
A highly-configurable React component for editing or viewing JSON/object data
npm
npmjs.com › package › react-json-editor
react-json-editor - npm
May 19, 2017 - A React dynamic form component for react using JSON-Schema.. Latest version: 0.3.0, last published: 9 years ago. Start using react-json-editor in your project by running `npm i react-json-editor`. There are 3 other projects in the npm registry ...
» npm install react-json-editor
Published May 19, 2017
Version 0.3.0
Author Ismael Abreu
npm
npmjs.com › package › jsoneditor-react
jsoneditor-react - npm
React implementation of https://github.com/josdejong/jsoneditor. Latest version: 3.1.2, last published: 4 years ago. Start using jsoneditor-react in your project by running `npm i jsoneditor-react`. There are 72 other projects in the npm registry using jsoneditor-react.
» npm install jsoneditor-react
Published Dec 17, 2021
Version 3.1.2
Author Ivan Kopeykin
Repository https://github.com/vankop/jsoneditor-react
npm
npmjs.com › package › react-json-editor-ajrm
react-json-editor-ajrm - npm
January 29, 2023 - A stylish, editor-like, modular, react component for viewing, editing, and debugging javascript object syntax!. Latest version: 2.5.14, last published: 3 years ago. Start using react-json-editor-ajrm in your project by running `npm i ...
» npm install react-json-editor-ajrm
Published Jan 29, 2023
Version 2.5.14
Author andrew.redican.mejia@gmail.com
GitHub
github.com › vankop › jsoneditor-react
GitHub - vankop/jsoneditor-react: react wrapper implementation for https://github.com/josdejong/jsoneditor
jsoneditor-react using minimalist version of jsoneditor to minimize flat bundle size, so if you want to use Ajv or Ace Editor install them as well
Starred by 277 users
Forked by 107 users
Languages JavaScript 99.8% | CSS 0.2% | JavaScript 99.8% | CSS 0.2%
CodeSandbox
codesandbox.io › s › react-json-editor-osveq
React JSON Editor - CodeSandbox
May 2, 2020 - React JSON Editor by rokki using @contentful/forma-36-react-components, @json-editor/json-editor, brace, jsoneditor, jsoneditor-react, react, react-dom, react-scripts
jsDelivr
jsdelivr.com › package › npm › react-json-editor-alt
react-json-editor-alt CDN by jsDelivr - A CDN for npm and GitHub
October 13, 2024 - A free, fast, and reliable CDN for react-json-editor-alt. The React JSON Editor is a flexible and easy-to-use library for rendering and editing JavaScript objects or JSON data in React applications.
Published Oct 06, 2024
CodeSandbox
codesandbox.io › examples › package › jsoneditor-react
jsoneditor-react examples - CodeSandbox
Use this online jsoneditor-react playground to view and fork jsoneditor-react example apps and templates on CodeSandbox.
Ismaelga
ismaelga.github.io › react-json-editor
react-json-editor - A React dynamic form component for react using JSON-Schema.
We cannot provide a description for this page right now
GitHub
github.com › constantoduol › JSONEditor
GitHub - constantoduol/JSONEditor: A react visual json editor
A react visual json editor. Contribute to constantoduol/JSONEditor development by creating an account on GitHub.
Starred by 103 users
Forked by 18 users
Languages JavaScript 99.5% | HTML 0.5% | JavaScript 99.5% | HTML 0.5%
Reddit
reddit.com › r/reactjs › which json viewer component do you recommend since react-json-view no one maintains it anymore.
r/reactjs on Reddit: Which JSON Viewer Component do you recommend since react-json-view no one maintains it anymore.
October 16, 2023 -
https://www.npmjs.com/package/react-json-view?activeTab=versions
It was last updated 3 years ago.
I am looking for a popular alternative to that.
Thanks.
Reddit
reddit.com › r/reactjs › json viewer with editor
r/reactjs on Reddit: JSON Viewer with Editor
August 1, 2017 -
I'm looking for feedback on react-json-view
it's a production-ready component for displaying and interacting with JSON objects.
Here's the Component Demo
features include:
base-16 themes
add/edit/delete nodes
clipboard enabled
clickable collapse/expand
I see this component being useful for any technical docs that allude to JSON data structures.
what would you use it for?
what features would you like to see added?
is there any reason this wouldn't be your go-to JSON and array viewer?
thank you for feedback!
Top answer 1 of 4
2
Very cool. I could see using this in my admin dashboard for live updating my JSON-based application configuration. One tiny visual gripe: The default height of the text-area is too tall for single line inputs. The text-area should be the same size as the input, and grow as needed. This would also eliminate any jank seen when toggling edit mode.
2 of 4
2
Looks great! Starred for future use
Yarn
classic.yarnpkg.com › en › package › react-json-editor
react-json-editor
Fast, reliable, and secure dependency management.
Replit Docs
docs.replit.com › extensions › examples › json-editor
Create a JSON editor
In this tutorial, we will create a JSON editor Extension with React and the react-json-view package. Our application will display a JSON file’s content and allow users to edit, add or delete properties directly from the editor.
GitHub
github.com › sujinleeme › react-json-editor
GitHub - sujinleeme/json-studio: 🖌 JSON Studio - JSON Schema Based Editor
January 29, 2023 - Visit to https://json-studio.vercel.app · Git clone this repo and run yarn && yarn start. As the initialization process is supposed to load some scripts from CDN, there is a problem with Jest (and other testing tools). It only shows "Loading..." and never gets the editor working in the test. See : suren-atoyan/monaco-react#88 ·
Starred by 151 users
Forked by 21 users
Languages TypeScript 55.2% | JavaScript 40.0% | HTML 3.1% | CSS 1.7%
GitHub
github.com › sagold › json-editor
GitHub - sagold/json-editor: headless json-editor and react implementation rendering a user form based on a JSON Schema
headless json-editor and react implementation rendering a user form based on a JSON Schema - sagold/json-editor
Starred by 11 users
Forked by 2 users
Languages TypeScript 92.0% | SCSS 3.3% | HTML 3.2% | JavaScript 1.1% | MDX 0.4% | TypeScript 92.0% | SCSS 3.3% | HTML 3.2% | JavaScript 1.1% | MDX 0.4%
Bytescrum
blog.bytescrum.com › how-to-use-jsoneditor-in-a-react-app
How to Use JSONEditor in a React App
April 8, 2024 - import React, { useState, useEffect, useRef } from 'react'; import JSONEditor from 'jsoneditor'; const App = () => { const [jsonData, setJsonData] = useState(null); const editorRef = useRef(null); useEffect(() => { if (!editorRef.current) { return; } const fetchData = async () => { try { // Import the JSON file const response = await import('./data.json'); const initialJsonData = response.default; // Create the editor const options = {}; const editor = new JSONEditor(editorRef.current, options); editorRef.current.jsonEditor = editor; // Store the editor instance // Set the JSON data editor.set
DhiWise
dhiwise.com › post › mastering-jsoneditor-react-for-efficient-data-manipulation
Mastering JSONEditor React: A Comprehensive Guide
October 25, 2023 - To use ACE Editor in a React application, you can use the react-ace library, which provides a React wrapper for ACE Editor. ... 1import React from 'react'; 2import AceEditor from 'react-ace'; 3 4import 'ace-builds/src-noconflict/mode-json'; ...