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 562d 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 [laracademy/generators This package will generate a Laravel Model based on your database table itself, filling in the required fields automatically. 355346.4k4](/packages/laracademy-generators)[beyondcode/laravel-vouchers Allow users to redeem vouchers that are bound to models.. 70763.4k2](/packages/beyondcode-laravel-vouchers)[firegento/magesetup2 MageSetup provides the necessary configuration (system config, tax, agreements, etc. for a national market. 123328.5k1](/packages/firegento-magesetup2)[sixlive/nova-text-copy-field Laravel Nova text field with click to copy support 70708.2k2](/packages/sixlive-nova-text-copy-field)[happyr/message-serializer Serialize classes the good way. 80491.3k](/packages/happyr-message-serializer)[percymamedy/laravel-dev-booter Boost your Laravel app by registering Prod services only on Prod. 35320.7k1](/packages/percymamedy-laravel-dev-booter) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)