TLDR; please try out the new beta https://jsoneditoronline.org/beta/ and let me know what you think!

The first JSONEditor was published on 2011-11-28, more than nine years ago. Over the years, it did grow into a powerful, battle-tested tool. However, the codebase has become hard to maintain, and the architecture needed a big overhaul. I also felt like there is room to make the experience of editing your JSON data even better. The current editor contains two complementing modes: tree and code. This split has always felt like a non-optimal solution to me. Over the years I've been searching and experimenting with different solutions to improve on this.

I'm happy to present the first beta of a completely new editor, offering a totally new experience of editing JSON. The two separate modes (code and tree) are replaced with a new, unified solution which feels like working with a spreadsheet. Typical operations like inserting new fields or removing some have become easier now. You can copy/paste data via the system clipboard, making it frictionless to exchange data with other applications. The new editor can open and edit large JSON documents up to 500 MB without breaking a sweat. Under the hood, all editing you do is described and processed as JSON Patch operations, making it possible in the future to do cool stuff like keeping multiple editors in sync via atomic patch operations. And thanks to the new codebase it will be easier to make the editor more pluggable and customizable.

The editor is created in Svelte, but is a standalone UI component which can be used anywhere: in plain JavaScript, React, Vue, Angular, or your favorite framework. The editor is created and published as a new library with its own repository, since the changes are too big to see this as a major release of the existing library. You can find the new library at https://github.com/josdejong/svelte-jsoneditor/. Please be aware that the API is not yet stable and may change in the coming releases.

Please try out the new beta, and let me know what you think:

https://jsoneditoronline.org/beta/

Known limitations in this beta:

• [x] The editor still misses a lot of features that where available before: color picker, timestamp tag, dropdown for enums of your JSON Schema
• [x] Dragging selected contents up or down is not yet supported.
• [x] In the web application it is not yet possible to save a document without indentation when using tree mode.

Important questions to me are:

• How do you like the new experience?
• Do you prefer the new editor over the old one? If not, why?
• Do you miss the old, low level code mode? If so, in what circumstances?
• Are there things in the new editor that work clunky or cumbersome?

I really need your feedbacks here, thanks!

Feedback summary

Based on the feedbacks I've created action points:

• [x] Implement code mode
• [x] Add expand/collapse all buttons
  • Those buttons are added again
• [x] Quickkeys are not working on Mac: pasting doesn't work at all, other keys work with Control+... instead of Command+....
• [x] It is unclear how to use the editor the first time.
  • create a tutorial of some sort?
• [x] A common mistake is going into edit mode (blinking caret and border), and then paste JSON contents.
• [x] We miss the code mode: format/compact, and just being able to edit the raw JSON
  • I will add the code mode again, this will address a large part of the feedbacks
• [x] I miss being able to quickly get an idea of how large my document is (from number of lines, scrollbar, number of bytes)
  • having code mode back solves this, and we could also think though showing useful information in a status bar at the bottom
• [x] It is harder to copy a part of a value now (first double click to go in edit mode, then select the right part of the value)
  • Won't fix: this is a consequence of the changed UX, which has many pros but also cons (like this one)
• [x] The new editor is somewhat slower when expanding a large file
  • Profile the performance and see if improvements can be made
• [x] Be able to Transform either using JMESPath OR Lodash
• [x] Implement navigation path (breadcrumbs) on top again in tree mode

I've been working on a completely new web application, which is now ~in beta~ live:

https://jsoneditoronline.org/

Please try it out and let me know what you're thinking about it here. Is it easy to use or is it too confusing? Any feedback and suggestions are very welcome!

The most notable changes are:

1. The editor now has two panels each with their own document instead of two panels showing the same document.
2. Local documents are now stored in a local (in-browser) database. When opening the web application in multiple tabs of your browser, each tab will store it's own document separate from the others. No risk of data loss anymore.
3. Support for highlighting differences between two JSON objects.
4. Better support to load a JSON Schema document in various ways: url, text, other panel, document. or embedded text.
5. Better support for drag and drop drag & drop.
6. Fixes in saving large documents to disk (can handle files up to about 500 MB).

It would be nice to have a callback function and a method to run/listen for validation errors. This can be used for example to check whether a document is valid before submitting it, or to render validation errors on a different or more prominent place in a web application.

We should think about how this API should look exactly: think about the how to treat both JSON parse errors, JSON Schema validation errors, and custom validation errors.

Followup from discussion here: https://github.com/josdejong/jsoneditor/pull/560#issuecomment-445551510

Hello,

It would be useful to add an option to show in the header the characters count and the cursor position (line/column) such as in other editors.

If you find it useful as well perhaps I'll find the time to contribute it myself.

Thanks! Meir.

The tree editor displays now the enum types with a drop down. The only you have to do is to define the enum values in the json schema. (see feature request #282).

Example:

"properties": {
    "fruits": {
        "enum": ['orange', 'apple']
    }
}

The PR adds the following new capabilities:

• onTextSelectionChange - new option for adding a callback for text selection change in text and code modes. expected callback function signature is:

/**
  * @param {String} text selected text
  * @param {{row:Number, column:Number}} startPos selection start position
  * @param {{row:Number, column:Number}} endPos selected end position
  */
  function onTextSelectionChange(text, startPos, endPos) {
    ...
  }

• onNodeSelectionChange - new option for adding a callback for Nodes selection in tree mode. expected callback function signature is:

/**
  * @param {Array<Node>} nodes selected nodes
  */
  function onNodeSelectionChange(nodes) {
    ...
  }

• getTextSelection() - returns the current selected text and selection range for text and code modes.
• setTextSelection(startPos, endPos) - set text selection for text and code modes.
• getNodeSelection() - returns the current selected Nodes for tree mode.
• setNodeSelection(node1, node2) - set nodes selection for tree mode.

Additions are documented in details in api.md

@josdejong please note that the API for onNodeSelectionChange and getNodeSelection is a bit different from what we discussed because it returns a list of the selected nodes and not only the start and the end nodes, it makes more sense to me because probably it will be more useful to the utility consumer.

I'm working on a completely new version of the JSONEditor. The current code base is hard to maintain and expand, and is too limited qua customization. This new version aims at making the editor extendable (i.e. customize the action menu, custom modes, etc). The new editor will have good support for synchronizing changes with other editors or with a backend via JSON-Patch actions.

Try it out now

The new editor is being built in the next branch. To try it out:

• clone the project: git clone https://github.com/josdejong/jsoneditor.git
• go to the project directory: cd jsoneditor
• check out the next branch with git: git checkout next
• install dependencies: npm install
• build the library: npm run build

All examples in the examples folder are basically working and be tried out.

Progress of version next

• [x] Set up structure for the new editor, using react or preact
• [x] Implement a new data model (works with JSON-Patch to apply changes)
• [x] Implement method patch and an onChange listener using JSON-Patch
• [x] Implement modes Tree, Form, View
• [x] Implement modes Text and Code (the latter integrating Ace)
• [x] Implement mode switcher and API
• [x] Integrate jsonlint and handle errors nicely
• [x] Implement configurable readonly properties and values
• [x] Implement history, undo, redo
• [x] Implement JSONSchema
• [x] Implement search
• [x] Implement customizable quick keys
• [ ] Implement drag and drop of items
• [ ] Implement checkbox for booleans
• [ ] Implement select box for enums (when using JSONSchema)
• [ ] Implement patchText and onTextChange when in modes Text or Code
• [ ] Expose an API for React
• [ ] A bunch of small fixes, refactorings, and performance improvements

Extra

• [ ] Implement hooks to customize the main menu
• [ ] Implement hooks to customize the action menu
• [ ] Implement hooks to customize how values are rendered (i.e. like show a checkbox for boolean values, select box for enums, etc)
• [ ] Implement API to register new modes
• [ ] Implement a more advanced Repair button than the current one that's implicitely executed when clicking format/compact in text mode. Should turn JS data into JSON, and help you to repair JSON-like data with a comma missing somewhere or things like that.

Let the possibility of extending events behaviour (among the ones managed by jsoneditor). Function is provided as an option and will be triggered after node event management. This is added at the end of a node event execution, not replaced. It means that actions for that event will be executed and after that, if this function is provided, will be executed. For example, if we want to extend the behaviour when a click event is received providing information about the element clicked and the path, we can provide this function and use internal structures and internal code to do it. An example is provided with the PR (examples/16_extend_event_api.html).

It would be very useful to have an option to suppress errors so that the console does not get cluttered up (example error message below). These errors are thrown while the user is typing and they add up quickly.

Error: Parse error on line 8: ...": true, "test" "Created": "2016-01- ---------------------^ Expecting 'EOF', '}', ':', ',', ']', got 'STRING' at Object.parse (jsoneditor.js:6586) at Object.validate (jsoneditor.js:1620) at Object.parse (jsoneditor.js:1476) at JSONEditor.textmode.get (jsoneditor.js:1408) at ng-jsoneditor.js:32 at angular.js:17918 at completeOutstandingRequest (angular.js:5552) at angular.js:5829

The default build in dest/jsoneditor.js includes brace and jsonlint, which seems to create many problems when using browserify to bundle jsoneditor due to some missing libs (e.g. there's no file module with browserify, which makes jsonlint choke).

Apparently webpack doesn't easily support excluding libraries, so perhaps using browserify to create a clean jsoneditor.js without bundled dependencies would be best. This resulting jsoneditor.js contents can either go into index.js (which browserify tries to include by default), or into a new file in dist/, which package.json can reference with the main option.

Editor users shouldn't have to know to escape " characters. This should either be done by the editor (pressing " inserts \") or by displaying " unescaped and escaping it before parsing.

Bumps json5 from 1.0.1 to 1.0.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Hi, I try to use JsonEditor with ReactiveForms according to your example, but it is'nt worked. The data is not kept in the value of the form control.

my code:

HTML:

<form [formGroup]="form"> <json-editor formControlName="data" [options]="editorOptions">

TypeScript: form: FormGroup; @ViewChild(JsonEditorComponent, { static: false }) editor!: JsonEditorComponent; public editorOptions: JsonEditorOptions; constructor(private fb: FormBuilder) { }

ngOnInit(): void { this.editorOptions = new JsonEditorOptions() this.editorOptions.modes = ['code']; this.editorOptions.mode = 'code' this.editorOptions.onChange = () => { console.log(this.form) this.disabled.emit(!this.editor.isValidJson()) };

this.form = this.fb.group({
  data: [JSON.parse(this.data)],
});

this.form.controls['data'].valueChanges.subscribe(change => {
  this.saveAction.emit(new Map([["data", JSON.stringify(this.form.get("data").value)]]));
});

}

Can you help me to solve this issue? thanks about this wonderful tool!! efrat

General information

what the relationship between https://github.com/json-editor/json-editor and https://github.com/josdejong/jsoneditor ?

I found they are too similar fot me to distinguish .

In Ace.Editor there is a plugin to open ColorPicker in "code mode": https://github.com/easylogic/ace-colorpicker How could i use it or something the same in JsonEditor? In our project we decided not to use "tree mode", but only "code mode" for the necessary flexibility. But color selection is a welcome feature in "code mode".

Bumps decode-uri-component from 0.2.0 to 0.2.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps loader-utils from 2.0.3 to 2.0.4.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.