The library provides a vanilla bundle of the editor via the npm library vanilla-jsoneditor (instead of svelte-jsoneditor) which can be used in any browser environment and framework.

render() { return ( <Editor value={yourJson} onChange={this.handleChange} theme="ace/theme/github" schema={yourSchema} /> ); } ... If you using webpack and es6 dynamic imports you can load jsoneditor-react asynchronously.

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 ...

This is the vanilla variant of svelte-jsoneditor, which can be used in vanilla JavaScript or frameworks like SolidJS, React, Vue, Angular.

December 10, 2025 - This is the vanilla variant of svelte-jsoneditor, which can be used in vanilla JavaScript or frameworks like SolidJS, React, Vue, Angular.

Pass a component to offer a custom text/code editor when editing full JSON object as text.

import {JSONEditor} from 'react-json-editor-viewer'; constructor(){ this.onJsonChange = this.onJsonChange.bind(this); } onJsonChange(key, value, parent, data){ console.log(key, value, parent, data); } <JSONEditor data={{ the: "men", that: "landed", on: "the", moon: "were", maybe: 2, i: "think", probably: ["neil armstrong", "buzz aldrin"], am_i_right: true }} collapsible onChange={this.onJsonChange} />

Set of default widgets for react-json-editor using mantine that render a user form for all basic json datatypes.

January 29, 2023 - 🖌 JSON Studio - JSON Schema Based Editor. Contribute to sujinleeme/json-studio development by creating an account on GitHub.

import React from 'react'; import Editor from '@holiday_peng/json-editor'; class JSONEditor extends React.Component { render() { const EditorIns = new Editor(schema).init(); return ( <div className='editor-wrapper'> <EditorIns/> </div> ); } ...

import React, { PureComponent } from 'react'; import { JSONEditor } from 'reactjs-json-editor'; import 'reactjs-json-editor/css/style.css'; class App extends PureComponent { state = { objectToEdit: { aString: 'Some string', aNumber: 123.45, aLink: 'https://www.google.com', aNull: null, anUndefined: undefined, object: { anArray: [ new Date(), { string: 'Some other string' } ] } } }; setValue = (value) => this.setState({ objectToEdit: value }); render() { const { objectToEdit } = this.state; return ( <JSONEditor value={objectToEdit} onChange={this.setValue} /> ); } } export default App;

The JSON Editor for React is a lightweight and fully customizable React component that provides an intuitive interface for editing JSON data. It supports syntax highlighting, validation, and a tree-based structure, making it ideal for developers ...

function YourComponent = () => { // useJsonEditor returns a ref so that you can bind it with your `textarea` element. const editorRef = useJsonEditor = ({ onSubmit = {handleSubmit}, onError = {handleError}, // submitKeys = ['command+enter', 'ctrl+enter'], // serializer = JSON.parse }) return ( <textarea // bind useJsonEditor hook with an element ref={editorRef} // if you need onChange event, you can pass it as usual onChange={handleChange} // other properties are of course valid because it is a normal textarea // value="" /> ) }

import React from "react"; import {JsonEditor} from "react-jsondata-editor"; export default function Simple() { let input = '{"example":{"id":"json","age":99,"working":true,"problem":null,"more info":{"car":{"brand":"a-brand","year":2020,"owners":["father","brother"]}}}}' return ( <div style={{ height : "500px", width: "500px", border: "solid 1px #dddddd"}}> <JsonEditor jsonObject={input} onChange={(output)=>{console.log(output)}}/> </div> ) }

January 29, 2023 - A modular, easy to use, react component, to view, edit, and debug javascript objects. - AndrewRedican/react-json-editor-ajrm

import React, { Component } from 'react'; import ReactJsonEditor from 'react-json-editor'; class App extends Component { ...

epitelete-perf-editor · abelpz · svelte-jsoneditor react (forked)Demo showing how to use svelte-jsoneditor in React · EddieJamsession · svelte-jsoneditor react (forked)Demo showing how to use svelte-jsoneditor in React · leidsondiasFind more examples or templates · AboutA web-based tool to view, edit, format, transform, and validate JSON140,989Weekly Downloads · Latest version3.11.0 · LicenseISC · External Links · github.com/josdejong/svelte-jsoneditor ·

JSON editor for React. Contribute to Eightyplus/react-json-editor development by creating an account on GitHub.

the json object you want to edit. if you pass a string, the editor will attempt to parse it with JSON.parse(). onChange · function · noop · called whenever a change occurs: function(updatedJson) {} dropdownFactory · function · factory to render a custom dropdown element for selecting the field type and value if type is boolean: (options: Array<{ value: string, label: string}>, value: string, props: Object) => ReactComponent ·

react wrapper implementation for https://github.com/josdejong/jsoneditor - vankop/jsoneditor-react