JsonDisplay

Pretty-printed JSON viewer

JsonDisplay renders JSON data in a formatted, readable view with proper indentation. It wraps CodeBlock internally and handles JSON stringification automatically.

Preview

response.json

{
  "status": "success",
  "data": {
    "users": [
      {
        "id": 1,
        "name": "Alice",
        "role": "admin"
      },
      {
        "id": 2,
        "name": "Bob",
        "role": "user"
      }
    ],
    "total": 2,
    "page": 1
  },
  "meta": {
    "requestId": "abc-123",
    "timestamp": "2024-01-15T10:30:00Z"
  }
}

Import

import

import { JsonDisplay } from '@ash-cloud/ash-ui';

Usage

ApiResponse.tsx

import { JsonDisplay } from '@ash-cloud/ash-ui';

function ApiResponse({ data }) {
  return (
    <JsonDisplay
      value={data}
      maxHeight={400}
    />
  );
}

Props

Prop	Type	Default	Description
value	unknown	required	Any JSON-serializable value
maxHeight	number	300	Max height before scrolling
className	string	undefined	Additional CSS classes

Features

Auto Formatting

Automatically pretty-prints with 2-space indentation

Scrollable

Respects maxHeight for large JSON objects

Type Safe

Handles any JSON-serializable value

CodeBlock Wrapper

Uses CodeBlock internally with "json" language

Common Patterns

patterns.tsx

// Tool result display
<JsonDisplay value={toolCall.result} maxHeight={200} />

// API response viewer
<JsonDisplay value={apiResponse.data} />

// Configuration display
<JsonDisplay value={agentConfig} maxHeight={400} />

// Error details
<JsonDisplay value={error.details} />