Skip to main content

JSON Formatting & Display in Confluence: Code Blocks vs Structure Viewer

· 4 min read
NGPilot

Confluence's native code block macro renders JSON as plain text with no real formatting, no themes, and no copy button. There are two purpose-built apps that fix this, and each serves a different JSON display need:

  • Modern Code Blocks for Confluence — renders JSON as syntax-highlighted code with the Monaco editor (VS Code engine), 50+ themes, line numbers, copy button, and dark/light mode. Best for API docs, snippets, and most JSON display.
  • JSON Structure Viewer for Confluence — renders JSON as an interactive collapsible tree you can zoom and rotate. Best for exploring large, deeply nested structures.

This guide compares the two so you can pick the right one for each page.

Modern Code Blocks: syntax-highlighted JSON​

Modern Code Blocks for Confluence uses the Monaco editor — the same engine behind VS Code — to render JSON with proper syntax highlighting. Keys, strings, numbers, booleans, and null each get distinct colors, and you can switch between 50+ themes (Monokai, Dracula, GitHub Dark, Solarized) or let the block auto-match Confluence's light/dark mode.

Features for JSON​

  • Monaco-grade highlighting — distinct colors for keys, strings, numbers, booleans, null
  • 50+ themes — or Auto, which follows Confluence dark/light mode
  • Line numbers — readers can reference "line 42"
  • Copy button — one-click copy of the payload
  • Window chrome — optional macOS/Windows title bar with auto-derived filename (config.json)
  • Diff view (Advanced edition) — show a JSON config change as a colored before/after
  • 85+ languages — the same macro handles JSON, YAML, SQL, Python, and more

How to format JSON with Code Blocks​

  1. Install Modern Code Blocks from the Marketplace (free for up to 10 users)
  2. Edit a Confluence page, type /code and select Modern Code Blocks for Confluence
  3. Paste your JSON into the editor
  4. Set the Language to JSON
  5. Optionally pick a Theme
  6. Save the macro

Example — an API response rendered with JSON syntax highlighting:

{
  "users": [
    {"id": 1, "name": "Alice", "role": "admin"},
    {"id": 2, "name": "Bob", "role": "editor"}
  ],
  "pagination": {"page": 1, "total": 42}
}

For the full configuration reference — themes, max height, font size, minimap, window chrome, diff mode — see the Modern Code Blocks user guide.

JSON Structure Viewer: interactive tree​

JSON Structure Viewer for Confluence renders JSON as an interactive visual tree. Readers click nodes to expand and collapse, and use a toolbar to zoom and rotate. Use it when the JSON is too large or nested to read line-by-line and readers need to explore the shape of the data.

When to use the tree view​

  • A 500-line configuration file readers must navigate
  • Showing the hierarchical shape of a data model
  • Exploring an API response with many nested arrays

To use it, install JSON Structure Viewer, type /json on a page, and paste your JSON. See the JSON Structure Viewer docs.

Comparison: which should you use?​

FeatureModern Code BlocksJSON Structure Viewer
Render styleSyntax-highlighted codeInteractive collapsible tree
HighlightingMonaco engine, 50+ themesColor-coded keys/values
Line numbersYesNo (tree view)
Copy buttonYesNo
Zoom & rotateNoYes
Expand/collapse nodesNo (scroll instead)Yes
Themes50+ (Monokai, Dracula, …)Dark/light auto
Diff viewYes (Advanced)No
Other languages85+ (YAML, SQL, Python, …)JSON only
Best forAPI docs, snippets, most JSONLarge nested structures

For most Confluence pages — API docs, config examples, tutorials — Modern Code Blocks is the better default because readers want to copy the payload and read it with familiar IDE-style highlighting. Add JSON Structure Viewer when a structure is too large to read as text and readers need to explore it as a tree.

Try JSON Structure Viewer for Confluence

Visualize JSON as interactive structure diagrams — free for up to 10 users.

Get it on the Atlassian Marketplace

Related guides