Visor de Árbol JSON

Explora JSON grande en un árbol plegable, expande y colapsa nodos, busca claves y valores y copia la ruta exacta a cualquier valor. Todo en tu navegador.

🌐 English

Drop a .json file here or paste JSON below.

🔒 Privado por diseño: todo funciona localmente en tu navegador; nada se sube nunca a ningún servidor.

Escrito y mantenido por Última actualización

Cómo explorar un archivo JSON

  1. Arrastra un archivo .json al cuadro de arriba, haz clic en Choose a file, o pega el JSON directamente en el área de texto y haz clic en View as tree.
  2. Haz clic en la flecha ▶/▼ de cualquier objeto o array para expandir o colapsar esa rama, o usa Expand all y Collapse all para abrir o plegar todo el documento de una vez.
  3. Escribe en el cuadro Search keys & values para encontrar cada clave o valor que contenga tu texto; usa los botones ‹ y › para saltar entre coincidencias y ve cómo el árbol se expande y se desplaza para revelar cada una.
  4. Pasa el ratón sobre cualquier fila y haz clic en el botón de ruta atenuado de la derecha para copiar la ruta de acceso exacta de ese valor (como results[0].address["zip code"]) al portapapeles.

Por qué un visor de árbol en lugar de un formateador

Un formateador de JSON es la herramienta adecuada cuando quieres leer el texto: formatear un bloque minificado o cazar un error de sintaxis. Pero en cuanto el JSON es grande, una respuesta de API paginada con cientos de registros, una configuración muy anidada, un resultado de GraphQL, una colección de features geográficas, formatearlo solo te da miles de líneas indentadas por las que desplazarte. Lo que realmente quieres es estructura: colapsar las partes que no te importan, entrar en la única rama que sí, y encontrar el campo concreto enterrado ocho niveles más abajo.

Ese es el hueco que llena esta herramienta. Convierte el texto crudo en un árbol plegable para que puedas ocultar todo lo irrelevante y centrarte en un subárbol a la vez. El caso clásico es la respuesta de API demasiado grande para que un formateador sea útil: la pegas, colapsas el array de nivel superior, expandes el único registro que estás depurando y buscas el nombre del campo que vuelve mal. Como el árbol está virtualizado (solo se dibujan las pocas filas en pantalla) sigue respondiendo con fluidez aunque el documento subyacente tenga cientos de miles de nodos.

Copia la ruta exacta a cualquier valor

La función que más usan los desarrolladores es copiar la ruta. Cuando has encontrado el valor que te interesa, rara vez quieres solo verlo: quieres referenciarlo en código, en una aserción de test, en una consulta JSONPath o en un informe de error. Cada fila tiene un botón de copia que te da un accesor de JavaScript válido para ese nodo: a.b[2].c. Es cuidadoso con los casos incómodos que hacen tropezar a los generadores de rutas ingenuos, una clave con espacio o punto, o que empieza por un dígito, se escribe en notación de corchetes con cadena (["weird key"], ["a.b"], ["2"]) en lugar de notación de punto inválida, y los elementos de un array siempre usan [n]. Pega la ruta después del nombre de tu propia variable y funciona.

Privado, porque tu JSON nunca sale de tu dispositivo

El JSON es donde los datos sensibles se esconden a plena vista: tokens de portador, cookies de sesión serializadas en una configuración, correos de clientes en un volcado de API, IDs y claves internas. Pegar eso en un “visor de JSON online” desconocido que lo procesa en su servidor le entrega a un extraño una copia de justo lo que intentabas inspeccionar. Esta herramienta lee y analiza todo dentro de tu propia pestaña del navegador con JavaScript puro (no hay ninguna vía de procesamiento en servidor para esta herramienta, ni para ninguna de este sitio) así que nada del documento se transmite jamás a ningún sitio. También es segura frente a JSON que contiene cadenas con aspecto de HTML: cada clave y valor se muestra como texto literal, nunca se interpreta como marcado.

Usos comunes

Cómo funciona, en imágenes

Captura de pantalla de la herramienta Visor de Árbol JSON con una zona de carga que también acepta JSON pegado directamente, antes de cargar nada
Visor de Árbol JSON en pleno proceso: una zona de carga que también acepta JSON pegado directamente, antes de cargar nada.
Captura de pantalla del resultado de Visor de Árbol JSON mostrando el documento representado como un árbol plegable, con cada nodo expandible para inspeccionar los valores anidados
El resultado final: el documento representado como un árbol plegable, con cada nodo expandible para inspeccionar los valores anidados. El enlace de descarga es una URL blob local: el archivo nunca sale de tu dispositivo.

Preguntas frecuentes

¿Se sube mi JSON a un servidor para visualizarlo?

No. El archivo se lee desde tu dispositivo con la propia File API del navegador (o directamente desde el cuadro donde lo pegas), se analiza con el JSON.parse integrado de JavaScript y se muestra como árbol enteramente dentro de esta pestaña; nunca sale de tu ordenador. Esto importa porque los JSON suelen contener datos reales como tokens de acceso, correos, IDs internos y claves de API, y esta herramienta no tiene ninguna vía de servidor para enviarlos.

¿Qué tamaño de archivo JSON puede abrir?

El visor lee archivos de hasta 50 MB. El árbol está virtualizado (solo se renderizan las filas visibles en pantalla) así que un archivo con cientos de miles de nodos sigue desplazándose con fluidez. En pruebas, un archivo de unos 6 MB con cerca de 600.000 nodos analizó y construyó su árbol en bastante menos de un segundo. La salvedad honesta es que JSON.parse aún debe mantener todo el archivo en memoria a la vez (no se puede construir un árbol desde un análisis parcial), así que un archivo verdaderamente enorme se maneja mejor con una herramienta de línea de comandos o en streaming.

¿Qué copia exactamente el botón junto a cada fila?

Copia una ruta de acceso de JavaScript lista para pegar hasta ese valor exacto, como a.b[2].c. Las claves de objeto usan notación de punto cuando son identificadores válidos y cambian a notación de corchetes con cadena cuando no lo son, una clave con espacio se convierte en ["weird key"], una clave que contiene un punto en ["a.b"] y una clave con aspecto numérico en ["2"], mientras que los elementos de un array siempre usan [n]. Pégala después del nombre de tu propia variable y resuelve a ese valor.

¿Puedo buscar dentro del JSON?

Sí. El cuadro de búsqueda compara tu texto tanto con las claves de objeto como con los valores primitivos (cadenas, números, booleanos, null), sin distinguir mayúsculas, y te dice cuántas coincidencias encontró. Los botones ‹ y › recorren cada coincidencia en orden del documento, y si una coincidencia está dentro de una rama colapsada el árbol expande automáticamente sus padres y la desplaza a la vista, así nunca afirma tener una coincidencia que luego deja oculta.

¿Qué significan las etiquetas de color y los contadores?

Cada fila muestra una etiqueta de tipo (string, number, boolean, null, object o array) clasificada con honestidad, de modo que null nunca se etiqueta como object ni un array se trata como un objeto normal. Los contenedores también muestran un contador, un objeto muestra cuántas claves tiene como {n} y un array su longitud como [n]. Un objeto o array vacío muestra un contador de cero y no tiene flecha de expansión, porque realmente no tiene hijos.

¿Modifica o reformatea mi JSON?

No. Es un visor de solo lectura que analiza tu JSON y te muestra su estructura, pero nunca reescribe, reordena ni edita los datos. Si quieres formatear o minificar el texto en sí, usa el Formateador de JSON; si quieres editar valores, usa el Editor de JSON.

Herramientas relacionadas