PHPackages liquidedge-app/jsoneditor - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. liquidedge-app/jsoneditor ActiveLibrary[Utility & Helpers](/categories/utility) liquidedge-app/jsoneditor ========================= JSON Editor 1.0.1(1y ago)06JavaScript Since Oct 24Pushed 1y agoCompare [ Source](https://github.com/ryno-liquidedge/jsoneditor)[ Packagist](https://packagist.org/packages/liquidedge-app/jsoneditor)[ GitHub Sponsors](https://github.com/josdejong)[ RSS](/packages/liquidedge-app-jsoneditor/feed)WikiDiscussions develop Synced 1mo ago READMEChangelog (2)DependenciesVersions (3)Used By (0) JSON Editor =========== [](#json-editor) [![Version](https://camo.githubusercontent.com/30eab7a7a603fc943c7f354ca9b583ea71cb710f6ef01d1e37b21e7baf55af5e/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f6a736f6e656469746f722e737667)](https://www.npmjs.com/package/jsoneditor)[![Downloads](https://camo.githubusercontent.com/ce45fd0ca8f8813229591965c0b2cbd9763f38c7634184b8888fb7e8e61ed328/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f646d2f6a736f6e656469746f722e737667)](https://www.npmjs.com/package/jsoneditor)[![Maintenance](https://camo.githubusercontent.com/7d317c3b4c64125677a7546f7d5e14cb665071dfd46e373f49697ea8d564e396/68747470733a2f2f696d672e736869656c64732e696f2f6d61696e74656e616e63652f7965732f323032342e737667)](https://github.com/josdejong/jsoneditor/pulse)[![License](https://camo.githubusercontent.com/f29deb923a4cc28337a13fa7de56c9ab362c0d8e63dcd733e886dc80b33b314a/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f6a6f7364656a6f6e672f6a736f6e656469746f722e737667)](https://github.com/josdejong/jsoneditor/blob/master/LICENSE)[![FOSSA Status](https://camo.githubusercontent.com/e2dc684971735a28047c2eca517fc3b1d0c671de1032e38381ab7fe182f23ff1/68747470733a2f2f6170702e666f7373612e696f2f6170692f70726f6a656374732f6769742532426769746875622e636f6d2532466a6f7364656a6f6e672532466a736f6e656469746f722e7376673f747970653d736869656c64)](https://app.fossa.io/projects/git%2Bgithub.com%2Fjosdejong%2Fjsoneditor?ref=badge_shield) JSON 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. [![json editor](https://camo.githubusercontent.com/fbd3ef110fa73466ec1aba88b1e1da7f2ede427abd1642f0a51c75fdaf5696a7/68747470733a2f2f7261772e6769746875622e636f6d2f6a6f7364656a6f6e672f6a736f6e656469746f722f6d61737465722f6d6973632f6a736f6e656469746f722e706e67)](https://camo.githubusercontent.com/fbd3ef110fa73466ec1aba88b1e1da7f2ede427abd1642f0a51c75fdaf5696a7/68747470733a2f2f7261772e6769746875622e636f6d2f6a6f7364656a6f6e672f6a736f6e656469746f722f6d61737465722f6d6973632f6a736f6e656469746f722e706e67) [![code editor](https://camo.githubusercontent.com/cd97bb5c9d4e1cf74635bce580d5a4ce37a7ec2b2b724695b9f59d93700d78ea/68747470733a2f2f7261772e6769746875622e636f6d2f6a6f7364656a6f6e672f6a736f6e656469746f722f6d61737465722f6d6973632f636f6465656469746f722e706e67)](https://camo.githubusercontent.com/cd97bb5c9d4e1cf74635bce580d5a4ce37a7ec2b2b724695b9f59d93700d78ea/68747470733a2f2f7261772e6769746875622e636f6d2f6a6f7364656a6f6e672f6a736f6e656469746f722f6d61737465722f6d6973632f636f6465656469746f722e706e67) Cross browser testing for JSONEditor is generously provided by [BrowserStack](https://www.browserstack.com) [![BrowserStack](https://camo.githubusercontent.com/f4e03e3eaaf869817ebf63ab912826cfeda0ca4d51a266656aef49f517c2e374/68747470733a2f2f7261772e6769746875622e636f6d2f6a6f7364656a6f6e672f6a736f6e656469746f722f6d61737465722f6d6973632f62726f77736572737461636b2e706e67)](https://www.browserstack.com) Successor: svelte-jsoneditor ---------------------------- [](#successor-svelte-jsoneditor) This library [`jsoneditor`](https://github.com/josdejong/jsoneditor) has a successor: [`svelte-jsoneditor`](https://github.com/josdejong/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](https://github.com/josdejong/svelte-jsoneditor#differences-between-josdejongsvelte-jsoneditor-and-josdejongjsoneditor). Features -------- [](#features) JSONEditor has various modes, with the following features. ### Tree mode [](#tree-mode) - Change, add, move, remove, and duplicate fields and values. - Sort arrays and objects. - Transform JSON using [JMESPath](http://jmespath.org/) queries. - Colorized code. - Color picker. - Search & highlight text in the tree view. - Undo and redo all actions. - JSON schema validation (powered by [ajv](https://github.com/epoberezkin/ajv)). ### Code mode [](#code-mode) - Colorized code (powered by [Ace](https://ace.c9.io)). - Inspect JSON (powered by [Ace](https://ace.c9.io)). - Format and compact JSON. - Repair JSON. - JSON schema validation (powered by [ajv](https://github.com/epoberezkin/ajv)). ### Text mode [](#text-mode) - Format and compact JSON. - Repair JSON. - JSON schema validation (powered by [ajv](https://github.com/epoberezkin/ajv)). ### Preview mode [](#preview-mode) - Handle large JSON documents up to 500 MiB. - Transform JSON using [JMESPath](http://jmespath.org/) queries. - Format and compact JSON. - Repair JSON. - JSON schema validation (powered by [ajv](https://github.com/epoberezkin/ajv)). Documentation ------------- [](#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 ------- [](#install) with npm (recommended): ``` npm install jsoneditor ``` Alternatively, you can use another JavaScript package manager like , or a CDN such as or . Use --- [](#use) > Note 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. ``` > // 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() ``` Build ----- [](#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 dist of the project. - To automatically build when a source file has changed: ``` npm start ``` This will update `./jsoneditor.js` and `./jsoneditor.css` in the dist folder on every change, but it will **NOT** update the minified versions as that's an expensive operation. Test ---- [](#test) Run unit tests: ``` npm test ``` Run code linting ([JavaScript Standard Style](https://standardjs.com/)): ``` npm run lint ``` Custom builds ------------- [](#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 one third 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 ``` License ------- [](#license) `jsoneditor` is released as open source under the permissive the [Apache 2.0 license](LICENSE.md). **If you are using jsoneditor commercially, there is a *social* (but no legal) expectation that you help fund its maintenance. [Start here](https://github.com/sponsors/josdejong).** ### Health Score 25 — LowBetter than 37% of packages Maintenance37 Infrequent updates — may be unmaintained Popularity4 Limited adoption so far Community19 Small or concentrated contributor base Maturity40 Maturing project, gaining track record Bus Factor1 Top contributor holds 84.2% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~0 days Total 2 Last Release 571d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/abdefd19bc827b3f998529fe0d6354e7851343db472511097979847b8c650936?d=identicon)[ryno-liquidedge](/maintainers/ryno-liquidedge) --- Top Contributors [![josdejong](https://avatars.githubusercontent.com/u/568626?v=4)](https://github.com/josdejong "josdejong (1403 commits)")[![meirotstein](https://avatars.githubusercontent.com/u/2209844?v=4)](https://github.com/meirotstein "meirotstein (57 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (52 commits)")[![ianido](https://avatars.githubusercontent.com/u/4239671?v=4)](https://github.com/ianido "ianido (29 commits)")[![greenkeeper[bot]](https://avatars.githubusercontent.com/in/505?v=4)](https://github.com/greenkeeper[bot] "greenkeeper[bot] (26 commits)")[![RobAley](https://avatars.githubusercontent.com/u/5831552?v=4)](https://github.com/RobAley "RobAley (12 commits)")[![tdakanalis](https://avatars.githubusercontent.com/u/2813615?v=4)](https://github.com/tdakanalis "tdakanalis (9 commits)")[![dependabot-preview[bot]](https://avatars.githubusercontent.com/in/2141?v=4)](https://github.com/dependabot-preview[bot] "dependabot-preview[bot] (8 commits)")[![AdamVig](https://avatars.githubusercontent.com/u/5354752?v=4)](https://github.com/AdamVig "AdamVig (8 commits)")[![yanivefraim](https://avatars.githubusercontent.com/u/1336186?v=4)](https://github.com/yanivefraim "yanivefraim (6 commits)")[![43081j](https://avatars.githubusercontent.com/u/5677153?v=4)](https://github.com/43081j "43081j (5 commits)")[![mariohmol](https://avatars.githubusercontent.com/u/5495763?v=4)](https://github.com/mariohmol "mariohmol (5 commits)")[![snyk-bot](https://avatars.githubusercontent.com/u/19733683?v=4)](https://github.com/snyk-bot "snyk-bot (5 commits)")[![dhughes-xumak](https://avatars.githubusercontent.com/u/28631401?v=4)](https://github.com/dhughes-xumak "dhughes-xumak (4 commits)")[![walkerrandolphsmith](https://avatars.githubusercontent.com/u/1386741?v=4)](https://github.com/walkerrandolphsmith "walkerrandolphsmith (4 commits)")[![ppetkow](https://avatars.githubusercontent.com/u/24698226?v=4)](https://github.com/ppetkow "ppetkow (4 commits)")[![maufl](https://avatars.githubusercontent.com/u/423964?v=4)](https://github.com/maufl "maufl (3 commits)")[![tomalec](https://avatars.githubusercontent.com/u/17435?v=4)](https://github.com/tomalec "tomalec (3 commits)")[![MiroHibler](https://avatars.githubusercontent.com/u/1636676?v=4)](https://github.com/MiroHibler "MiroHibler (2 commits)")[![petermanders89](https://avatars.githubusercontent.com/u/49525944?v=4)](https://github.com/petermanders89 "petermanders89 (2 commits)") ### Embed Badge ![Health badge](/badges/liquidedge-app-jsoneditor/health.svg) ``` [![Health](https://phpackages.com/badges/liquidedge-app-jsoneditor/health.svg)](https://phpackages.com/packages/liquidedge-app-jsoneditor) ``` ### Alternatives [rafaelfragoso/haversini-formula This PHP class can replace the Google Distance Matrix to calculate the distance between two points using latitude and longitude. It will prevent you to do massive requests to Google servers and enhance your service performance. 45212.0k](/packages/rafaelfragoso-haversini-formula) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)