Developer Reference

Documentation & Integrations.

Learn how to dynamically load external JSON endpoints, generate custom iframe embeds, and connect MCP servers to AI coding agents.

Dynamic Editor View via URL

HTTP GET

Launch JSON Viewer directly with external JSON pre-loaded from any public API endpoint, GitHub raw URL, or S3 bucket.

URL Structure

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

1. Provide URL

Replace with CORS-accessible endpoint.

2. Fetch & Validate

Parses stream directly in client.

3. Interactive Graph

Renders auto-layout with ELK engine.

Embeddable Iframe Widget

Widget v2.0

Embed interactive graph visualizations directly into documentation portals, blog posts, Notion documents, or web apps with customizable brand colors.

Customizable Query Parameters

nodecolor=<HEX>

Node background fill (e.g. 6366F1)

edgecolor=<HEX>

Connection line tracer color

backgroundcolor=<HEX>

Canvas backdrop color

textcolor=<HEX>

Property label typography color

Copy HTML Iframe

<iframe
  src="https://jsonviewer.tools/widget?jsonurl=https://api.example.com/data.json&nodecolor=6366F1&edgecolor=CBD5E1"
  width="100%"
  height="500px"
  frameborder="0"
  allowfullscreen>
</iframe>