Documentation

Learn how to use JSON Viewer's powerful features

1. Editor View

The Editor View allows you to dynamically fetch, view, and edit JSON data from an external URL with an interactive tree view and visual graph.

URL Format

https://jsonviewer.tools/editor?jsonurl=<yourjsonurl>

Instructions

1Replace <yourjsonurl> with the URL of your JSON file.
2Paste the URL into your browser and press Enter.
3The tool will fetch and display the JSON as a tree view and generate a dynamic graph.

2. Widget (Iframe) View

The Widget View allows you to generate an embeddable graph visualization from your JSON URL with customizable colors and styling.

URL Format

https://jsonviewer.tools/widget?jsonurl=<yourjsonurl>&nodecolor=<color>&edgecolor=<color>&backgroundcolor=<color>&textcolor=<color>&nodebordercolor=<color>

Color Parameters

nodecolorNode fill color

edgecolorConnection line color

backgroundcolorBackground color

textcolorText color

nodebordercolorNode border color

All color parameters are optional. Use hex codes (e.g., FF5733) without the # symbol.

Instructions

1Replace <yourjsonurl> with the URL of your JSON file.
2Optionally add color parameters to customize the appearance.
3The tool will fetch the JSON and generate a customizable graph visualization.

Embed the Graph

To embed the graph in your website, use the following iframe code:

<iframe
  src="https://jsonviewer.tools/widget?jsonurl=<yourjsonurl>"
  width="100%"
  height="500px"
  frameborder="0">
</iframe>

Features

✓Interactive graphs with zoom and pan capabilities
✓Customizable colors for nodes, edges, and backgrounds
✓Responsive iframe dimensions
✓Fast and lightweight loading

Edit in JSFiddle