Monday, October 29, 2012

JSON viewer and editor from a local HTML

I have looked at several JSON tools out there. So far I like the simplicity of json-editor because JSON is after all a Javascript Object Notation and so it makes sense to just have an HTML page which uses javascript to manipulate a JSON structure you want to either visualize or edit.

Just in case you are afraid from using github, not clear on front end web development or simply just trying to quickly try just one more json edition/viewing tool here are the steps you follow:
  1. Save the zip file as "json-editor". Alternatively you can clone the project and so on but I said I wanted to provide instructions for those not using git and still interested in trying just yet another json editor
  2. Uncompress the zip and double click on index.html
  3. Paste your json in "Value", hit "Save" (no worries it is just "saving" the json in memory)
  4. On the right you get the JSON tree representation. As you click on different components you get different paths in "label"
  5. You can manipulate the json structure while adding or deleting child or sibling elements in any existing element. You can edit an element and pressing save will update again the local (in memory representation of the object). Clicking on the root node you can see the whole JSON string again.
Handy right? I have asked one of the developers what he thinks about supporting JsonPath

No comments: