Redpanda UIRedpanda UI

JSON Viewer

Displays a JSON viewer in a stringified format.

Made by NicolasMontone

Installation

Loading component...

When to use

The JSON Viewer component displays structured JSON data in a formatted, readable tree view. Use this decision tree to determine when it's appropriate:

Usage

import { JsonViewer } from '@/registry/components/json-viewer';
<JsonViewer
    data={{
        name: 'John Doe',
        age: 32,
        siblings: { brother: 'James Doe', sister: 'Jane Doe' },
    }}
/>

Examples

Default

Loading component...

Credits

  • We use json-tree-viewer for the JSON Viewer component and style.
  • For a more interactive playground, see here.

Recent changes

  • patchv1.2.0Pin shipped dependency floors to the version we develop against. Registry items now declare ranges like `^5.1.9` (the actual installed version) instead of collapsing to `^5.0.0`, so consumers start on the known-tested b…#133
  • minorv1.1.0Theme docs refresh, readability pass on semantic foregrounds, and consumer-facing Base UI regression fixes.#121
  • minorv1.0.0Post-Base-UI polish. Public API unchanged.#116
  • majorv1.0.0Migrate every Radix-based primitive to `@base-ui/react@^1.4.0` (Base UI).#114
  • minorv0.3.0Add theme-provider component to the registry with documentation and tests. Includes playground type improvements (export RegistryItem, remove as-const boilerplate) and docs site dark mode border color fix.#109
See full history →
Built by malinskibeniamin. The source code is available on GitHub.

On this page