If you are using the element in a form, clicking any of the fields will submit the form.

e.g.

<form>
    <div id="jsoneditor" style="width: 400px; height: 400px;"></div>
</form>

Can you preventDefault for onclick for the button elements?

Hi,

Probably doing something obviously wrong, but in the latest build (2.3.0 Snapshot) the loadCss function at the bottom of the file never gets the correct css file name.

I looked at the stack overflow comment you added around that method but I can't get it working. I am currently using Chrome and breakpointed in the loadCss method and found that the jsoneditor.js file was index 98 out of a total list of 149 script tags, so not first or last.

I am using requireJS v2.1.1 and am using it without any shim to pull in jsoneditor, just like your example details. I should note that we have many folder levels inside our Scripts folder, which is why it has failed. For now I have forked and removed the loadCss method. I should also note that loadCss is called via the AMD module export pick up at the end of jsoneditor.js

Thanks for an awesome widget!

David

It would be great if there is an option to decide whether a node show is expanded or not based on a user defined function.

In my case I just want to expand a single node.

With the following code (meant to keep the "config" form entry up-to-date):

var container = document.getElementById("editArea");
function getJSON() {
    var json = editor.get();
    document.getElementById('config').value = JSON.stringify(json)
}
var editor = new JSONEditor(container,{change: getJSON},JSON.parse(document.getElementById('config').value));

Editing a name or value (but not adding or removing entries) causes what appears to be an infinite loop reporting around lines 1149, 1408 and 1543

http://www.typescriptlang.org/

The editor should be embeddable on another page through a script tag.

Hi,

first of all let me thank you for your work, the editor is really useful on my desktop.

However, I'm searching for a good browser-based JSON editor that can be used on e.g. Android devices. Two issues seem to block this possibility.

1. Drag and drop does not work. I googled around and found this: http://touchpunch.furf.com/. Don't know however, how you implemented drag support right now and if this could be of any interest.

2. Editing does not work. I guess the way to go would be to make keys and fields actual text fields after selection. This way the keyboard could pop up. There is a project, that does this, its called JSONTinker (Unfortunately it does not have drag support).

Do you plan to support mobile devices?

Best Regards.

On chrome 21 all strings, keys and values, have a break line
It is a bit annoying.

Just a short question because I'm interested in how the GUI is done. As far as I can see the splitter element (where you can change the sizes of the left and right panel) is an own implementation, right?
I'm looking for easy ways to build application like interfaces in html but can't find good ones so far...

save button not run in firefox 21.

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.

The Compact JSON button’s icon near the top-left of the editor should have fewer lines.

Right now the Compact JSON icon is four full lines. The Format JSON icon to its left is also four lines. Since the icons have the same number of lines, they make it look like Compact JSON just removes indentation from formatted JSON. Removing lines from the icon would make it more obvious that the resulting text will be shorter, not just unindented. Also, the icon as it is looks confusingly like the Justify Text icon in word processors.

I’m envisioning the bottom line gone and the third line cut short. So instead of

——————————
——————————
——————————
——————————

the icon would look like

——————————
——————————
———

The icon is in the top-right corner of the sprite sheet. And here is the sprite sheet’s source file.

The current search in the JSON Editor searches for text matches within the fields and values of items. The search functionality can be expanded with options like:

• match case
• match words
• regex support
• filter on matching path or path parts
• match multiple results per field instead of a match of the fields as a whole

Support for GYP-format would be awesome.

https://code.google.com/p/gyp/wiki/GypLanguageSpecification

Example files:
https://github.com/joyent/node/blob/master/node.gyp
https://github.com/joyent/node/blob/master/common.gypi

Have you noticed that in JavaScript land, RESTful API land, and GitHub land that lowerCamelCase and snake_case key names are more common than UpperCaseNames?

I think this might result in a few more people sticking around after checking it out. Perhaps you could get further inspiration from http://schema.org/

In most frameworks the css images are placed under the images directory.

Clicking drag-to-move on initial object causes it to disappear, followed by erratic behavior.

I saw the issue in both Chrome and IE8. IE8 produces a dialog box "Stack overflow at line: 32"

Hitting 'JSON to Editor' in chrome after the issue has been triggered displays errors:
Maximum call stack size exceeded
NOT_FOUND_ERR: DOM Exception 8

Couldn't find the issues posted here,
result from request will count an extra index if there is an object that is longer than the space of the line.

Currently the Chrome app is just a link to the web application. It would be nice to package it a an offline available chrome app.

When value of a property is a url, make that url navigable so user can click and navigate to the URL.

Example screenshot:

Only a small issue. After successful searching in the header "x results" is shown. If the content of the editor is changed via .set(...) (e.g. clear the content) the text "x results" still exist. My suggestion: Remove the content of the result field and also the content of the input field if the whole json structure changed. Thanks in advance.

...Rolf

It would be very nice to be able to import json data from a url, so i could create mockup json data and copy a URL to i can link it to others.

As HTML is stripped before parse, any line breaks added during editing are lost. I think it's perfectly reasonable when serializing to output these as escapes \n/\r\n/etc. but I think breaks entered manually with Enter/Return should be persisted.

I have a patch that basically inserts \n at the end of the line before any <br>/<div>, and this works pretty well, but is activated on keyup, so it's jaring. I will try moving this to before parse/blur and see if that makes for a better experience.

I am using jeo inside a utility (https://github.com/mark-hahn/ftn). I'm using a package in the browser that manages commonjs modules (like those in node) and all code is wrapped in such a module..

jsoneditor.js doesn't work in a wrapper. Here are two places I've monkey-patched to fix this. Should I make a pull request with these? I'm not sure how to test these code changes against all your usage so it would only be tested in my app.

// removed line 60  -- This line shadows the browser's JSON and breaks the JSON detection.
    var JSON;

// Added this to the end of the file
if (module && module.exports) 
    module.exports = JSONEditor; 

I'd first like to say this is really a great tool you have built. I've been looking for just such a JSON editor for a long time now, and this is really well done!

One feature which could transform this from a very good tool into something even more useful would be to be able to create templates for new "types". By new types I mean composites of the native JSON types of course.

I think what I mean might be clearer if I give a concrete example-

Say I have the following JSON strucutre

{
    point1:{
                 x:1,
                 y:1
               },
    point2:{
                 x:1,
                 y:2
               }
}

It would be nice if I could define a "point" type, which will have the template
{
x:auto,
y:auto
}

(I used auto as that is used for the "change type" button)

and then create the above JSON by doing "change type" to the new point type I created.

I noticed in the wiki that you plan to implement JSON schema validation. I expect it might make more sense to tie the two features together, so that a new type might be implemented as a schema perhaps.

I guess this is could be a heavy feature to implement, but it could really transform the editor into a very powerful tool as it would allow the developer to easliy add and edit domain language objects.

I often use this awesome tool to format some json blob, and then use a github gist instead to share it with a coworker.
It would be nice if I can create a direct link to the workspace I'm in.

I tried forking the code to make it possible to make the editor read only (no moving nodes or adding additional nodes, no menu etc.) but ran into issues.

In some cases, I'd just like to add a read-only viewer (yours is one of the best, but is editable). It would be awesome, if I could do this via an option.

I load 587kb jsonarray file,if I use compact and format json string will lose ']';

Here is test file
https://docs.google.com/file/d/0B9hzKjSMF_5vNHc4U0xhUTdmeFE/edit?usp=sharing

Hello Jos,
and many thanks for the tree-editor. I recently integrated ACE into futon and believed that i had to hack my own JSON-Treeview-component. I'd like to make futon smth. like a JSON-Schema-Workplace in the browser. I'm currenty working on validation of JSON-docs from the DB. This is pretty simple, but i'd love to make the editing of a JSON-Doc depending on a JSON-Schema. E.g. a schema determines that certain properties at the node that i'm working on are legal and others may be not. I'd regard it a huge support for the author if the editing-environment would be able to suggest properties found in a schema. Kind of context-sensite snippets. Same way, if a new node is not allowed by the schema, give feedback and e.g. mark it red.
I'd reckon, that this kind of user-support/app-feedback has not been done before. Since i lost hope, that any native editor-app (Textmate/BBEdit/SublimeText, etc.) will ever be able to offer such features, i guess a browser-based editor, closely coupled with a JSON-capable DB (couch/pouch whatever) really makes sense.
Another nice feature would be to be able to set the focus of the tree-view to a certain node.The result/error-report from a JSON-doc validation comes with a (schema-)path that specifies the offending JSON-element '/properties/size/type'(schemaPath) or just '/size'(docPath). A function to collapse all nodes is already there. Another function to expand all nodes along a given path would help. The path/schemaPath-result came from the tv4-validator.

I'm looking forward to your next release,, greets Andreas

When I created a new field and changed name and/or value the changes get lost. The problem seems to be the onkeyup binding, which fails for my firefox 13.0.1. I think the onkeyup is tricky for contenteditable elements.

Loved your application.

I will write some of the features that I would like to see in future versions of the application:

1. undo the last action (s) (move, delete ...)

2. optional settings before deleting

3. sorting arrays (by value) and objects (by value or key)

4. a separate file (or even be a class) for the translation

5. after clicking on the "Append a field" Text "field" or "value" (a new record) is automatically allocated in order to be able to quickly enter the text (ie, after the entry of a character removes the word "field" or "value")

6. After the new entry and press Ctrl+Enter created a new record

PS: Sorry for bad english - it translate.google

Hi,
I want to use jsoneditor in a large project, but to do so I need to interact more deeply with the editor. To do so I need to handle events like : click, double click, right click, etc.
I patched the latest editor release but I'm unsure how to submit my modifications si here is a proposition :
Line 2753 add :

case 'contextmenu':
if(this.editor.options.contextmenu) this.editor.options.contextmenu(event,target,dom,node);
break;

Line 2735 add :

             case 'dblclick':
                if(this.editor.options.dblclick) this.editor.options.dblclick(event,target,dom,node);
                break;
            case 'click':
                if(this.editor.options.click) this.editor.options.click(event,target,dom,node);
                break;

Line 2711 add :

           case 'contextmenu':
                if(this.editor.options.contextmenu) this.editor.options.contextmenu(event,target,dom,node);
                break;

Line 2693 add :

            case 'dblclick':
                if(this.editor.options.dblclick) this.editor.options.dblclick(event,target,dom,node);
                break;

Line 2662 add :

    // Modif YB
    if(type == 'click' && this.editor.options.click) this.editor.options.click(event,target,dom,node);

Line 524 add :

    // Modif YB oncontextmenu
    this.frame.oncontextmenu = function (event) {
        onEvent(event);
        jsoneditor.util.preventDefault(event);
        return false;
    };  
    // Modif YB ajout du dblclick
    this.frame.ondblclick = function (event) {
        onEvent(event);

        // prevent default submit action when JSONEditor is located inside a form
        jsoneditor.util.preventDefault(event);
    };

This allows me basically to fully handle events, including interacting with the clicked elements etc.

It would be useful to be able to load and save JSON documents:

• load: get from url. Url can be entered via a menu in the editor, as well as as a query parameter in the url of the web application.
• save: post to url
• load: upload from disk (both using HTML5 FileReader API and some php uploader)
• save: download to disk

Obviously loading/saving to an url may need authorization. This will also enable github integration (issue #1).

Currently JSONEditor uses the built-in JSON parser of the browser, which does not give very detailed error messages on parse errors. It would be nice to improve this: give information where the error exactly is (line, column), and select the part resulting in an error in the editor.

Maybe integrate JSONLint for this?

When used with more detailed parsing errors it will be useful to pinpoint the problem.

It would be useful to be able to link to JSON Editor with some data, like this:

http://jsoneditoronline.org/?json=%7Ba%3A1%7D

(the encoded part is "{a:1}")

I would actually like to use the service this way for a backend tool that I am writing.

For larger requests, it might be necessary to send the data via POST.

jsoneditor-2.2.1

When creating a jsoneditor object and specifying an "indentation" value in the config object, the indentation value is set briefly (for a microsecond or two), and is then replaced with the default value of 4. :)

jse = new jsoneditor.JSONEditor(document.getElementById("jse_container"), {"mode":"code", "indentation":2});

in jsoneditor's _create(), the option is set:

// read options
options = options || {};
if (options.indentation) {
this.indentation = Number(options.indentation);
}

... but then, 21 lines later, the default is set instead:

this.indentation = 4; // number of spaces

Thanks!

Hi, your tool is very powerful and I very like it :)

I have a feature request:
I want to insert an encrypted json like "{"id":1}" that I copied out of my network tab in chrome to see what is in there. The example json is not hard to modify but I'm talking about a json about 100 lines.

is it possible to add this feature?

Cheers!

I embedded jsoneditoronline in a large/complicated project and found that search doesn't work. The fix is easy. In jsoneditor.js, make this change in the definition of JSONEditor.SearchBox.prototype.onSearch:

-        this.results = editor.search(text);
+        this.results = this.editor.search(text);

Is it possible for you to replace all ".innerHTLM"s with ".textContent"

https://developer.mozilla.org/en-US/docs/XUL/School_tutorial/DOM_Building_and_HTML_Insertion?redirectlocale=en-US&redirectslug=XUL_School%2FDOM_Building_and_HTML_Insertion

I suggest the following. Can you make the add button (the + sign in the editor area) configurable? In some cases the user should only editing existent entries but not adding new ones. Maybe the config object in the constructor would be a good place:

{ ..., addEntries: false, ... }

or similar. Thanks in advance.

...Rolf

I have json as string varable in my C# code. Is there anyway I can write it to the editor? Pls apologies my lack of knowledge in javascript.

I noticed that on demo page (http://www.jsoneditoronline.org) there is some nice error gutters when the JSON is not valid:

However don't have get them in 03_switch_mode example whereas jsonlint is loaded.. I don't see any doc on that neither.. Is this something special implemented only on the demo ?

Is there a way that we can customize the initial "object" name? Everything else is nicely named, but I'd like to be able to give that the right name, so it's a lot clearer (and simpler) to see what you're editing.

Something like passing in a string to use as the initial name (editor.objectname = "myspiffyobject") would be great.

To load files, the JSONEditor uses a php server running at http://jsoneditoronline.org (except for browsers supporting HTML5 FileReader). This php server cannot access files from localhost or an intranet. It would be nice if files from an intranet could be loaded by JSONEditor.

The HTML5 FileReader cannot load these files because of cross site scripting restrictions in the browser. So this is probably only resolvable for a native chrome extension (at least not for the web application).

In Chrome, at least, the string " text" is displayed as text, and only via some trial and error can I remove the whitespace using the editor.

A potential fix: add a leading hair space to the string before writing to innerHTML. This will likely not be noticed, but will probably cause the regular space to be visible. Then when reading innerHTML, ltrim by that character.

It'd be really sweet to hook this up to ShareJS. To do it, I need to be able to register callbacks when nodes are added, removed and changed in the JSON structure.

I'm happy to have a crack at it if you're interested in the feature. Where should events be fired from, and how should we fire them?

Hi, this may be a feature request, or I'd be happy if you could give me some guidance how to implement myself.

I'm using jsoneditor (very happily!) as a frontend in my app where users can edit mongo documents. It's working well.

However, there are some fields in the document I need to restrict the user from changing. (For example, the _id). If a critical field is removed, our application doesn't work.

Where in the code could I add a hook to disable a node? In my case it's a simple test - if the node name begins with an _, I want it to be disabled.

Thanks for this awesome tool!!!

jsoneditoronline is a great tool, thanks for sharing it.
It would be great if jsoneditoronline would provide GitHub integration to be able to store the created JSON files.