Embed Documentation

Three ways to integrate JSON Crack into your app: iframe widget, postMessage API, or the React component.

React Component

For React applications, use the jsoncrack-react package for a native integration with full control over props and callbacks. See the npm page for the full API reference and latest documentation.

npm install jsoncrack-react
1. Iframe Widget

The simplest way to embed JSON Crack. Add an iframe pointing to /widget and it will render an interactive graph viewer.

<iframe
  id="json-crack-embed"
  src="https://jsoncrack.com/widget"
  width="100%"
  height="600"
  style="border: none;"
></iframe>
2. Load Data from URL

Pass a json query parameter with a URL to automatically fetch and display remote data. This works on both the widget and the editor page.

<iframe
  id="json-crack-embed"
  src="https://jsoncrack.com/widget?json=https://catfact.ninja/fact"
  width="100%"
  height="600"
  style="border: none;"
></iframe>
3. postMessage API

For dynamic updates, use the postMessage API to send JSON data and display options to the widget at any time.

Important: The iframe must be defined before the script tag. The widget posts its id attribute back to the parent when ready — listen for this message before sending data.

const iframe = document.getElementById("json-crack-embed");

// Wait for the widget to signal it's ready
window.addEventListener("message", (event) => {
  if (event.data === "json-crack-embed") {
    // Widget is ready — send data
    iframe.contentWindow.postMessage({
      json: JSON.stringify({ hello: "world" }),
      options: {
        theme: "light",
        direction: "DOWN"
      }
    }, "*");
  }
});

Message Options

PropertyTypeDescription
jsonstringStringified JSON data to visualize
options.theme"light" | "dark"Color theme for the graph
options.direction"RIGHT" | "DOWN" | "LEFT" | "UP"Layout direction of the graph (default: RIGHT)

Sending Data on Page Load

logoJSON CRACK
contact@todiagram.com

Product

VS CodeOpen SourceToDiagram

Resources

FAQDocs

Social

© 2026 JSON Crack

Terms

Privacy