Jsoneditor

JSON EditorJSON Editor is a web-based tool to view, edit, format, and validate JSON. It has various modes such as a tree editor, a code editor, and a plain text editor. The editor can be used as a component in your own web application. It can be loaded as CommonJS module, AMD module, or as a regular javascript file.The library was originally developed as core component of the popular web application and has been open sourced since then.Supported browsers: Chrome, Firefox, Safari, Edge. Continuous integration tests are run on GitHub Actions, and LambdaTest is used to test on all major browsers.Thanks, GitHub Actions and LambdaTest for the generous support for this open source project!Successor: svelte-jsoneditorThis library jsoneditor has a successor: svelte-jsoneditor. The new editor is not a one-to-one replacement, so there may be reasons to stick with jsoneditor.The main differences between the two are described here.FeaturesJSONEditor has various modes, with the following features.Tree modeChange, add, move, remove, and duplicate fields and values.Sort arrays and objects.Transform JSON using JMESPath queries.Colorized code.Color picker.Search & highlight text in the tree view.Undo and redo all actions.JSON schema validation (powered by ajv).Code modeColorized code (powered by Ace).Inspect JSON (powered by Ace).Format and compact JSON.Repair JSON.JSON schema validation (powered by ajv).Text modeFormat and compact JSON.Repair JSON.JSON schema validation (powered by ajv).Preview modeHandle large JSON documents up to 500 MiB.Transform JSON using JMESPath queries.Format and compact JSON.Repair JSON.JSON schema validation (powered by ajv).DocumentationDocumentation:APIUsageShortcut keysExamplesSourceHistoryInstallwith npm (recommended):npm install jsoneditorAlternatively, you can use another JavaScript package manager like or a CDN such as or that in the following example, you'll have to change the urls jsoneditor/dist/jsoneditor.min.js and jsoneditor/dist/jsoneditor.min.css to match the place where you've downloaded the library, or fill in the URL of the CDN you're using.>html lang="en">head> meta charset="utf-8"> link href="jsoneditor/dist/jsoneditor.min.css" rel="stylesheet" type="text/css"> script src="jsoneditor/dist/jsoneditor.min.js">script>head>body> div id="jsoneditor" style="width: 400px; height: 400px;">div> script> // create the editor const container = document.getElementById("jsoneditor") const options = {} const editor = new JSONEditor(container, options) // set json const initialJson = { "Array": [1, 2, 3], "Boolean": true, "Null": null, "Number": 123, "Object": {"a": "b", "c": "d"}, "String": "Hello World" } editor.set(initialJson) // get json const updatedJson = editor.get() script>body>html>BuildThe code of the JSON Editor is located in the folder ./src. To buildjsoneditor:Install dependencies:npm installBuild JSON Editor:npm run buildThis will generate the files ./jsoneditor.js, ./jsoneditor.css, andminified versions in the dist of the project.To automatically build when a source file has changed:npm startThis will update ./jsoneditor.js and ./jsoneditor.css in the dist folderon every change, but it will NOT update the minified versions as that'san expensive operation.TestRun unit tests:npm testRun code linting (JavaScript Standard Style):npm run lintCustom buildsThe source code of JSONEditor consists of CommonJS modules. JSONEditor can be bundled in a customized way using a module bundler like browserify or webpack. First, install all dependencies of jsoneditor:npm installTo create a custom bundle of the source code using browserify:browserify ./index.js -o ./jsoneditor.custom.js -s JSONEditorThe Ace editor, used in mode code, accounts for about one third of the totalsize of the library. To exclude the Ace

Getting startednpm i react-json-editor-viewerEasily view json in react;">import { JSONViewer } from "react-json-editor-viewer";JSONViewer data={{ the: "men", that: "landed", on: "the", moon: "were", maybe: 2, i: "think", probably: ["neil armstrong", "buzz aldrin"], am_i_right: true, }}/>;Make your json viewer collapsible;">import { JSONViewer } from "react-json-editor-viewer";JSONViewer data={{ the: "men", that: "landed", on: "the", moon: "were", maybe: 2, i: "think", probably: ["neil armstrong", "buzz aldrin"], am_i_right: true, }} collapsible/>;Edit json easily and listen to changes in the data, hover on elements to add/remove keys">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}/>View both the json editor and viewer side by side">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} view="dual"/>Configure your optional custom stylesSee the source for the Demo Appdefaultoverride custom stylesLicense: MIT

Jsoneditor.css is available in 149 versions of jsoneditor.9.0.3 cdnjs File size file size --> URL Html Snippet Download download 9.0.2 cdnjs File size file size --> URL Html Snippet Download download 9.0.1 cdnjs File size file size --> URL Html Snippet Download download 9.0.0 cdnjs File size file size --> URL Html Snippet Download download 8.6.8 cdnjs File size file size --> URL Html Snippet Download download 8.6.7 cdnjs File size file size --> URL Html Snippet Download download 8.6.6 cdnjs File size file size --> URL Html Snippet Download download 8.6.5 cdnjs File size file size --> URL Html Snippet Download download 8.6.4 cdnjs File size file size --> URL Html Snippet Download download 8.6.3 cdnjs File size file size --> URL Html Snippet Download download 8.6.2 cdnjs File size file size --> URL Html Snippet Download download 8.6.1 cdnjs File size file size --> URL Html Snippet Download download 8.6.0 cdnjs File size file size --> URL Html Snippet Download download 8.5.3 cdnjs File size file size --> URL Html Snippet Download download 8.5.2 cdnjs File size file size --> URL Html Snippet Download download 8.5.1 cdnjs File size file size --> URL Html Snippet Download download 8.5.0 cdnjs File size file size --> URL Html Snippet Download download 8.4.1 cdnjs File size file size --> URL Html Snippet Download download 8.0.0 cdnjs File size file size --> URL Html Snippet Download download 7.5.0 cdnjs File size file size --> URL Html Snippet Download download 7.4.0 cdnjs File size file size --> URL Html Snippet Download download 7.3.1 cdnjs File size file size --> URL Html Snippet Download download 7.3.0 cdnjs File size file size --> URL Html Snippet Download download 7.2.1 cdnjs File size file size --> URL Html Snippet Download download 7.2.0 cdnjs File size file

Editors libraries Showing projects tagged as Editors quill 9.7 8.3 L5 TypeScript Quill is a modern WYSIWYG editor built for compatibility and extensibility ace 9.5 9.0 L3 JavaScript Ace (Ajax.org Cloud9 Editor) CodeMirror 9.4 6.0 L2 JavaScript In-browser code editor (version 5, legacy) Quasar Framework 9.4 9.9 JavaScript Quasar Framework - Build high-performance VueJS user interfaces in record time slate 9.4 8.4 TypeScript A completely customizable framework for building rich text editors. (Currently in beta.) Editor.js 9.3 8.1 TypeScript A block-style editor with clean JSON output Draft.js 9.2 8.2 L3 JavaScript DISCONTINUED. A React framework for building text editors. trix 8.9 8.0 JavaScript A rich text editor for everyday writing TOAST UI Editor 8.8 0.0 TypeScript 🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible. TinyMCE 8.7 9.7 L4 TypeScript The world's #1 JavaScript library for rich text editing. Available for React, Vue and Angular medium-editor 8.7 0.0 L4 JavaScript Medium.com WYSIWYG editor clone. Uses contenteditable API to implement a rich text solution. CKEditor 5 8.5 10.0 JavaScript Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing. Summernote 8.4 7.8 JavaScript Super simple WYSIWYG editor jsoneditor 8.3 8.1 L2 JavaScript A web-based tool to view, edit, format, and validate JSON SimpleMDE 7.8 0.0 JavaScript A simple, beautiful, and embeddable JavaScript Markdown editor. Delightful editing for beginners and experts alike. Features built-in autosaving and spell checking. buefy 7.7 6.3 Vue Lightweight UI components for Vue.js based on Bulma bootstrap-wysiwyg 7.4 0.0 HTML DISCONTINUED. Tiny bootstrap-compatible WYSIWYG rich text editor. wysihtml5 7.2 0.0 L4 JavaScript DISCONTINUED. Open source rich text editor based on HTML5 and the progressive-enhancement approach. Uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles. ProseMirror 7.0 3.9 L5 JavaScript The ProseMirror WYSIWYM editor whitestorm.js 6.7 0.0 L5 JavaScript :rocket: 🌪 Super-fast 3D framework for Web Applications 🥇 & Games 🎮. Based on Three.js Froala Editor 6.5 4.7 CSS The next generation Javascript WYSIWYG HTML Editor. pen 6.2 0.0 L3 JavaScript enjoy live editing (+markdown) Squire 6.2 7.7 L2 TypeScript The rich text editor for arbitrary HTML. Trumbowyg 6.0 8.1 L3 JavaScript A lightweight and amazing WYSIWYG JavaScript editor under 10kB sweet.js 6.0 0.0 JavaScript Sweeten your JavaScript. vim.js 5.9 0.0 L1 C DISCONTINUED. JavaScript port of Vim with a persistent ~/.vimrc ContentTools 5.9 0.0 L4 JavaScript A JS