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

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 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:

npx wingo-ui@latest add json-viewer

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.

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:

"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:

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.

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.

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 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 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:

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 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 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 die Zeilen und öffnet beim Klicken oder Tippen den JSON-Baum einer Zeile darunter, mit genau diesem Viewer (Guide zum 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 besser als ein JSON Viewer.

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:

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); der Code Block ist kostenlos. Für einen ganzen Admin-Screen drumherum baut das Tutorial zum Next.js Admin-Dashboard die Seiten, und der Guide zur React AI Chat UI zeigt, wo Payloads von Tool Calls in einem Chat auftauchen. Weitere Guides findest du in der Kategorie Komponenten-Guides, am besten fängst du mit dem Guide zu React-Formularkomponenten an.

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.