JsonViewer

Read-only, syntax-highlighted JSON block. Use for admin payload inspectors, debug panels, webhook viewers — anywhere an operator skims, copies, or downloads a structured payload. Theme tokens are wired through CSS variables so it follows light / dark automatically.

Examples

Object payload

{
  "id": "rahhal-app-001",
  "slug": "saved-places",
  "enabled": true,
  "rolloutPercent": 100,
  "publishedAt": "2026-04-12T09:00:00Z",
  "authors": [
    "abdullah",
    "lina"
  ],
  "meta": {
    "locales": [
      "en",
      "ar"
    ],
    "version": 3,
    "deprecated": null
  }
}

Pre-formatted string

{
  "status": "ok",
  "count": 3,
  "items": [
    {
      "id": 1,
      "label": "Riyadh"
    },
    {
      "id": 2,
      "label": "Jeddah"
    },
    {
      "id": 3,
      "label": "AlUla"
    }
  ]
}

Compact (4-space indent)

{
    "status": "ok",
    "count": 3,
    "items": [
        {
            "id": 1,
            "label": "Riyadh"
        },
        {
            "id": 2,
            "label": "Jeddah"
        },
        {
            "id": 3,
            "label": "AlUla"
        }
    ]
}