JSON GUI creator/editor [duplicate]

Question

Background: This is a request for something that may not exist yet, but I've been meaning to build one for a long time. First I will ask if anyone has seen anything like it yet.

Suppose you have an arbitrary JSON structure like the following:

{
    'title_str':'My Employee List'
    ,'lastmod_str': '2009-June-15'
    ,'employee_table':[
        {'firstname':'john','lastname':'doe','age':'33',}
        ,{'firstname':'jane','lastname':'doe','age':'34',}
        ,{'firstname':'samuel','lastname':'doe','age':'35',}
    ]
}

Question: Is there a web-based JSON editor that could take a structure like this, and automatically allow the user to modify this in a user-friendly GUI?

Example: Imagine an auto-generated HTML form that displays 2 input-type-text controls for both title and lastmod, and a table of input-type-text controls with three columns and three rows for arr_list ... with the ability to delete or add additional rows by clicking on a [+][X] next to each row in the table.

Big Idea: The "big idea" behind this is that the user would be able to specify any arbitrary (non-recursive) JSON structure and then also be able to edit the structure with a GUI-based interaction (this would be similar to the "XML Editor Grid View" in XML Spy).

See also:

• Is there a JSON api based CMS that is hosted locally?
• https://ux.stackexchange.com/questions/37237/treetable-as-a-flexible-condition-filter-editor
• JSON-editor
• YAML GUI

Update: (Thu 2014-07-31 18:31:11)

A github repository has been created to further track this closed SO post.

• https://github.com/dreftymac/stackoverflow.questions.998832

Answer 1

Update: In an effort to answer my own question, here is what I've been able to uncover so far. If anyone else out there has something, I'd still be interested to find out more.

• http://knockoutjs.com/documentation/plugins-mapping.html ;; knockoutjs.com nice
• http://jsonviewer.arianv.com/ ;; Cute minimal one that works offline
• http://www.alkemis.com/jsonEditor.htm ; this one looks pretty nice
• http://json.bubblemix.net/ Visualise JSON structute, edit inline and export back to prettified JSON.
• http://jsoneditoronline.org/ Example added by StackOverflow thread participant. Source: https://github.com/josdejong/jsoneditor
• http://jsonmate.com/
• http://jsonviewer.stack.hu/
• mb21.github.io/JSONedit, built as an Angular directive

Based on JSON Schema

• https://github.com/json-editor/json-editor
• https://github.com/mozilla-services/react-jsonschema-form
• https://github.com/json-schema-form/angular-schema-form
• https://github.com/joshfire/jsonform
• https://github.com/gitana/alpaca
• https://github.com/marianoguerra/json-edit
• https://github.com/exavolt/onde
• Tool for generating JSON Schemas: http://www.jsonschema.net
• http://metawidget.org
• Visual JSON Editor, Windows Desktop Application (free, open source), http://visualjsoneditor.org/

Commercial (No endorsement intended or implied, may or may not meet requirement)

• Liquid XML - JSON Schema Editor Graphical JSON Schema editor and validator.
• http://www.altova.com/download-json-editor.html
• XML ValidatorBuddy - JSON and XML editor supports JSON syntax-checking, syntax-coloring, auto-completion, JSON Pointer evaluation and JSON Schema validation.

jQuery

• formbuilder jQuery drag and drop
• formeo
• shalotelli form_builder

YAML

• Konstellate Reddit Post

See Also

• Google blockly
• Is there a JSON api based CMS that is hosted locally?
• cms-based concept ;; http://www.webhook.com/
• tree-based widget ;; http://mbraak.github.io/jqTree/
• http://mjsarfatti.com/sandbox/nestedSortable/
• http://jsonviewer.codeplex.com/
• http://xmlwebpad.codeplex.com/
• http://tadviewer.com/
• https://studio3t.com/knowledge-base/articles/visual-query-builder/

Answer 2

Generally when I want to create a JSON or YAML string, I start out by building the Perl data structure, and then running a simple conversion on it. You could put a UI in front of the Perl data structure generation, e.g. a web form.

Converting a structure to JSON is very straightforward:

use strict;
use warnings;
use JSON::Any;

my $data = { arbitrary structure in here };
my $json_handler = JSON::Any->new(utf8=>1);
my $json_string = $json_handler->objToJson($data);