Cómo ver JSON en forma de árbol
- Pega el JSON, suelta un archivo o cárgalo desde una URL. El árbol aparece junto al texto.
- Haz clic en una fila para expandirla o contraerla, o usa Expandir todo y Contraer todo. Con el teclado, ↑ y ↓ te desplazan, y ← y → cierran y abren los nodos.
- Escribe en el cuadro de búsqueda para mostrar solo las claves y los valores que coincidan. Selecciona un nodo para copiar su JSONPath, su ruta de JavaScript o su valor.
Cómo leer el árbol JSON
- Los objetos muestran su número de claves, por ejemplo
{5}, y los arrays su número de elementos, por ejemplo[12]. - Los colores y unas pequeñas etiquetas indican el tipo de cada valor: cadena, número, booleano, null, objeto o array.
- Los arrays largos se muestran de 200 en 200 elementos, así que los archivos con cientos de miles de valores siguen respondiendo con fluidez.
- Los números se muestran exactamente como están escritos: los ID largos no se redondean y las claves mantienen su orden original.
¿Qué es JSONPath?
JSONPath describe dónde se encuentra un valor dentro de un documento JSON, de forma parecida a la ruta de un archivo. Se estandarizó en 2024 como RFC 9535. $ es la raíz, .name selecciona una propiedad, [0] un elemento de un array y ['first name'] una propiedad cuyo nombre contiene espacios o caracteres especiales.
| Ruta | Selecciona |
|---|---|
$.store | la propiedad store del objeto raíz |
$.products[0] | el primer elemento del array products |
$.products[0].price | el precio de ese primer producto |
$.address.geo.lat | un valor anidado a tres niveles de profundidad |
$['shipping address'].city | una clave con un espacio en el nombre |
En JavaScript, el mismo valor es data.products[0].price; usa Copiar ruta JS para obtener esa forma.
Preguntas frecuentes
¿Puedo abrir archivos JSON grandes?
Sí. Solo se dibujan las partes expandidas del árbol y los arrays largos aparecen de 200 en 200 elementos, así que los archivos de decenas de megabytes se abren en un navegador de escritorio.
¿Cómo copio la ruta de un valor?
Haz clic en el nodo y usa Copiar ruta para obtener el JSONPath ($.users[0].email) o Copiar ruta JS para la ruta de JavaScript (data.users[0].email).
¿Puedo editar el JSON en el visor?
El visor es de solo lectura, así que nada cambia por accidente. Para cambiar valores, renombrar claves o añadir elementos, abre el editor JSON.
¿Qué pasa si mi JSON no es válido?
El cuadro de error muestra la línea, la columna y la causa del problema, y el árbol sigue mostrando la última versión válida hasta que se corrija el error.