# React JSON Viewer: Suche, Pfade kopieren, große Payloads

> Ein React JSON Viewer für Webhooks und Admin-Screens: Suche, die passende Zweige öffnet, Werte und Pfade kopieren, Handy-Layout und Arrays mit 10.000 Einträgen.

- Autor: [Serban Rusu](https://wingo-ui.com/blog/authors/serban), Founder of Wingo UI
- Veröffentlicht: 16. Okt. 2026
- Kategorie: [Komponenten-Guides](https://wingo-ui.com/de/blog/category/components)
- Lesezeit: 9 Min.
- Kanonische URL: https://wingo-ui.com/de/blog/react-json-viewer
- Englische Fassung: https://wingo-ui.com/blog/react-json-viewer

## Kurz gesagt

Ein guter React JSON Viewer zeigt die Payload als aufklappbaren Baum, färbt Werte nach Typ und hat eine Suche, die jeden Zweig mit einem Treffer öffnet, statt nur Zeilen zu markieren, die schon sichtbar sind. Er sollte außerdem einen Wert oder seinen Pfad kopieren (data.items[0].name oder ein JSON Pointer), auf dem Handy bedienbar bleiben und bei Payloads mit Tausenden Einträgen nur die sichtbaren Zeilen rendern. Der JSON Viewer von Wingo UI erledigt all das, du übergibst nur das data-Prop.

Du hast eine Webhook-Payload, eine API-Antwort oder die Eingabe eines KI-Tool-Calls und willst sie in einem Admin-Screen zeigen, damit jemand das eine Feld findet, das schiefgelaufen ist. Ein roher Dump mit `JSON.stringify` funktioniert, bis die Payload 40 Keys und drei Ebenen Verschachtelung hat. Ein React JSON Viewer macht aus diesem Dump einen Baum, den man aufklappen, durchsuchen und kopieren kann. In diesem Artikel: was die Komponente können muss, welche Props im [JSON Viewer](https://wingo-ui.com/components/json-viewer) von Wingo UI zählen, wie er sich auf dem Handy und mit Arrays von 10.000 Einträgen verhält und wie er im Vergleich zu den Paketen abschneidet, die die meisten zuerst finden. Wir bauen Wingo UI, sind also nicht neutral; Aussagen über andere Bibliotheken belegen wir mit Links auf deren eigene Doku.

## Was muss ein React JSON Viewer können?

Er muss Payloads jeder Größe auf jedem Gerät aufklappbar, durchsuchbar und kopierbar machen. Verschachtelte Daten anzuzeigen ist der einfache Teil. Unsere Checkliste, die auch als fairer Test für jede Bibliothek taugt:

- **Auf- und Zuklappen** von Objekten und Arrays, mit einer Vorschau auf den Inhalt eines geschlossenen Zweigs (die ersten Keys oder die ersten Werte und eine Anzahl).
- **Farben nach Typ**: Strings, Zahlen, Booleans, null und Datumswerte sollten unterschiedlich aussehen, denn die Frage „Ist das `0` oder `"0"`?“ ist beim Debuggen einer API schon die halbe Arbeit.
- **Eine Suche, die Zweige öffnet.** Ein Treffer in einem geschlossenen Zweig bringt nichts, wenn der Viewer nur Zeilen markiert, die schon gerendert sind.
- **Einen Wert oder seinen Pfad kopieren**, damit der Pfad direkt in den Code oder in einen Bug-Report wandern kann.
- **Große Payloads**, die den Tab nicht einfrieren: seitenweise Anzeige langer Arrays und Virtualisierung langer Bäume.
- **Tastatur und Screenreader**: ein einziger Tab-Stopp, Pfeiltasten und echte Baum-Semantik.
- **Handys**: Zeilen, die groß genug zum Tippen sind, und Aktionen, die nicht von Hover abhängen.

Installier die Komponente und gib ihr Daten:

```bash
npx wingo-ui@latest add json-viewer
```

```tsx
import { JsonViewer } from "@/components/ui/json-viewer";

export function WebhookPayload({ payload }: { payload: unknown }) {
  return <JsonViewer data={payload} rootName="webhook" defaultExpandDepth={2} fileName="webhook" />;
}
```

Die Komponentendatei beginnt mit `"use client"`. Du kannst sie also direkt aus einer Server Component rendern, solange `data` serialisierbar ist und du keine Funktionen übergibst. Kommt der Wert als Text aus einer Datenbankspalte, parse ihn vorher: Der Viewer parst keine Strings, die JSON enthalten, und eine ungeparste Payload erscheint als ein einziger langer String.

> Live-Demo (JSON Viewer): Der Webhook öffnet sich zwei Ebenen tief. Öffne invoice.lines und dann eine Zeile: Geschlossene Zweige zeigen eine Vorschau ihres Inhalts und eine Anzahl. Fahr mit der Maus über eine Zeile, um ihren Wert oder Pfad zu kopieren. Probier sie unter [JSON Viewer](https://wingo-ui.com/components/json-viewer) aus und installier sie mit `npx wingo-ui@latest add json-viewer`.

## Wie durchsuche ich einen JSON-Baum?

Die Suche läuft über die gesamte Payload und öffnet jeden Zweig, der einen Treffer enthält. Genau das erwarten die meisten, die nach einem React JSON Viewer mit Suche googeln. Tipp in die Toolbar oder drück Strg+F (⌘F auf dem Mac), während der Fokus im Viewer liegt. Jeder passende Key oder Wert wird markiert, die Zweige mit Treffern gehen auf, und der erste Treffer wird in die Mitte des Panels gescrollt. Enter und Shift+Enter springen durch die Treffer, der Zähler zeigt „2 of 5“, und Escape leert die Suche. Groß- und Kleinschreibung sowie diakritische Zeichen werden ignoriert, und Zahlen, `true` und `null` werden über ihre Textform gefunden.

Zwei Props steuern das. `searchIn` beschränkt die Suche auf `"keys"`, `"values"` oder `"both"` (der Standard), und `searchable={false}` entfernt das Suchfeld, wenn die Payload klein ist. Willst du eine Suche aus deiner eigenen UI starten, zum Beispiel aus einer Logzeile, die eine Rechnungsnummer nennt, holst du dir die API über `setApi`:

```tsx
"use client";

import { useEffect, useState } from "react";
import { JsonViewer, type JsonViewerApi } from "@/components/ui/json-viewer";

export function EventInspector({ event, highlight }: { event: unknown; highlight?: string }) {
  const [api, setApi] = useState<JsonViewerApi | null>(null);

  useEffect(() => {
    if (highlight) api?.search(highlight);
  }, [api, highlight]);

  return <JsonViewer data={event} rootName="event" searchIn="values" setApi={setApi} />;
}
```

Dieselbe API hat `expandAll`, `collapseAll`, `expandToDepth(depth)`, `expandPath(path)` und `scrollToPath(path)`. `expandPath(["invoice", "lines"])` öffnet diesen Zweig samt seinen Vorfahren. So verlinkst du aus einer Fehlermeldung direkt auf ein Feld.

## Wie kopiere ich einen Wert oder seinen Pfad?

Jede Zeile hat zwei Aktionen, Copy value und Copy path. Wie du sie erreichst, hängt vom Eingabegerät ab. Mit der Maus erscheinen sie, wenn du über die Zeile fährst oder sie fokussierst. Mit der Tastatur kopiert `c` den Wert und Shift+C den Pfad. Auf einem Touchscreen öffnet langes Drücken ein Sheet mit denselben Aktionen, dem vollständigen Wert (bei einem Datum in lokaler Zeit) und Expand all from here.

`pathFormat` legt fest, was Copy path liefert:

| `pathFormat` | Kopierter Pfad | Wofür |
| --- | --- | --- |
| `"js"` (Standard) | `data.items[0].name`, Keys mit Leerzeichen als `["full name"]` | Zum Einfügen in JavaScript oder einen Bug-Report |
| `"pointer"` | `/items/0/name` | JSON Pointer, wie ihn JSON Patch und viele Schema-Tools nutzen |

`rootPathName` ersetzt `data` am Anfang von JS-Pfaden. Mit `rootPathName="webhook"` kopierst du also `webhook.invoice.customer.name`. Brauchst du den Pfad in deinem eigenen Code, feuert `onSelect(path, value)`, sobald jemand einen Wert per Enter, Klick oder Antippen auswählt, und die gewählte Zeile bleibt markiert. `formatJsonPath(path, "pointer")` macht aus dem `JsonPath`-Array Text, genau wie die Kopieraktion.

> Live-Demo (JSON Viewer): Typ-Chips, Zeilennummern und JSON-Pointer-Pfade sind an: Tippe einen Wert an, und der gewählte Pfad unter dem Baum ändert sich. Probier sie unter [JSON Viewer](https://wingo-ui.com/components/json-viewer) aus und installier sie mit `npx wingo-ui@latest add json-viewer`.

## Welche Props des JSON Viewers sind am wichtigsten?

Die meisten Screens setzen nur drei oder vier. Die vollständige Liste mit Standardwerten steht auf der [Doku-Seite des JSON Viewers](https://wingo-ui.com/components/json-viewer).

| Prop | Standard | Wirkung |
| --- | --- | --- |
| `defaultExpandDepth` | `1` | Ebenen, die beim Mount offen sind; `0` lässt die Wurzel zu |
| `rootName` | `""` | Ein Key-Label an der Wurzel, etwa `"payload"` |
| `maxStringLength` | `120` | Längere Strings werden abgeschnitten und bekommen einen Show-more-Button |
| `showTypes` | `false` | Ein kleiner Chip vor jedem Wert: string, int, float, bool, null, date |
| `sortKeys` | `false` | Alphabetische Keys auf dem Bildschirm; Kopieren und Download behalten die ursprüngliche Reihenfolge |
| `detectDates` | `true` | ISO-Datumsstrings bekommen die Datumsfarbe und einen Tooltip in lokaler Zeit |
| `height` / `maxHeight` | `0` / `480` | Feste Höhe, oder der Viewer wächst bis zur Obergrenze und scrollt dann intern |
| `toolbar` | `true` | Suche, alles auf- und zuklappen, JSON kopieren und Download |

`size="sm"` (24px hohe Zeilen, 12px Text) mit `toolbar={false}` passt in eine kompakte Karte, etwa für ein großes Tool-Ergebnis in einer Agent-UI. Die [Tool Call Timeline](https://wingo-ui.com/components/tool-call-timeline) zeigt die Argumente und das Ergebnis jedes Schritts in einem Code Block, was für kleine Eingaben reicht. Liefert ein Tool ein tiefes, verschachteltes Ergebnis, passt ein kompakter Viewer besser (der [Guide zur UI für Tool Calls von KI-Agenten](https://wingo-ui.com/de/blog/ai-agent-tool-call-ui) behandelt den Rest dieses Screens). Soll der Viewer ein Panel mit veränderbarer Größe füllen, gib der Wurzel `className="h-full"` und setz sowohl `height={0}` als auch `maxHeight={0}`. Alle Texte stecken in `labels`, mit englischen Standardwerten in `DEFAULT_JSON_VIEWER_LABELS`, und Anzahlen und Datumsangaben richten sich nach `locale`.

## Ist der JSON-Baum barrierefrei?

Ja. Der Baum ist ein einziger Tab-Stopp mit `role="tree"`, und jede Zeile ist ein `treeitem` mit Ebene, Position und Aufklappzustand. Pfeil hoch und Pfeil runter wechseln die Zeile, Bild auf und Bild ab springen um 10 Zeilen, Pfeil rechts öffnet einen Zweig oder springt hinein, Pfeil links schließt ihn oder geht zum Elternknoten, Pos1 und Ende springen zur ersten und letzten Zeile, und `*` öffnet alle Geschwister. Enter klappt einen Zweig auf oder zu oder wählt einen Wert aus, und die Kontextmenü-Taste (oder Shift+F10) öffnet die Aktionen der Zeile. Rückmeldungen zu Kopieren und Download laufen über eine Live-Region im Modus polite, ein Screenreader liest also „Copied“ vor.

## Wie verhält er sich auf dem Handy?

Auf Touchscreens wachsen die Zeilen von 28px auf 36px. Das liegt bewusst unter dem üblichen Touch-Ziel von 44px: Bei 44px zeigt ein Handy etwa 12 Zeilen des Baums, und das ist zu wenig Kontext, um verschachtelte Daten zu lesen. Deshalb liegen die Aktionen im Sheet, das sich bei langem Drücken öffnet, statt in winzigen Buttons in der Zeile. Ist der Viewer schmaler als 512px, brechen lange Werte unter ihren Key um, statt seitlich zu scrollen (`wrap="auto"`), und unter derselben Breite klappt die Toolbar ihre Aktionen in ein ⋯-Menü. Zeilenaktionen wandern von Hover auf langes Drücken, nichts hängt also von einem Mauszeiger ab. Ist die Payload der Hauptinhalt eines Screens, gib ihr den größten Teil der Viewport-Höhe; ein 200px hohes Panel zeigt auf dem Handy etwa fünf Zeilen.

## Wie rendere ich sehr große JSON-Payloads?

Der JSON Viewer teilt lange Arrays in Seiten auf und virtualisiert lange Bäume. Ein Array mit mehr als 100 Einträgen öffnet sich seitenweise. Eine Liste mit 10.000 Datensätzen zeigt also 100 geschlossene Zeilen mit Labels wie `[0 … 99]`, und jede öffnet ihre 100 Einträge. Über `virtualThreshold` (standardmäßig 300 sichtbare Zeilen) liegen nur die Zeilen auf dem Bildschirm im DOM, einzeln gemessen und mit 12 Zeilen Overscan. Lange Strings wie Base64-Dateien werden bei `maxStringLength` abgeschnitten, und ein Suchtreffer weiter hinten in so einem String zeigt den ganzen String. Zirkuläre Referenzen erscheinen als `[Circular → data.parent]`, statt die App abstürzen zu lassen, und BigInt, NaN, Infinity, Maps und Sets bekommen eine lesbare Form.

Zwei Stolperfallen solltest du kennen. `defaultExpandDepth` gilt nur beim Mount, eine spätere Änderung bewirkt also nichts; ruf `api.expandToDepth(n)` auf oder ändere den `key` der Komponente. Und Copy JSON und Download exportieren alles in `data`. Entferne Tokens und personenbezogene Daten deshalb auf dem Server, bevor die Payload eine Admin-Seite erreicht.

## Gibt es eine react json view alternative, die noch gepflegt wird?

Wer nach „json tree react“ sucht, findet immer dieselben paar Pakete. Das steht in ihren eigenen READMEs und Docs, Stand Oktober 2026:

| Bibliothek | Suche | Kopieren | Bearbeiten | Hinweise |
| --- | --- | --- | --- | --- |
| [react-json-view](https://github.com/mac-s-g/react-json-view) | Nicht dokumentiert | Ja | Ja | Laut README nicht mehr gepflegt, verweist auf den Fork von microlink |
| [@microlink/react-json-view](https://github.com/microlinkhq/react-json-view) | Nicht dokumentiert | `enableClipboard` | `onEdit`, `onAdd`, `onDelete` | Der Ersatz, den die ursprüngliche README nennt, base16-Themes |
| [react-json-view-lite](https://github.com/AnyRoad/react-json-view-lite) | Nicht dokumentiert | Nicht enthalten | Nicht enthalten | Klein, das Markup folgt dem Treeview-Beispiel des W3C, v2 braucht React 18+ |
| [react-json-tree](https://github.com/reduxjs/redux-devtools/tree/main/packages/react-json-tree) | Nicht dokumentiert | Nicht dokumentiert | Nicht dokumentiert | Aus den Redux DevTools, base16-Themes, `collectionLimit` gruppiert lange Collections |
| [Geist JSON View](https://vercel.com/geist/json-view) | Hervorhebung über `highlightPattern`, kein Suchfeld | Markierbarer Text | Nicht dokumentiert | Tastaturnavigation, `defaultExpandDepth` |
| [Wingo UI JSON Viewer](https://wingo-ui.com/components/json-viewer) | Eingebaut, öffnet passende Zweige | Wert, Pfad, ganzes JSON, Download | Nein | Virtualisiert, Handy-Layout, Quellcode wird in dein Projekt kopiert |

Wo ein anderes Paket die bessere Wahl ist: Müssen Leute das JSON direkt bearbeiten, nimm @microlink/react-json-view, denn unser Viewer zeigt Daten nur an. Willst du die kleinste reine Anzeige-Komponente für collapsible JSON in React und brauchst weder Suche noch Kopieren, ist react-json-view-lite eine vernünftige Wahl. Für einen Baum aus Ordnern oder Kategorien statt roher Daten passt die [Tree View](https://wingo-ui.com/components/tree-view) besser als jeder JSON Viewer.

## Wann reicht ein Code Block?

Wenn das JSON kurz und fest ist: eine Beispielanfrage in der Doku, ein Config-Snippet, eine Beispielantwort. Fünf Zeilen muss niemand zuklappen. Der [Code Block](https://wingo-ui.com/components/code-block) hebt JSON mit `language="json"` farbig hervor, ergänzt Zeilennummern und einen Kopier-Button und ist kostenlos. Nimm den Viewer, wenn die Daten live, lang oder verschachtelt sind und Leute etwas darin finden müssen. Für fortlaufende Logzeilen mit angehängtem JSON streamt der [Log Viewer](https://wingo-ui.com/components/log-viewer) die Zeilen und öffnet beim Klicken oder Tippen den JSON-Baum einer Zeile darunter, mit genau diesem Viewer ([Guide zum React Log Viewer](https://wingo-ui.com/de/blog/react-log-viewer)). Ist der Baum deine eigene Datenstruktur, etwa Ordner oder Berechtigungen, die Leute anhaken und verschieben, passt der Guide zum [React Tree View](https://wingo-ui.com/de/blog/react-tree-view) besser als ein JSON Viewer.

> Live-Demo (Code Block): Ein kurzes JSON-Beispiel im Code Block: Drück den Kopier-Button im Header, und das Icon wird zu einem Haken. Probier sie unter [Code Block](https://wingo-ui.com/components/code-block) aus und installier sie mit `npx wingo-ui@latest add code-block`.

## Wie füge ich den JSON Viewer zu einem Next.js-Projekt hinzu?

Führ den add-Befehl in einem Next.js-Projekt mit Tailwind CSS v4 aus. Die CLI kopiert die Komponente nach `components/ui`, ergänzt die Hooks und Helfer, die sie importiert, und installiert ihre npm-Pakete, darunter `@tanstack/react-virtual` und `motion`:

```bash
npx wingo-ui@latest add json-viewer code-block
```

Der JSON Viewer gehört zu Wingo UI Pro, das Stand Oktober 2026 $8 im Monat, $80 im Jahr oder einmalig $150 kostet ([Preise von Wingo UI](https://wingo-ui.com/de/pricing)); der Code Block ist kostenlos. Für einen ganzen Admin-Screen drumherum baut das [Tutorial zum Next.js Admin-Dashboard](https://wingo-ui.com/de/blog/nextjs-admin-dashboard-tutorial) die Seiten, und der [Guide zur React AI Chat UI](https://wingo-ui.com/de/blog/react-ai-chat-ui) zeigt, wo Payloads von Tool Calls in einem Chat auftauchen. Weitere Guides findest du in der [Kategorie Komponenten-Guides](https://wingo-ui.com/de/blog/category/components), am besten fängst du mit dem [Guide zu React-Formularkomponenten](https://wingo-ui.com/de/blog/react-form-components-guide) an.

## Komponenten in diesem Artikel

- [JSON Viewer](https://wingo-ui.com/components/json-viewer) (Pro): A collapsible JSON tree with type colors, search that opens the matching branches, copy value or path, and virtualization for huge payloads. Installation: `npx wingo-ui@latest add json-viewer`
- [Code Block](https://wingo-ui.com/components/code-block) (Free): A React code block with syntax highlighting, line numbers, highlighted lines and a copy button, themed from a single accent color. Installation: `npx wingo-ui@latest add code-block`

## Häufige Fragen

### Wie zeige ich JSON in React an?

Für ein kurzes, festes Snippet reicht JSON.stringify(value, null, 2) in einem pre-Element oder einem Code Block. Für Payloads, die Leute durchsuchen müssen, etwa Webhooks, API-Antworten oder die Eingaben von Tool Calls, nimm eine JSON-Viewer-Komponente mit aufklappbarem Baum, Suche und Kopieren.

### Wird react-json-view noch gepflegt?

Nein. Laut der README des ursprünglichen mac-s-g/react-json-view kann der Autor das Paket nicht mehr pflegen, und sie nennt @microlink/react-json-view als möglichen Ersatz. Prüf bei jedem Fork die Peer Dependencies gegen deine React-Version, bevor du ihn installierst.

### Wie durchsuche ich einen JSON-Baum in React?

Vergleich Keys und Werte mit der Suchanfrage, und zwar über alle Daten, nicht nur über die gerenderten Zeilen. Öffne dann die Vorfahren jedes Treffers und scroll zum ersten. Der JSON Viewer von Wingo UI macht das über die Suche in seiner Toolbar, und setApi gibt dir search(query), um eine Suche aus deinem Code zu starten.

### Schafft ein React JSON Viewer 10.000 Einträge?

Ja, wenn er virtualisiert. Der JSON Viewer von Wingo UI öffnet lange Arrays in Seiten mit je 100 Einträgen und rendert ab 300 sichtbaren Zeilen nur die Zeilen auf dem Bildschirm; seine Doku enthält ein Beispiel mit 10.000 Kontakten.

### Kann ich einen JSON-String direkt an den Viewer übergeben?

Nein. Parse ihn vorher mit JSON.parse in einem try-Block. Der JSON Viewer von Wingo UI parst keine Strings, die JSON enthalten, also erscheint eine ungeparste Payload als ein einziger langer String-Wert.

---

Quelle: https://wingo-ui.com/de/blog/react-json-viewer