# JSON Editor Website: http://jsoneditoronline.org/ Github: https://github.com/josdejong/jsoneditor ## Description JSON Editor is a web-based tool to view, edit, and format 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. The library can be loaded as CommonJS module, AMD module, or as a regular javascript file. Supported browsers: Chrome, Firefox, Safari, Opera, Internet Explorer 9+. ## Features ### Tree editor - Edit, add, move, remove, and duplicate fields and values. - Change type of values. - Sort arrays and objects. - Colorized code. - Search & highlight text in the treeview. - Undo and redo all actions. ### Code editor - Format and compact JSON. - Colorized code (powered by Ace). - Inspect JSON (powered by Ace). ### Text editor - Format and compact JSON. ## Documentation - Documentation: - [API](https://github.com/josdejong/jsoneditor/tree/master/docs/api.md) - [Usage](https://github.com/josdejong/jsoneditor/tree/master/docs/usage.md) - [Shortcut keys](https://github.com/josdejong/jsoneditor/tree/master/docs/shortcut_keys.md) - [Examples](https://github.com/josdejong/jsoneditor/tree/master/examples) - [Source](https://github.com/josdejong/jsoneditor) - [History](https://github.com/josdejong/jsoneditor/blob/master/HISTORY.md) ## Install with npm (recommended): npm install jsoneditor with bower: bower install jsoneditor #### More There is a directive available for using JSONEditor in Angular.js: [https://github.com/angular-tools/ng-jsoneditor](https://github.com/angular-tools/ng-jsoneditor) ## Use ```html
``` ## Build The code of the JSON Editor is located in the folder `./src`. To build jsoneditor: - Install dependencies: ``` npm install ``` - Build JSON Editor: ``` npm run build ``` This will generate the files `./jsoneditor.js`, `./jsoneditor.css`, and minified versions in the root of the project. ## Custom builds The source code of JSONEditor consists of CommonJS modules. JSONEditor can be bundled in a customized way using a module bundler like [browserify](http://browserify.org/) or [webpack](http://webpack.github.io/). First, install all dependencies of jsoneditor: npm install To create a custom bundle of the source code using browserify: browserify ./index.js -o ./jsoneditor.custom.js -s JSONEditor The Ace editor, used in mode `code`, accounts for about 75% of the total size of the library. To exclude the Ace editor from the bundle: browserify ./index.js -o ./jsoneditor.custom.js -s JSONEditor -x brace -x brace/mode/json -x brace/ext/searchbox To minify the generated bundle, use [uglifyjs](https://github.com/mishoo/UglifyJS2): uglifyjs ./jsoneditor.custom.js -o ./jsoneditor.custom.min.js -m -c