DevToolPal
DE

JSON-Baum-Editor

JSON als aufklappbaren Baum ansehen und Schlüssel, Werte und Typen direkt bearbeiten – das JSON wird dabei laufend aktualisiert.

Läuft lokal, wird nie hochgeladen

Optionen

Einrückung

JSON

0 Zeichen · 0 B

Baum

Das Ergebnis erscheint hier

Was das Tool macht

Der JSON-Baum-Editor macht aus einem JSON-Dokument einen aufklappbaren Baum, den du direkt durchsuchen und bearbeiten kannst. Statt in einer langen Textdatei nach einem fehlenden Komma zu suchen, änderst du einen Wert in einem kleinen Eingabefeld, und das Tool schreibt gültiges JSON für dich.

Praktisch für Konfigurationsdateien, API-Antworten, Test-Fixtures und Übersetzungsdateien – also überall, wo du erst die Struktur verstehen und dann ein paar präzise Änderungen machen musst.

So funktioniert es

  1. Füge JSON in die Eingabe links ein oder lade das Beispiel.
  2. Erkunde den Baum. Klicke auf den Pfeil neben einem Objekt oder Array, um es auf- oder zuzuklappen, und lege mit Ebenen aufklappen fest, wie tief der Baum standardmäßig geöffnet ist.
  3. Bearbeite direkt:
    • Klicke auf einen Schlüssel, um ihn umzubenennen. Schlüssel behalten ihre Position im Objekt.
    • Klicke auf einen String oder eine Zahl, um den Wert zu ändern. Booleans haben ein Menü mit true oder false.
    • Wandle über das Typ-Menü rechts in jeder Zeile einen Wert in einen anderen JSON-Typ um.
    • Klicke auf +, um einem Objekt oder Array ein Kind hinzuzufügen, oder auf ×, um einen Knoten zu löschen.
  4. Drücke Enter oder klicke woanders hin, um eine Änderung zu übernehmen, oder Escape, um sie zu verwerfen.
  5. Kopiere das aktualisierte JSON aus der Eingabe. Die Option Einrückung bestimmt, wie es formatiert wird.

Pfade

Wählst du eine Zeile aus, wird ihr Pfad im JSONPath-Stil angezeigt, etwa $.author.name oder $.keywords[2], mit einem Button zum Kopieren. Schlüssel, die keine einfachen Bezeichner sind, werden in Anführungszeichen gesetzt, zum Beispiel $["first name"]. Pfade sind nützlich, wenn du Code oder Abfragen schreibst, die dasselbe Feld lesen – etwa mit jq, JavaScript-Optional-Chaining oder einer JSON-Funktion deiner Datenbank.

Sicheres Bearbeiten

Bearbeitungen erzeugen nie ungültiges JSON. Lässt sich eine Änderung nicht anwenden – zum Beispiel, weil ein Schlüssel in einen bereits vorhandenen umbenannt wird oder Buchstaben in eine Zahl getippt werden –, zeigt das Tool über dem Baum eine Meldung an und lässt dein Dokument unverändert.

Enthält das JSON links einen Syntaxfehler, wird der Baum durch den Fehler mit Zeile und Spalte ersetzt, sodass du den Text korrigieren und weitermachen kannst.

FAQ

› Werden meine Änderungen in den JSON-Text übernommen?

Ja. Jede Änderung im Baum wird direkt in das JSON links zurückgeschrieben, formatiert mit der gewählten Einrückung, sodass du es jederzeit kopieren oder herunterladen kannst.

› Wie füge ich Einträge hinzu oder entferne sie?

Mit dem Plus-Button in einer Objekt- oder Array-Zeile hängst du ein Kind an, mit dem Kreuz-Button in einer beliebigen Zeile löschst du sie. Neue Objektmitglieder bekommen einen Platzhalterschlüssel wie key oder key2, den du umbenennen kannst.

› Was passiert, wenn ich einen Typ ändere?

Das Tool behält so viel wie möglich. Eine Zahl wird bei der Umwandlung in einen String zu ihrem Text, ein Array wird zu einem Objekt mit dem Index als Schlüssel, und ein Objekt wird zu einem Array seiner Werte.

› Wird mein JSON hochgeladen?

Nein. Parsen und Bearbeiten finden in deinem Browser statt.