¿Qué es un editor de árboles JSON?

JSON almacena datos como objetos, que contienen valores con nombre, y matrices, que contienen listas ordenadas. Como pueden estar anidados, cambiar un documento grande en un editor de texto simple resulta difícil: basta con que falte una coma o una llave para que todo el archivo deje de ser válido. Un editor de árboles muestra los mismos datos como un conjunto de nodos que puedes abrir y cerrar. Puedes cambiar un valor, renombrar una clave o añadir y eliminar un nodo directamente; la herramienta se encarga de las comas, las comillas y los corchetes.

Descripción de la herramienta

Esta herramienta te permite editar JSON como un árbol. Pega tu JSON y aparecerá como un árbol de objetos, matrices y valores. Usa el lápiz situado junto a un nodo para cambiar su clave o valor, el signo más situado junto a un objeto o matriz para añadir un elemento secundario y la papelera para eliminar un nodo. Cada cambio se escribe inmediatamente en el texto JSON, para que puedas copiar el resultado cuando termines. También puedes escribir en el editor de texto y el árbol se actualizará. Todo ocurre en tu navegador y tus datos no se envían a ningún sitio.

Ejemplos

Comienza con este JSON:

{
  "name": "example-app",
  "port": 8080,
  "tags": ["json", "tree"]
}
JSON

Cambia port a 3000, añade el string editor a tags y añade una nueva clave private con el valor true. El texto queda así:

{
  "name": "example-app",
  "port": 3000,
  "tags": ["json", "tree", "editor"],
  "private": true
}
JSON

Funciones

  • Edita claves, strings, números, valores booleanos y valores null directamente
  • Añade nuevas claves a los objetos y nuevos elementos a las matrices, y elimina cualquier nodo excepto el raíz
  • Cambia el tipo de un valor, por ejemplo, de string a número
  • Conserva el orden de las claves y avisa cuando una clave ya se utiliza en el mismo objeto
  • Expande o contrae todo el árbol y muestra cuántos nodos contiene

Cómo funciona

La herramienta analiza tu texto como JSON y muestra el resultado como un árbol. Cuando haces un cambio, crea una nueva copia de los datos con ese cambio y la vuelve a escribir como texto con una indentación de 2 espacios. Al renombrar una clave, esta conserva su posición entre sus elementos hermanos. Las claves que parecen números enteros, como "1" o "2", siempre aparecen primero en orden ascendente, como en cualquier analizador JSON de JavaScript.

Un valor tiene uno de seis tipos: string, número, booleano, null, objeto o matriz. Los objetos y matrices nuevos comienzan vacíos y puedes rellenarlos con el botón más. Un objeto o matriz que ya tiene elementos conserva su tipo, para que no puedas perder su contenido por accidente, pero aún puedes renombrar su clave.

Consejos

  • Pulsa Enter para guardar un cambio y Escape para cancelarlo. Dentro de un string, pulsa Shift y Enter para añadir un salto de línea
  • Si el texto de la izquierda no es un JSON válido, el árbol permanece vacío y se muestra el error hasta que lo corrijas
  • El árbol no tiene función de deshacer, así que conserva una copia de tu JSON original si no estás seguro de un cambio
  • Los números mayores que 9007199254740991 pierden precisión porque los números JSON se leen como números de JavaScript
  • Para consultar un JSON sin modificarlo, utiliza el visor de árboles JSON