236

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:

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

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

dreftymac
  • 27,818
  • 25
  • 108
  • 169
  • Do you have any progress on building own editor? i was looking for the same thing. What i have found on the net are almost same ones as you listed on your answer. – Sinan Nov 27 '09 at 12:55
  • No. It seems like a good enough idea with not enough momentum behind it. – dreftymac Nov 28 '09 at 23:59
  • if i get enough momentum for it i'd love to write my first cocoa app for that, if you won't ask for copyrights;) – Sinan Nov 29 '09 at 11:11
  • 1
    I'm too small to put a wall around any of my ideas, and this has been done before anyway :) ... take a look at the XMLSPY grid-view editor if you decide to tackle this and you need additional inspiration: http://www.altova.com/xmlspy/xml-grid-view.html – dreftymac Nov 30 '09 at 18:05
  • I've been thinking of this, and found your question when checking if there was demand for it. when checking to see if there waas demand putting a prototype together – 13ren May 27 '11 at 00:17
  • @dreftymac I've been thinking of this for a product, and found your question when checking for interest. I've put a 0.1 prototype together, with your question in mind (and http://stackoverflow.com/questions/3369735/json-gui-creator-editor) . It creates the form based on a template JSON: the user can enter text; and add/delete from list items. But: it doesn't yet use a table for lists (instead, nested panes); doesn't allow fieldnames to be edited (a safety feature); and it's in Java not Javascript (but could be an applet) - are you interested in having a look? – 13ren May 27 '11 at 00:35
  • Have a look at http://visualjsoneditor.codeplex.com its an app which creates an editor gui based on a json schema – Rico Suter Sep 17 '14 at 21:57
  • **See also:** http://stackoverflow.com/questions/22582471/is-there-a-json-api-based-cms-that-is-hosted-locally – dreftymac Jan 31 '17 at 23:12
  • 'employee_table' element MUST be replaces with strings array. Also you normally provide separate schema with human-readible column headers.. As a json fan I must state You have selected bad solution for this particular use case. its task for sql with one to many relations – xakepp35 Mar 16 '20 at 22:11
  • If I would face that kind of artificial strange problem, the easiest way to get that rendered (convert json to html) can be done with react.js Json is very native to js, and rendering html is very native to jsx. So, Just one js source + even no need for a line in backend. Renderer Tool could easily be written under an hour.. – xakepp35 Mar 16 '20 at 22:21
  • **//'employee_table' element MUST be replaces with strings array//** Do you have a citation or reference for this statement? It sounds like a personal preference being promoted as a requirement with no context or explanation. – dreftymac Mar 20 '20 at 23:51

2 Answers2

358

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.

Based on JSON Schema

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

jQuery

YAML

See Also

Samuel Harmer
  • 3,785
  • 4
  • 25
  • 62
dreftymac
  • 27,818
  • 25
  • 108
  • 169
  • 1
    [Form Builder](http://app.formassembly.com/form-builder3.4.2/?) made with Freja looks amazing! Though this is (almost) completely unrelated to the question... :P – cregox Mar 16 '11 at 21:25
  • 1
    @Cawas It does look amazing. It's surprising, but there are several excellent form-builders out there - one (wufoo) was recently acquired for... $35 million http://news.ycombinator.com/item?id=2481576 – 13ren May 17 '11 at 19:56
  • @13ren damn, I've never realized there was such a market behind all this! – cregox May 17 '11 at 20:38
  • 14
    +1 for http://jsoneditoronline.org Here is GIT of this project - https://github.com/wjosdejong/jsoneditoronline – FDisk May 22 '12 at 12:17
  • another simple implementation of json form composer: https://bitbucket.org/zakis_/jquery-jsonbuilder – stefcud Mar 13 '13 at 20:35
  • Just skimmed through the JSON schema projects. Alpaca seems to be the most active and complete, and is also working on a drag and drop designer to complement it. Definitely my pick. – Phil Oct 22 '13 at 22:32
  • 3
    jsoneditoronline git link no longer works. – argyle Nov 12 '13 at 20:38
  • 5
    @jeromeyers: You're right.so I have found working project link here : [https://github.com/josdejong/jsoneditor](https://github.com/josdejong/jsoneditor) – Mehul Joisar Nov 29 '13 at 06:49
  • One of the editors above was integrated into an Atom package: https://github.com/LukasHechenberger/atom-json-editor – hoosteeno Apr 08 '16 at 17:43
  • New project of Web page database with DOM rendering and JSON editor http://js2dx.com – Gonki Aug 17 '18 at 03:26
  • Is there anything that can give me the JSON path of the key I select? The chrome devtools window seems to do it, and it's really handy. (See - "4. Copy property path" ) https://techbrij.com/chrome-developer-tools-inspect-json-path-query – Dev Aggarwal Aug 18 '18 at 18:09
  • 1
    One more I am using recently is https://www.devprimetools.com/json-viewer . It supports search/filter in JSON. You can also view your JSON in a tabular/diagrammatic format. It has features like fetch data from REST API and saving JSON for future use. – Kanchan Kumar Apr 10 '20 at 06:34
4

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);
Ether
  • 48,919
  • 12
  • 83
  • 153
  • Thanks, but I'm also unfamiliar with perl forms. Any recommendations for a simple form maker? It's really just a very small part of a project I'm working on so I don't like to spend too much time on building the form/UI instead of the real logic and algorithm I'm writing :) – David B Jul 30 '10 at 16:33