Embed Documentation

Three ways to integrate Chawso JSON 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 Chawso JSON. Add an iframe pointing to /widget and it will render an interactive graph viewer.

<iframe
  id="chawso-json-embed"
  src="https://json.chawso.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="chawso-json-embed"
  src="https://json.chawso.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 a { type: "chawso-json:ready", id } message to the parent when ready — listen for this message before sending data. id is the iframe's id attribute on same-origin embeds and null on cross-origin embeds; the type field is the reliable signal in both cases. The widget accepts postMessage data from any origin so any site can embed it; only embed it in pages you control.

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

// Wait for the widget to signal it's ready
window.addEventListener("message", (event) => {
  if (event.data?.type === "chawso-json:ready") {
    // 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

ChawsoChawso JSON

Resources

Embed docsOpen source (upstream)

© 2026 Chawso

Terms

Privacy