¿Qué es el Visor JSON?
El JSON en bruto es genial para las máquinas y horrible para los ojos. Cinco niveles de llaves, comas colgantes, una línea larguísima — ya sabes cómo va. El Visor JSON convierte todo eso en algo que de verdad puedes navegar: cada array se vuelve una fila, cada objeto un conjunto de columnas, y las estructuras anidadas se convierten en tablas-dentro-de-tablas en las que puedes ir bajando.
Está pensado para ese momento en que solo quieres VER los datos. No analizarlos, no validarlos, no convertirlos — verlos. Suelta una respuesta fetch, un payload de GraphQL, una línea de log, lo que sea. El visor lo presenta para que sepas de un vistazo si la API devolvió lo que esperabas y si la forma coincide con lo que tu código necesita.
Todo se ejecuta en tu navegador — sin subidas, sin cuenta, sin límite en los ciclos de pegar-y-ver que puedas gastar en una tarde.
Cómo ver JSON aquí
Tres pasos para una vista estructurada de tus datos. Los botones bajo el editor coinciden con lo que estás leyendo.
Pega o carga un ejemplo
Copia JSON desde tu cliente de API (Postman, Insomnia, pestaña Red de las DevTools del navegador) y pégalo a la izquierda. Si primero quieres ver el visor en acción, pulsa Ejemplo para cargar un pequeño conjunto de datos.
{"order": {"id": "ORD-4821", "customer": {"name": "Priya Shah", "tier": "gold"}, "items": [{"sku": "SKU-101", "qty": 2}, {"sku": "SKU-204", "qty": 1}], "total": 189.50}}Si el JSON está mal formado, verás un mensaje justo debajo del editor señalando dónde se detuvo el parser.
Navega la estructura
El lado derecho se redibuja al instante cada vez que cambia tu entrada. Los arrays de objetos aparecen como filas con columnas para cada clave. Los objetos y arrays anidados se convierten en sus propias mini-tablas dentro de la celda, para que puedas seguir visualmente una cadena como order.customer.tier. Usa Principal o Anidado para cambiar la orientación cuando un registro tiene más claves que filas — a veces es más cómodo leer las claves como filas y los valores como columnas. El diseño sigue los tipos JSON definidos en RFC 8259.
Reduce lo que estás mirando
Cada columna tiene una casilla de filtro. Escribe gold en la columna tier, SKU-1 en una columna SKU, pending en una columna de estado — las filas que no coinciden se ocultan. Los filtros no distinguen mayúsculas y se suman (tier=gold Y status=paid). Si una columna te estorba, pulsa Editar y luego el icono (×) de la cabecera para quitarla.
Pantalla completa para datos anchos
Para conjuntos con 20+ columnas, pulsa Pantalla completa. La tabla se expande a toda la ventana y puedes desplazarte horizontalmente sin el panel lateral estorbando. Ideal para depurar una consulta GraphQL densa o un informe desnormalizado.
Comparte o exporta cuando termines
¿Encontraste algo que vale la pena avisar? Pulsa Compartir para crear un enlace corto (1 hora, 1 día o 1 semana) y envíaselo a un compañero — abre la misma vista con el mismo JSON, sin pegar de nuevo. O pulsa Excel para descargar la tabla como .xls para Excel, Google Sheets o LibreOffice. El parsing ocurre en el cliente con JSON.parse().
Cuándo el visor compensa
Echar un ojo a respuestas de API
Golpeas un endpoint en Postman, recibes 8 KB de JSON y necesitas saber si un campo anidado shipping.address.country viene informado. Pega la respuesta aquí y tienes la respuesta en dos segundos. Sin tener que parsear JSON mentalmente.
Leer streams de logs
Los logs estructurados de <a href="https://www.elastic.co/es/elasticsearch" target="_blank" rel="noopener">Elasticsearch</a>, CloudWatch o cualquier logger JSON-line llegan como blobs de una línea. Suelta uno aquí para ver timestamp, servicio, nivel, mensaje y trace ID bien colocados — útil cuando estás siguiendo un servicio inestable a las 2 de la mañana.
Revisar ejemplos de esquema
¿Mirando payloads de ejemplo en una spec <a href="https://swagger.io/specification/" target="_blank" rel="noopener">Swagger/OpenAPI</a> o en el README de un equipo? Pega el bloque de ejemplo y recorre la forma campo a campo. Más rápido que leer JSON indentado de arriba abajo, y detectas al instante los campos opcionales o que faltan.
Mostrar datos a stakeholders
Tu PM quiere saber qué devuelve la API de checkout, pero "aquí tienes un blob JSON" no va a colar. Genera un enlace para compartir, pégalo en Slack, y ve una tabla de verdad — sin tener que explicar llaves ni dos puntos.
FAQ
¿Qué diferencia hay entre un visor JSON y un analizador JSON?
Se solapan mucho, pero el enfoque es distinto. Un analizador se centra en convertir el texto JSON en una estructura usable (y en avisar de errores de sintaxis). Un visor se centra en la salida — cómo se presenta el resultado analizado para que puedas leerlo. Esta herramienta hace ambas cosas por debajo, pero la interfaz está afinada para navegar datos grandes o muy anidados, no solo para validarlos.
¿Mis datos salen de mi navegador?
No. El parsing y el renderizado ocurren localmente con JavaScript. Los datos solo salen si pulsas "Compartir" para acuñar un enlace corto, y aún así tú eliges la caducidad (de 1 hora a 1 semana). Si estás mirando algo sensible, simplemente no compartas — cierra la pestaña y listo.
¿Hasta qué profundidad puede llegar el anidamiento?
No hay límite estricto. El visor renderiza recursivamente arrays y objetos anidados a la profundidad que le eches. Las estructuras muy profundas acaban siendo visualmente densas — a partir del quinto o sexto nivel, considera usar la fila de filtros para centrarte en la rama que de verdad te importa, o cambia la orientación anidada con el botón Anidado.
¿Puedo ver también arrays de primitivos, no solo de objetos?
Sí. Un array como ["read", "write", "admin"] se muestra como una lista de una sola columna. Los arrays mixtos (objetos + primitivos) también funcionan — cada elemento tiene su propia fila y el visor deduce el conjunto de columnas a partir de las claves que aparecen en los objetos.
¿Por qué faltan algunas columnas después de refrescar el JSON?
Si quitaste columnas antes (con el icono × en modo edición), el visor lo recuerda durante la sesión actual y también oculta las claves correspondientes del JSON. Pegar JSON nuevo vuelve a ejecutar la detección. Si falta una columna que esperabas, revisa si el modo edición la quitó, o si la clave existe realmente en todos los registros.
¿Qué tamaño de archivo JSON es cómodo?
Archivos de hasta unos pocos MB se renderizan rápido. Por encima de 5 MB notarás que el navegador trabaja. Por encima de 10 MB va a lo tonto pero el visor aguanta — si tratas habitualmente conjuntos de 50 MB o más, coge antes una herramienta CLI como jq o gron, y pega aquí la parte relevante.
Herramientas JSON relacionadas
Ver es solo una de las cosas que querrás hacer con JSON. Si necesitas algo más específico, prueba estas: