Skip to main content

How to embed and visualize JSON data in Confluence

· 2 min read
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 interactive visual tree diagrams that make structure 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 editor. 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 an interactive tree diagram. Users can zoom, rotate, and pan to explore the structure.

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: