# How to Display & Format JSON in Confluence (Code Blocks + Viewer)

April 24, 2026 ·

<!-- -->

4 min read

[NGPilot](https://ngpilot.com)

Confluence's native code block macro renders JSON as plain text — no real syntax highlighting, no themes, no copy button. For API documentation, config references, or any page where JSON needs to be readable, that's not good enough. There are two better ways to embed JSON in Confluence, and the best one depends on how you want readers to interact with the data.

Two approaches

1. **[Modern Code Blocks](/docs/Modern-Code-Blocks-for-Confluence/user-docs.md)** — 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 use cases.**
2. **[JSON Structure Viewer](/docs/json-structure-viewer-for-confluence/usage.md)** — renders JSON as an interactive **collapsible tree** you can zoom and rotate. **Best for exploring large, deeply nested structures.**

## Method 1: Modern Code Blocks (syntax-highlighted JSON)[​](#method-1-modern-code-blocks-syntax-highlighted-json "Direct link to Method 1: Modern Code Blocks (syntax-highlighted JSON)")

[Modern Code Blocks for Confluence](https://marketplace.atlassian.com/apps/3525717923/modern-code-blocks-for-confluence) uses the Monaco editor — the same engine behind VS Code — to render JSON with proper syntax highlighting, 50+ themes, line numbers, a copy button, and automatic dark/light theme matching. It supports 85+ languages total, with first-class JSON support including nested object and array coloring.

### Step-by-step[​](#step-by-step "Direct link to Step-by-step")

1. Install [Modern Code Blocks](https://marketplace.atlassian.com/apps/3525717923/modern-code-blocks-for-confluence) 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** (Monokai, Dracula, GitHub Dark, or Auto to match Confluence)
6. Click **Save**

The JSON renders inline with full syntax highlighting. Example output:

```
{

  "user": {

    "id": 1234,

    "name": "Jane Developer",

    "email": "jane@example.com",

    "roles": ["admin", "editor"],

    "preferences": {

      "theme": "dark",

      "notifications": {

        "email": true,

        "slack": false

      }

    }

  }

}
```

### Why Code Blocks wins for most JSON use cases[​](#why-code-blocks-wins-for-most-json-use-cases "Direct link to Why Code Blocks wins for most JSON use cases")

* **Monaco-grade highlighting** — keys, strings, numbers, booleans, and null each get distinct colors
* **50+ themes** — match your brand or your reader's preference (Auto follows Confluence dark/light mode)
* **Line numbers and copy button** — readers can reference line 42 and copy the payload with one click
* **Window chrome** — optional macOS/Windows title bar (auto-derived filename, e.g. `config.json`) for screenshot-ready snippets
* **Diff view** (Advanced edition) — show a JSON migration or config change as a colored before/after
* **One app for all code** — the same macro handles JSON, YAML, SQL, Python, and 80+ other languages

For full configuration options — themes, max height, font size, minimap, window chrome — see the [Modern Code Blocks user guide](/docs/Modern-Code-Blocks-for-Confluence/user-docs.md).

## Method 2: JSON Structure Viewer (interactive tree)[​](#method-2-json-structure-viewer-interactive-tree "Direct link to Method 2: JSON Structure Viewer (interactive tree)")

When JSON is large or deeply nested and readers need to **explore** the structure rather than read it line by line, [JSON Structure Viewer for Confluence](/docs/json-structure-viewer-for-confluence/usage.md) renders the data as an interactive, collapsible tree. Readers click nodes to expand and collapse, and can zoom and rotate the diagram.

### When to pick the tree view over code highlighting[​](#when-to-pick-the-tree-view-over-code-highlighting "Direct link to When to pick the tree view over code highlighting")

| Use case                                     | Best choice                                  |
| -------------------------------------------- | -------------------------------------------- |
| API request/response examples in docs        | **Code Blocks** (copy button, line numbers)  |
| Short JSON snippets in tutorials             | **Code Blocks** (themes, syntax colors)      |
| A 500-line config file readers must navigate | **JSON Structure Viewer** (collapsible tree) |
| Showing the *shape* of a data model          | **JSON Structure Viewer** (visual hierarchy) |
| Changelog / migration diff                   | **Code Blocks** diff view                    |
| Mixed code (JSON + YAML + SQL) on one page   | **Code Blocks** (one macro, 85+ languages)   |

To use the tree view, install JSON Structure Viewer, type `/json` on a page, and paste your JSON. See the [JSON Structure Viewer docs](/docs/json-structure-viewer-for-confluence/usage.md) for details.

## Tips for documenting JSON in Confluence[​](#tips-for-documenting-json-in-confluence "Direct link to Tips for documenting JSON in Confluence")

* **Pair the two apps** — use Code Blocks for the readable snippet and Structure Viewer for the explorable tree on the same API-docs page
* **Anonymize sensitive data** — replace real credentials and emails with placeholders before embedding
* **Break up large files** — one macro per major section reads better than one massive blob
* **Use Markdown alongside** — [Enhanced Markdown for Confluence](/docs/Enhanced-Markdown-for-Confluence/usage.md) lets you write prose in Markdown and embed JSON macros inline

## Related resources[​](#related-resources "Direct link to Related resources")

* [Modern Code Blocks — documentation](/apps/modern-code-blocks-for-confluence.md) | [marketplace](https://marketplace.atlassian.com/apps/3525717923/modern-code-blocks-for-confluence)
* [JSON Structure Viewer — documentation](/apps/json-structure-viewer-for-confluence.md) | [marketplace](https://marketplace.atlassian.com/apps/1237254/json-structure-viewer-for-confluence)
* [Advanced code blocks in Confluence](/blog/advanced-code-blocks-confluence.md) — performance, themes, and diff view
* [Best Confluence apps for developers](/blog/best-confluence-apps-developers.md)
* [Enhanced Markdown — documentation](/apps/enhanced-markdown-for-confluence.md) — write docs in Markdown with embedded JSON

Try <!-- -->JSON Structure Viewer for Confluence

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

[Get it on the Atlassian Marketplace](https://marketplace.atlassian.com/apps/1237254/json-structure-viewer-for-confluence?utm_source=ngpilot.com\&utm_medium=website\&utm_campaign=json-structure-viewer-for-confluence)

## Related guides

* [How to Create Mermaid Diagrams in Jira](/blog/how-to-create-mermaid-diagrams-jira.md)
* [Export Jira Issues to Excel or CSV](/blog/export-jira-issues-to-excel.md)
* [Bulk Download Jira Attachments](/blog/bulk-download-jira-attachments.md)
* [How to Migrate Confluence Content](/blog/how-to-migrate-confluence-content.md)
* [How to Add a Block Quote in Confluence](/blog/block-quote-confluence.md)

Explore NGPILOT[Browse Solutions](/solutions.md)[All Apps](/apps.md)[Atlassian Marketplace →](https://marketplace.atlassian.com/vendors/1226848/?utm_source=ngpilot.com\&utm_medium=blog\&utm_campaign=hub-links)

**Tags:**

* [confluence](/blog/tags/confluence.md)
* [json](/blog/tags/json.md)
* [api-documentation](/blog/tags/api-documentation.md)
* [how-to](/blog/tags/how-to.md)
* [code-blocks](/blog/tags/code-blocks.md)