Si has buscado cómo hacer JSON legible, probablemente has visto herramientas tanto de "JSON viewer" como de "JSON formatter" — y te habrás preguntado si son lo mismo. No lo son, aunque la línea entre ellos se ha difuminado a medida que las herramientas se vuelven más capaces. Entender la distinción ayuda a elegir la herramienta adecuada: dar formato a la salida cruda de una API, explorar una respuesta profundamente anidada durante depuración, o leer un archivo de configuración grande sin perderte.
¿Qué es un formateador de JSON?
Un formateador de JSON toma JSON crudo, sin formato — normalmente una sola línea larga — y lo reescribe con indentación y saltos de línea consistentes. Los datos no cambian; solo cambian los espacios en blanco.
// Entrada cruda
{"user":{"id":42,"name":"Alice","roles":["admin","editor"],"active":true}}
// Tras formatear (indentación de 2 espacios)
{
"user": {
"id": 42,
"name": "Alice",
"roles": [
"admin",
"editor"
],
"active": true
}
}Un formateador es una operación de texto. Lee la cadena JSON, normaliza los espacios y produce una nueva cadena. La mayoría también valida el JSON como efecto colateral — si está mal formado, no puede indentarlo correctamente y mostrará un error.
Para qué son buenos los formateadores de JSON:
- Hacer legibles respuestas de API minificadas en segundos
- Estandarizar la indentación entre el equipo (2 espacios vs 4 espacios vs tabuladores)
- Producir salida pretty-printed para documentación o logs
- Servir como verificación rápida de que el JSON es válido
¿Qué es un visor de JSON?
Un visor de JSON — a veces llamado JSON reader o JSON explorer — va un paso más allá. En lugar de producir texto formateado, renderiza el JSON como una estructura interactiva que puedes navegar.
La característica clave de un visor de JSON son los nodos plegables. Cada objeto {} y array [] puede expandirse o plegarse de forma independiente. Esto significa que puedes mirar el nivel superior de una respuesta de 10 000 líneas, encontrar la sección que te interesa, expandir solo esa rama e ignorar todo lo demás.
Un visor típico también ofrece:
- Resaltado de sintaxis — claves, cadenas, números, booleanos y null aparecen en colores distintos, haciendo evidente la estructura
- Nodos plegables/expandibles — pliega un subárbol entero para reducir el ruido visual
- Conteo de elementos — los nodos plegados muestran de un vistazo cuántos hijos contienen (por ejemplo,
[...] 24 items) - Navegación por claves — encuentra claves específicas sin desplazarte por miles de líneas
Para qué son buenos los visores de JSON:
- Explorar respuestas API grandes y profundamente anidadas
- Depurar sin conocer la forma de los datos de antemano
- Revisar archivos de configuración donde solo importan unas pocas secciones
- Entender estructuras JSON desconocidas rápidamente
"JSON tree viewer" es lo mismo
Verás la misma funcionalidad llamada JSON tree viewer, JSON tree o collapsible JSON tree. Los tres describen un visor que renderiza el documento como una jerarquía interactiva de nodos expandibles. Si buscas específicamente ese término, ve JSON Tree Viewer: explora JSON como un árbol plegable.
Ya tienes uno: las DevTools del navegador
Vale la pena saberlo: Chrome, Firefox y Edge renderizan un visor de JSON plegable incorporado cuando el Content-Type de una respuesta es application/json. Abre la URL directamente (o el panel Preview de la pestaña Network) y obtienes un árbol gratis — sin extensión. Perfecto para una lectura rápida; un visor dedicado lo supera para payloads muy grandes, control de "plegar todo" y búsqueda de claves.
La diferencia central, resumida
La forma más simple de pensarlo: un formateador cambia cómo se ve el texto; un visor cambia cómo interactúas con los datos.
| Formateador JSON | Visor JSON | |
|---|---|---|
| Salida | Texto formateado | Árbol interactivo |
| Nodos plegables | No | Sí |
| Resaltado de sintaxis | A veces | Siempre |
| Copiable como texto | Sí | Normalmente vía exportación |
| Mejor para | Limpiar la salida | Explorar la estructura |
Cuándo usar un formateador JSON
Usa un formateador cuando necesites salida de texto legible — algo que puedas pegar, commitear, loguear o enviar a un colega.
Leer respuestas de API en la terminal
Ejecutas curl https://api.example.com/users/42 y obtienes un muro de JSON minificado. Pégalo en una herramienta de formateo y será legible en segundos.
Estandarizar archivos antes de hacer commit
Si tu equipo tiene una guía de estilo que exige indentación de 2 espacios, un formateador la aplica consistentemente sin edición manual.
Chequeos rápidos de validez
Pegar JSON roto en un formateador te dice de inmediato si parsea. Si ves un error, el JSON está mal formado. Si se formatea limpio, es válido.
Documentación y capturas de pantalla
El JSON pretty-printed se ve mejor en docs, archivos README y mensajes de Slack que una sola línea minificada.
Cuándo usar un visor JSON
Usa un visor cuando necesites navegar y explorar — cuando aún no sabes exactamente qué hay en el JSON o dónde encontrarlo.
Explorar respuestas API grandes
Recibes una respuesta con docenas de objetos y arrays anidados. Plegar los nodos de nivel superior te da un mapa de la estructura. Solo expandes la rama que estás investigando.
Depurar sin conocer previamente el esquema
Al trabajar con una API de terceros por primera vez, un visor te permite hacer clic por el árbol para entender las relaciones entre objetos antes de escribir cualquier código de parseo.
Leer configuraciones profundamente anidadas
Los manifiestos de Kubernetes, las plantillas de AWS CloudFormation y archivos similares suelen contener muchos niveles anidados. Un visor hace práctico encontrar un ajuste enterrado cinco niveles abajo.
Comparar formas de datos entre entornos
Expande la respuesta de producción y la de staging lado a lado. Los nodos plegados facilitan ver qué secciones difieren.
Qué tienen en común los buenos visores JSON
No todos los visores JSON son iguales. Esto separa a uno útil de uno frustrante:
- Controles de plegar/expandir todo — necesitas reiniciar la vista al instante; un visor sin botón de "plegar todo" te obliga a cerrar nodos uno por uno
- Rendimiento confiable en archivos grandes — algunos visores basados en navegador sufren con JSON de decenas de miles de nodos; las mejores herramientas lo manejan con elegancia
- Resaltado de sintaxis preciso — las claves deberían verse distintas a los valores string; números, booleanos y null cada uno visualmente distinto
- Manejo limpio de casos extremos — objetos vacíos, arrays vacíos, valores null y estructuras profundamente anidadas, todos deben renderizar correctamente
- Sin subida de datos requerida — tu JSON a menudo contiene datos sensibles; un visor que lo procesa todo localmente en tu navegador es mucho más seguro que uno que envía datos a un servidor
JSON Reader: ¿es algo distinto de nuevo?
"JSON reader" suele usarse de manera intercambiable con "JSON viewer" — describe el acto de leer y navegar JSON en lugar de editarlo o reformatearlo. Si ves una herramienta marcada como JSON reader, casi con seguridad proporciona navegación basada en árbol con nodos plegables, igual que un visor.
Ocasionalmente "reader" aparece en contexto de código — por ejemplo, JsonReader en la librería Gson de Java — pero en el contexto de herramientas web, reader y viewer significan lo mismo.
¿Necesitas ambos?
Sí — y las buenas herramientas combinan ambas capacidades. Una herramienta JSON moderna formateará tu entrada (normalizando la indentación) y la renderizará como un árbol navegable. El texto formateado y el visor interactivo coexisten: usas el que mejor encaje con la tarea actual.
La distinción importa más cuando las herramientas están hechas a propósito para uno u otro. Un formateador de línea de comandos como jq o python -m json.tool te da solo salida de texto. Un visor dedicado en una extensión del navegador te da solo navegación por árbol. Para el trabajo diario, una única herramienta basada en navegador que haga ambas cosas es la configuración más práctica.
Cómo elegir la herramienta adecuada
Si trabajas principalmente en la terminal
jq es el estándar. Formatea, filtra y consulta JSON con un lenguaje de expresión potente. No tiene visor, pero para flujos de trabajo con scripts es inigualable.
Si trabajas en un editor de código
VS Code con la extensión Prettier formatea JSON al guardar. Para navegación por árbol, el editor JSON integrado en las DevTools de la mayoría de los navegadores es sorprendentemente capaz.
Si necesitas una solución rápida de pegar-y-ver
Una herramienta basada en navegador es la vía más rápida. Busca una que valide mientras escribes, ofrezca vista de árbol plegable, maneje archivos grandes sin congelarse y mantenga tus datos en local. El visor JSON de fixjson hace todo esto — pega tu JSON y el árbol se renderiza al instante, sin enviar datos a ningún servidor.
Si lidias con JSON roto o mal formado
Ni un formateador estándar ni un visor te ayudarán — necesitas primero una herramienta de reparación de JSON. Las herramientas de reparación arreglan errores comunes como comas finales, comillas simples y claves sin comillas antes de pasar el JSON limpio a un visor o formateador.
Preguntas frecuentes
¿Cuál es la diferencia entre un visor JSON y un formateador JSON?
Un formateador produce texto legible e indentado que puedes copiar; un visor renderiza un árbol interactivo con nodos plegables y resaltado de sintaxis que puedes navegar. Formateador = cómo se ve el texto; visor = cómo interactúas con los datos.
¿Es lo mismo un visor JSON que un JSON reader?
En herramientas web, sí — "reader", "viewer" y "explorer" describen navegación basada en árbol con nodos plegables. ("JsonReader" en librerías como Gson no tiene relación.)
¿Necesito tanto un visor como un formateador?
La mayoría de herramientas modernas los combinan — formatean la entrada y renderizan un árbol plegable en la misma vista, así nunca eliges entre legibilidad y navegabilidad.
¿Y si mi JSON está roto?
Ni un visor ni un formateador ayudan — repáralo primero con JSON Fix, luego visualiza o formatea la salida limpia. Ver también Cómo formatear JSON.
Conclusión
Un formateador JSON te da texto legible. Un visor JSON te da un árbol interactivo. Ambos son útiles — cuál uses depende de si necesitas salida copiable y pegable, o una estructura por la que puedas hacer clic y explorar.
Para la mayoría de los desarrolladores, la herramienta ideal hace ambas cosas: formatea la entrada y renderiza un árbol plegable en la misma vista. Así nunca eliges entre legibilidad y navegabilidad.
Si tu JSON está roto antes de intentar siquiera verlo, arréglalo primero — un visor y un formateador requieren JSON válido como entrada; una herramienta de reparación no.