Visual representation of JSON that allows to easily see how to access elements.
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

JSON Visualize

I constantly see Stackoverflow questions about how to access particular JSON values, usually along the lines of


not working when


is what is desired.

JSON Visualize does some very simple parsing of JSON to create a DOM-based visualization that makes it easy to see what path is required to select the desired value.


TODO: Create a test html page of my own.

Create a test HTML page with a single element with id of container. Then, include the JsonVisualize script, and make sure that you have access to a JSON object or object string (either will work). Use like so:

(new JsonVisualize(objectVariableName)).display();

The title attribute on all scalar element values (blue with the provided CSS included) contains the path to access said value.

Things to come

  • Correct increasing left margin on structures after names (i.e. stop it)
  • Allow for continuous display of titles on click
  • Also display all titles simultaneously with special button click or something
  • Include path to non-scalar values as well