Visualizador JSON
Visualiza datos JSON como un árbol interactivo. Formatea, minifica y analiza tu JSON con estadísticas.
Un visualizador de JSON analiza un documento JSON y lo dibuja como un árbol indentado y con colores en vez de un muro de texto. Pega en el cuadro Input JSON y el panel derecho vuelve a analizar 300 ms después de que dejes de escribir: cadenas en verde, números en azul, booleanos en amarillo y null en gris, con cada array u objeto etiquetado con su número de elementos. Ocho contadores debajo indican claves, cadenas, números, booleanos, nulos, arrays, objetos y profundidad máxima de anidamiento.
Visualizador JSON
El Visualizador JSON le permite pegar, formatear y explorar datos JSON en una vista de árbol interactiva.
Herramientas populares
Acerca de Visualizador JSON
Todo ocurre en la página. Tu JSON se entrega al JSON.parse propio del navegador, así que lo que ves es exactamente lo que aceptaría un motor de JavaScript: sin ida y vuelta al servidor, sin subida y sin más techo de tamaño que la memoria de la pestaña. El análisis lleva un retardo de 300 milisegundos, de modo que el árbol sigue a tu escritura sin reconstruirse en cada tecla.
El panel derecho tiene dos modos. Tree dibuja cada clave en morado seguida de su valor con el color de su tipo, y muestra los arrays como [n] y los objetos como {n}, así que se ve la forma de una carga útil antes de leer nada. Raw muestra esos mismos datos analizados y vueltos a serializar con dos espacios de indentación, útil para copiar una versión normalizada más que para explorar. La etiqueta sobre el panel indica además el tamaño de lo que hay en el cuadro de entrada, en bytes por debajo de 1 KB y en kilobytes por encima.
La barra de herramientas trae Format, que reescribe la entrada con dos espacios de indentación, Minify, que elimina todo espacio y salto de línea, y Copy, que deja en el portapapeles la versión formateada con dos espacios. Cuatro botones de ejemplo —Simple Object, Nested Data, Array of Objects y API Response— sustituyen la entrada por un caso pequeño, que es la forma más rápida de entender los contadores. Ojo: Format, Minify y Copy no hacen nada mientras la entrada no sea válida.
Cuando el análisis falla, el cuadro de entrada se pone rojo y debajo aparece el mensaje exacto de JSON.parse, con la posición del problema. Ese es todo el diagnóstico: esto es un visor y un formateador, no un validador contra un JSON Schema, ni una herramienta de consultas JSONPath, ni un editor; no puedes plegar ramas, buscar en el árbol ni editar valores en el panel derecho. Además exige JSON estricto: comas finales, comillas simples, comentarios y claves sin comillas se rechazan.
Casos de uso
Cómo usar
Pega tu JSON en el cuadro Input JSON de la izquierda, o pulsa uno de los botones de ejemplo: Simple Object, Nested Data, Array of Objects o API Response.
Observa el panel derecho: vuelve a analizar unos 300 ms después de que dejes de escribir y dibuja un árbol con colores, con cadenas, números, booleanos y nulos en tonos distintos.
Si el cuadro de entrada se pone rojo, lee la línea de error de debajo: repite el mensaje del analizador JSON del propio navegador e indica la posición del problema.
Pulsa Format para volver a indentar la entrada con dos espacios, o Minify para dejarlo todo en una sola línea sin espacios.
Alterna los botones Tree y Raw para cambiar el árbol por el texto formateado, y lee debajo los contadores de claves, cadenas, números, arrays, objetos y profundidad.
Pulsa Copy en la barra de herramientas para dejar en el portapapeles el JSON indentado con dos espacios.
Consejos Pro
- Format, Minify y Copy se quedan callados sin hacer nada mientras el JSON no sea válido, porque cada uno empieza con su propio JSON.parse dentro de un try. Si un botón parece muerto, mira primero la línea roja de error bajo la entrada.
- El contador Depth arranca en 0 para un valor escalar y suma un nivel por cada anidamiento, así que un objeto plano marca 1. Es la manera más rápida de detectar una carga útil que exigirá un recorrido recursivo en lugar de un bucle simple.
- El tamaño que aparece junto a Tree View o Formatted mide lo que hay en el cuadro de entrada, no los datos analizados. Pulsa Minify y cae al instante: es una forma rápida de ver cuánto de la carga útil es solo espacio en blanco.
- Keys cuenta cada clave de cada objeto, incluidos los nombres repetidos en un array de objetos: un array de tres objetos de tres claves informa de 9 claves y 1 array, no de 3.
- Carga Array of Objects para ver cómo marca el árbol las colecciones: la raíz muestra [3] y cada elemento {3}, así que los números entre corchetes dan la forma sin desplegar nada.
Solución de problemas
Los botones Format, Minify y Copy no hacen nada al pulsarlos.
Los tres analizan la entrada antes de actuar y se tragan el error cuando falla, así que un documento inválido los deja mudos. Mira el cuadro de entrada: si tiene borde rojo, debajo hay un mensaje de error que indica la posición que hay que corregir.
El árbol no se actualiza al instante mientras escribo.
El análisis lleva un retardo de 300 milisegundos para no reconstruir el árbol en cada tecla. Para un momento y se pone al día; si aun así no lo hace, el documento no es válido y el panel derecho conserva el último análisis correcto.
Un archivo de configuración que mi editor acepta aquí se rechaza.
Los editores suelen admitir JSON with Comments o JSON5, que permiten comentarios, comas finales y claves sin comillas. Esta página usa el JSON.parse estricto. Quita los comentarios y la coma final y pon comillas dobles alrededor de cada clave, o pega solo la parte estrictamente JSON.
La página se queda bloqueada un momento tras pegar una carga útil grande.
El análisis, el dibujado del árbol y el recorrido de estadísticas se ejecutan en el hilo principal, así que un documento de varios megabytes bloquea la interfaz mientras trabaja. Espera a que termine o pega un fragmento representativo en vez de la exportación entera.
Preguntas frecuentes
Es un lector de JSON: analiza el texto y muestra la estructura como un árbol indentado en lugar de una línea larguísima. Pega tu JSON en el cuadro Input JSON de la izquierda y el árbol aparece a la derecha alrededor de un tercio de segundo después. No hace falta nada más: ni botón de ejecutar, ni cuenta, ni subir archivos.
Sí, funciona en la pestaña del navegador sin nada que instalar ni registro alguno. El análisis, el árbol, las estadísticas y las acciones Format, Minify y Copy son JavaScript que se ejecuta en tu propia máquina, así que detrás no hay clave de API, ni cuota, ni coste por petición.
No. El documento se pasa al JSON.parse integrado de tu navegador y se dibuja localmente; ninguna petición saca la entrada de la página. Eso lo hace utilizable con respuestas de API que contienen tokens o datos personales, aunque lo verdaderamente secreto conviene redactarlo antes de meterlo en cualquier herramienta de navegador.
No hay límite fijo, solo lo que quepa en la pestaña. Analizar y redibujar un documento de varios megabytes deja la interfaz visiblemente parada un momento, porque ocurre en el hilo principal. Con ese tamaño, minifica una muestra o divide la carga útil en las partes que de verdad necesitas inspeccionar.
No. El panel derecho ofrece una vista Tree y una vista Raw del texto formateado, y no hay modo tabla, ni selector de columnas, ni exportación a CSV. Para un array de registros, el árbol marca el array como [n] y cada registro como {n}, lo que da el número de filas y de campos sin necesidad de una tabla.
Porque JSON.parse exige JSON estricto. Las comas tras el último elemento, las comillas simples en lugar de dobles, las claves sin comillas, los comentarios y NaN o Infinity se rechazan, aunque un literal de objeto de JavaScript admita varias de esas cosas. La línea roja bajo la entrada indica la posición, normalmente un carácter más allá del error real.
Format vuelve a analizar la entrada y la reescribe con dos espacios de indentación y un valor por línea, que es lo que quieres para leer o para guardar en un repositorio. Minify escribe los mismos datos sin espacios ni saltos de línea, que es lo que quieres para una carga útil que vas a enviar. Ambos sustituyen el contenido del cuadro de entrada.
Pulsa Copy en la barra de herramientas. Analiza lo que haya en el cuadro de entrada y escribe en el portapapeles la versión indentada con dos espacios, así que obtienes la forma ordenada aunque el cuadro tenga ahora una línea minificada. El botón muestra Copied durante dos segundos; si no pasa nada, la entrada no es JSON válido.
Como extensión no: esto es una página web, no un complemento de editor. Una vez cargada sigue funcionando, porque el análisis y el dibujado son locales, así que perder la conexión a mitad de sesión no te detiene. Abrir la pestaña de cero, en cambio, requiere que la página se cargue.
Keys es cada clave de objeto del documento; Strings, Numbers, Booleans y Nulls cuentan los valores de cada tipo; Arrays y Objects cuentan los contenedores; Depth es el nivel de anidamiento más profundo alcanzado. Juntos describen la forma de una carga útil en una línea, útil para detectar una respuesta inesperadamente profunda o inesperadamente vacía.