Ver JSON como árbol en VS Code

Instala JSON Tree Viewer, abre un archivo .json y haz clic en el icono del árbol, arriba a la derecha del editor: verás el archivo como un árbol con búsqueda y rutas JSONPath. El árbol, la búsqueda, copiar rutas, la tabla, el JSON escapado, los números grandes exactos y Go to line son gratis. Zovo Pro (USD 19, un solo pago) añade la exportación de un array a CSV o JSON Lines y la comparación de dos archivos JSON, y puedes probar cada herramienta 3 veces gratis.

Instalar en VS Code Página del Marketplace Open VSX (Cursor, Windsurf, VSCodium)

Gratis, licencia MIT. Extension ID zovo.zovo-json-tree-viewer.

Pasos en VS Code

Instala JSON Tree Viewer desde el Marketplace, o pulsa Ctrl+P (Cmd+P en macOS) y ejecuta ext install zovo.zovo-json-tree-viewer.
Abre un archivo .json, .jsonc, .json5, .geojson, .har, .ipynb o .webmanifest y haz clic en el icono del árbol, arriba a la derecha del editor, o haz clic derecho en el archivo en el Explorador y elige “Open in JSON Viewer”. El editor de texto sigue siendo el predeterminado, así que puedes editar como siempre.
Haz clic en los nodos para abrirlos, o usa los botones 1, 2, 3 y All para expandir hasta ese nivel. Con las flechas te mueves por el árbol: la derecha abre un nodo y la izquierda lo cierra o sube al padre.
Escribe en Search y pulsa Enter. La búsqueda recorre todas las claves y valores del archivo, no solo las filas abiertas; Enter o ↓ va a la siguiente coincidencia y Shift+Enter o ↑ a la anterior.
Haz clic en un nodo para ver su JSONPath en la barra inferior, por ejemplo $.items[3].id. Copy JSONPath, Copy JS path y Copy value lo copian al portapapeles. Con Go to line, o la tecla G, se abre el editor de texto al lado con el cursor en esa clave.
Si un nodo es un array de objetos, haz clic en su chip Table para verlo como tabla y ordena las columnas haciendo clic en la cabecera. Si una cadena contiene JSON escapado, haz clic en su chip JSON string para leerla como árbol.

En Cursor, Windsurf y VSCodium

Estos editores instalan extensiones desde Open VSX. Abre la vista Extensions (Ctrl+Shift+X), busca zovo.zovo-json-tree-viewer y pulsa Install. Su página en Open VSX es zovo/zovo-json-tree-viewer. Después se usa igual que en VS Code.

Qué es gratis

Todo el visor es gratis: el árbol, la búsqueda, copiar rutas y valores, la tabla, el JSON escapado, los números grandes exactos, Go to line y la recarga cuando el archivo cambia. El archivo se analiza en un hilo aparte y la vista solo dibuja las filas que están en pantalla; en las pruebas del proyecto, un array de 30 MB con 350.000 objetos muestra sus primeras filas en unos 0,6 segundos. Los ID de 64 bits como 18446744073709551615 se muestran dígito a dígito, mientras que JSON.parse los redondearía. Cuando el archivo cambia en disco, el árbol se vuelve a leer y conserva los nodos abiertos, la selección y la búsqueda. Para ver JSON que no está guardado en un archivo, selecciónalo o cópialo y ejecuta “JSON Viewer: Open Selection or Clipboard in JSON Viewer”. La extensión funciona sin conexión, sin telemetría, y abre los archivos en modo de solo lectura.

Qué añade Zovo Pro

Export Array to CSV or JSON Lines guarda un array de objetos como archivo CSV o JSON Lines, con una fila por elemento. Los objetos anidados se convierten en columnas con puntos, como customer.address.city, los números grandes se mantienen exactos y el texto que Excel ejecutaría como fórmula se escribe como texto. Así pasas una respuesta de API o un volcado de datos a una hoja de cálculo sin escribir un script. La otra herramienta Pro, Compare Two JSON Files, crea un informe con cada valor cambiado, añadido o eliminado según su ruta. El orden de las claves no cuenta, y los arrays de objetos se emparejan por su id (o _id, uuid, key, name, code, sku, slug) en lugar de por su posición.

Cómo se usa Export Array to CSV or JSON Lines

Abre una tabla en el visor y haz clic en “Export CSV…” encima de ella, o elige “Export Array to CSV or JSON Lines (Zovo Pro)” en el menú de la barra de título del editor. También puedes hacer clic derecho en el archivo en el Explorador y elegir “Zovo Pro: Export array to CSV or JSON Lines”.
Si el archivo tiene varios arrays de objetos, elige cuál exportar. Después elige el formato, CSV o JSON Lines.
Elige dónde guardar el archivo en el cuadro de diálogo y haz clic en Export.

Export Array to CSV or JSON Lines funciona 3 veces gratis antes de pedir una licencia. Al abrir un archivo no aparece ninguna ventana emergente ni cuenta atrás.

Pagar con tarjeta, USD 19 una vez

Zovo Pro cuesta USD 19 en un solo pago. No es una suscripción y activa las herramientas Pro en todas las extensiones de Zovo. Después de pagar con tarjeta (Stripe), la clave de licencia aparece en la página siguiente. En VS Code, ejecuta "Enter Zovo Pro license key" desde la Command Palette y pega la clave. La clave se comprueba en tu equipo, sin conexión a la red.

Un equipo de 5 personas paga USD 59 en un solo pago, también con tarjeta. Todas las reglas y herramientas Pro están en la página de Zovo Pro (en inglés).

Lo que no hace

Los archivos de más de 200 MB no se abren. Puedes subir el límite hasta 1 GB con jsonTreeViewer.maxFileMB, pero el análisis necesita varias veces el tamaño del archivo en memoria.
Expandir todo se detiene en 1.000.000 de filas visibles y la búsqueda en 10.000 coincidencias; en ambos casos verás un aviso.
Los números demasiado largos para JavaScript solo se muestran exactos en archivos JSON y JSONC. En JSON5 se redondean, como con JSON.parse, y Go to line no funciona en JSON5.
La tabla muestra como columnas solo las primeras 200 claves.

Preguntas

¿La extensión es gratis?

Sí. El visor completo es gratis. Export Array to CSV or JSON Lines y Compare Two JSON Files forman parte de Zovo Pro (USD 19, un solo pago). Puedes probar cada una 3 veces gratis, y un intento solo cuenta cuando se ha creado un archivo o un informe.

¿Sirve para formatear o editar JSON?

No. El visor abre los archivos en modo de solo lectura. Para editar, sigue usando el editor de texto de VS Code, que continúa siendo el predeterminado; con Go to line saltas desde el árbol a la línea exacta. Copy value copia los objetos y arrays como JSON formateado.

¿Funciona en Cursor?

Sí. La extensión también está publicada en Open VSX, así que puedes instalarla en Cursor, Windsurf y VSCodium.

¿Qué pasa si el JSON tiene un error?

El visor muestra un mensaje con la línea y la columna del error y las líneas de alrededor. Si el archivo deja de ser válido mientras está abierto, por ejemplo mientras otra herramienta lo escribe, la última versión correcta sigue en pantalla con un aviso.

Todas las funciones y ajustes están en la página de JSON Tree Viewer (en inglés).

Comprobado con la versión 0.3.2 de la extensión el 2026-11-12.