Visor de Árbol JSON

Visor de Árbol JSON - Explorador y Visualizador de Datos JSON Interactivo

Un potente visor de árbol JSON online que le ayuda a visualizar, explorar y comprender estructuras de datos JSON complejas. Presenta una interfaz de árbol colapsable interactiva, resaltado de sintaxis, búsqueda en tiempo real, copia de rutas, modo pantalla completa y opciones de vista personalizables. Perfecto para desarrolladores, probadores de API, analistas de datos y cualquiera trabajando con datos JSON anidados.

¿Por qué mi JSON es inválido aunque parece correcto?

Los culpables más comunes son las comas finales, las claves sin comillas, las comillas simples y los comentarios sueltos: todos válidos en JavaScript pero prohibidos por la especificación JSON (RFC 8259). El JSON estricto exige claves y cadenas entre comillas dobles, sin coma después del último elemento de un arreglo u objeto y sin comentarios de ningún tipo. Otros errores frecuentes son usar barras invertidas sin escapar dentro de cadenas (escribe \\ para una sola barra invertida), caracteres de control sin escapar como un salto de línea crudo y copiar "comillas tipográficas" (“”) desde un procesador de texto en lugar de comillas rectas (""). Este visor muestra el primer error de análisis con línea y columna exactas para que saltes directo al carácter ofensor. Si necesitas consumir entrada no estricta de un archivo de configuración, pégala primero en un convertidor JSON5 y luego pasa el resultado limpio por este visor.

¿Cuál es la diferencia entre objetos y arreglos JSON en la vista de árbol?

JSON tiene dos tipos de contenedores y el visor los marca de forma distinta. Los objetos son colecciones no ordenadas de miembros con nombre y aparecen como {} con pares clave:valor; el visor muestra el nombre de la clave en un color destacado y la especificación no garantiza orden alguno. Los arreglos son secuencias ordenadas y aparecen como [] con índices numéricos 0, 1, 2…; el orden es significativo y debe preservarse. Dentro de cualquiera de los dos puedes anidar cualquier valor: cadena, número, booleano, null, otro objeto u otro arreglo. Usa objetos cuando cada elemento tenga un identificador estable y arreglos cuando los elementos sean intercambiables u ordenados. Mezclarlos es normal: un arreglo de objetos es la forma canónica para datos tabulares, y un objeto cuyos valores son arreglos es la forma canónica para datos agrupados.

¿Cómo expando o colapso todos los nodos a la vez?

Usa los controles Expandir Todo y Colapsar Todo en la parte superior del árbol. Expandir Todo abre recursivamente cada objeto y arreglo hasta los valores hoja, útil cuando quieres revisar el documento entero o pasarlo a un lector de pantalla. Colapsar Todo muestra solo las claves de nivel superior, mucho más rápido de escanear en cargas grandes. Para abrir una sola rama sin revelar sus hijos, haz clic directamente en el triángulo de despliegue junto a ese nodo; mantén Alt (u Option en macOS) y haz clic para alternar ese nodo y todos sus descendientes a la vez. El estado de expansión actual se conserva mientras buscas, así que un resultado dentro de una rama colapsada autoexpandirá solo la ruta necesaria para revelarlo.

¿Este visor maneja BOM UTF-8 y otros problemas de codificación?

Sí. El analizador retira una marca de orden de bytes UTF-8 inicial (los bytes EF BB BF, agregados a menudo por herramientas Windows y algunas exportaciones Java) antes de analizar, así que un archivo con BOM no provocará un error de sintaxis aquí. El propio JSON debe estar codificado en UTF-8, UTF-16 o UTF-32 según RFC 8259, con UTF-8 muy recomendado para intercambio. Si pegas texto UTF-16 desde el portapapeles, el navegador ya lo habrá decodificado, así que rara vez debes preocuparte. El visor también muestra correctamente las secuencias de escape: \u00e9 se muestra como é, los pares sustitutos como \uD83D\uDE00 se muestran como un solo emoji 😀 y \n aparece como un salto de línea literal dentro de cadenas, sin romper el diseño.

¿Qué significan realmente las secuencias de escape como \u00e9, \n, \t y \/?

Son los seis escapes de cadena definidos por JSON. \" inserta una comilla doble, \\ inserta una barra invertida, \/ inserta una barra diagonal (legal pero opcional: nunca hay que escapar la barra para parsear, solo para incrustar JSON dentro de una etiqueta <script> HTML), \b \f \n \r \t insertan los caracteres de control ASCII retroceso, salto de página, salto de línea, retorno de carro y tabulador, y \uXXXX inserta el punto de código Unicode con valor hexadecimal XXXX. Para puntos de código por encima de U+FFFF, JSON usa pares sustitutos UTF-16: \uD83D\uDE00 codifica el emoji de cara sonriente U+1F600. Cualquier otro escape con barra invertida (por ejemplo \x41 o \0) es un error de sintaxis en JSON estricto, aunque muchos lenguajes acepten esas formas en sus propios literales.

¿Cómo consulto un valor profundamente anidado con JSONPath o una expresión similar?

JSONPath ($ para raíz, .clave para hijo, [n] para índice de arreglo, .. para descenso recursivo, [?(@.campo=='x')] para filtro) y JMESPath (un superconjunto más estricto con multiselect y proyecciones) son los dos lenguajes de consulta dominantes para JSON. Permiten escribir expresiones como $.store.book[?(@.price < 10)].title para extraer el título de cada libro de menos de 10 dólares sin escribir código imperativo. Este visor se centra en navegar más que en consultar, así que para evaluar una expresión JSONPath abre nuestra herramienta dedicada JSON Path Finder, pega el mismo documento y escribe la expresión. Para uso programático existen librerías en cada lenguaje principal: jsonpath-plus y JMESPath.js en JavaScript, jsonpath-ng y jmespath en Python, y la función integrada JSON_TABLE en motores SQL modernos.

¿Cuál es el archivo JSON más grande que puedo pegar sin bloquear el navegador?

Los navegadores suelen poder parsear JSON de hasta unos 50 MB en un equipo de escritorio, pero lo que realmente congela la UI es renderizar un árbol con millones de nodos. Como regla aproximada, planifica menos de 5 MB o menos de 100 000 valores hoja para una experiencia interactiva fluida; por encima de eso el visor usa renderizado virtualizado y solo dibuja los nodos visibles. Para archivos mayores de 100 MB deberías transmitir los datos con un analizador estilo SAX en lugar de cargar todo el documento en memoria: ijson en Python, JSONStream en Node o Jackson Streaming API en Java te permitirán recorrer el documento evento por evento y procesar registros conforme llegan. Para conjuntos verdaderamente masivos cambia el formato a NDJSON (un valor JSON por línea) o Parquet para poder leer y filtrar sin materializar nunca el documento completo.

¿Por qué los números grandes como 9007199254740993 se muestran incorrectamente?

JSON permite cualquier número decimal con precisión arbitraria, pero JavaScript parsea cada número a un double IEEE 754 de 64 bits, que solo puede representar enteros exactos hasta 2^53 − 1 = 9 007 199 254 740 991 (el valor de Number.MAX_SAFE_INTEGER). Los valores mayores se redondean silenciosamente al double más cercano representable, así que 9007199254740993 se vuelve 9007199254740992. Esto afecta a quienes usan JSON para transportar IDs de base de datos, IDs snowflake de Twitter, valores de blockchain o marcas de tiempo en nanosegundos. La solución estándar es citar los números grandes como cadenas ("id": "9007199254740993") y parsearlos con BigInt o una librería decimal en el receptor. JSON5 y algunos analizadores ofrecen una opción "usar BigInt para enteros fuera del rango seguro", pero JSON.parse del navegador no, así que verifica siempre si tu productor está citando enteros grandes antes de confiar en comparaciones de igualdad.

Características Clave

• Estructura de árbol colapsable interactiva para navegación fácil
• Resaltado de sintaxis con tipos de datos codificados por color
• Expandir todo / colapsar todo para operaciones masivas
• Expandir a niveles específicos (1, 2, 3 o todos)
• Búsqueda en tiempo real para encontrar claves y valores
• Copiar ruta JSON a cualquier nodo (notación de punto)
• Copiar valores individuales al portapapeles
• Mostrar/ocultar tipos de datos para vista más clara
• Mostrar/ocultar índices de array
• Modo pantalla completa para estructuras JSON grandes
• Soporte de modo oscuro con alternador de tema
• Formatear JSON minificado o sin formato
• Cargar JSON de ejemplo para pruebas
• Maneja objetos y arrays profundamente anidados
• Indicadores visuales para objetos, arrays y primitivos
• Diseño responsive para móvil y escritorio
• 100% del lado del cliente - sus datos nunca salen de su navegador
• Funciona offline después de la carga inicial
• Sin límites de tamaño de archivo
• Renderizado rápido incluso para archivos JSON grandes