Skip to main content

How to Embed and Visualize JSON Data in Confluence

· 2 min read
NGPilot
NGPilot
NGPilot

Raw JSON in a code block is hard to read, especially for large API responses or nested configuration files. JSON Structure Viewer for Confluence transforms JSON into visual structure diagrams that make the data layout immediately clear.

When to visualize JSON in Confluence​

  • API documentation: Show request/response structures
  • Configuration references: Display app config or deployment manifests
  • Data schema documentation: Illustrate nested object relationships
  • Onboarding: Help new team members understand data structures

Step-by-step: embed a JSON visual diagram​

1. Insert the macro​

Edit a Confluence page, type /json and select JSON Structure Viewer.

2. Paste your JSON​

Paste any valid JSON into the left editor panel. Example — an API response:

{
  "user": {
    "id": 1234,
    "name": "Jane Developer",
    "email": "jane@example.com",
    "roles": ["admin", "editor"],
    "preferences": {
      "theme": "dark",
      "notifications": {
        "email": true,
        "slack": false
      }
    }
  }
}

3. Preview and save​

The viewer renders the JSON as a visual structure diagram in the right preview panel. Click Save to insert the macro. On the published page, users can click the rendered diagram to open preview mode, where a toolbar provides zoom in/out and rotate controls.

Tips for large JSON structures​

  • Break up large files: Use one macro per major section instead of one massive blob
  • Anonymize sensitive data: Replace real values with placeholders before embedding
  • Pair with code blocks: Use Modern Code Blocks for the raw JSON and JSON Structure Viewer for the visual representation

Complementary tools​

For teams documenting APIs and data structures in Confluence: