Visor JSON en línea: Formatea y explora árbol

Usa este visor JSON para formatear y explorar datos como un árbol plegable, expandir o plegar nodos y copiar rutas exactas.

Tu JSON se analiza y se muestra localmente en tu navegador, y nada se sube a un servidor.

Creado y mantenido por Udit Agarwal

¿Necesitas tipos de TypeScript desde tu JSON? Prueba la herramienta JSON a TypeScript.

Acerca de Visor de JSON

Este visor JSON te da un espacio de trabajo de dos paneles para leer y ordenar JSON: edita, formatea o minifica tus datos en la pestaña Texto y luego cambia a la pestaña Visor para recorrerlos como un árbol plegable. Está hecho para personas desarrolladoras, equipos de QA y cualquiera que depure una respuesta de API y necesite ver JSON en línea sin buscar a través de un muro de texto. Expande o pliega nodos, profundiza en objetos y arreglos anidados, y haz clic en cualquier valor para copiar su ruta exacta. Como visor de árbol JSON, también funciona como un formateador JSON rápido, ayudándote a embellecer payloads minificados y a detectar la estructura de un vistazo. Todo se ejecuta por completo en tu navegador, así que tus datos nunca salen de tu dispositivo y nada se sube a un servidor.

Características

  • Diseño de dos paneles: una pestaña Texto para editar y formatear, y una pestaña Visor para explorar
  • Vista de árbol plegable para expandir y plegar objetos y arreglos anidados
  • Botones de Expandir todo y Plegar todo para reorganizar todo el documento a la vez
  • Haz clic en cualquier nodo para ver su ruta completa (por ejemplo author.links) en la barra inferior
  • Copia la ruta de un nodo con un clic para usarla en código o consultas
  • Formatea para embellecer o Minifica para compactar el JSON sin procesar en la pestaña Texto
  • Descarga el JSON formateado o copia todo el documento al instante
  • Se ejecuta por completo en tu navegador sin subir nada a un servidor

Cómo usar Visor de JSON

  1. Pega o escribe tu JSON en la pestaña Texto.
  2. Haz clic en Formatear para embellecerlo, o en Minificar para compactarlo, y confirma que es válido.
  3. Cambia a la pestaña Visor para ver el árbol plegable.
  4. Usa Expandir todo o Plegar todo, o haz clic en nodos individuales para profundizar.
  5. Haz clic en un valor y copia su ruta desde la barra inferior.

Ejemplo

Entrada

{"author":{"name":"Ada","links":["site","blog"]}}

Salida

{
  "author": {
    "name": "Ada",
    "links": [
      "site",
      "blog"
    ]
  }
}

Formateado en la pestaña Texto; al hacer clic en el primer link en el Visor se muestra la ruta author.links[0].

Errores comunes y solución de problemas

  • La pestaña Visor está vacía o no muestra nada que expandir. — Revisa la pestaña Texto por un error de sintaxis como una coma final o una clave sin comillas; el árbol solo renderiza JSON válido.
  • Un fragmento pegado tiene comillas simples o claves al estilo de JavaScript. — El JSON requiere claves y valores string con comillas dobles. Convierte las comillas simples a comillas dobles antes de visualizarlo.
  • Un documento enorme se siente lento al expandir. — Usa Plegar todo primero y luego expande solo las ramas que necesitas en lugar de abrir todos los nodos a la vez.
  • Copiaste una ruta pero no coincide con tu código. — Las rutas usan notación de punto y corchetes desde la raíz; ajústala a la sintaxis de acceso de tu lenguaje si difiere.

Preguntas frecuentes

¿Para qué sirve el Visor JSON?
El Visor JSON te permite formatear, minificar y explorar JSON como un árbol plegable, para que puedas leer respuestas de API y archivos de configuración sin revisar un muro de texto sin procesar.
¿Cómo obtengo la ruta de un valor en el Visor JSON?
Haz clic en cualquier nodo en la pestaña Visor y su ruta, por ejemplo author.links, aparece en la barra inferior, lista para copiar.
¿Puedo expandir o plegar todo el árbol a la vez?
Sí. Usa los botones de Expandir todo y Plegar todo en la barra de herramientas para reorganizar todo el documento con un clic.
¿El Visor JSON también formatea y minifica mi JSON?
Sí. La pestaña Texto embellece o compacta el JSON sin procesar con los botones de Formatear y Minificar, y luego la pestaña Visor lo muestra como un árbol navegable.
¿Mi JSON se envía a algún lugar cuando uso el Visor JSON?
No. El Visor JSON procesa todo localmente en tu navegador, así que tus datos nunca salen de tu dispositivo y nada se sube.
¿Cómo maneja el Visor JSON el JSON inválido?
La pestaña Visor necesita JSON válido para construir el árbol; corrige cualquier error señalado en la pestaña Texto, incluida la línea y columna, y el árbol se renderizará.

Herramientas relacionadas

  • Formateador de JSON — Embellece, minimiza y valida JSON con la ubicación de los errores.
  • Visor de árbol JSON — Explora JSON como un árbol plegable y tipado.
  • JSON a TypeScript — Genera interfaces de TypeScript a partir de una muestra JSON.
  • JSON a CSV — Convierte un arreglo de objetos JSON planos a CSV.
  • YAML ↔ JSON — Convierte YAML a JSON y de vuelta.
  • Formateador de XML — Embellece, minifica y valida XML, y convierte XML ↔ JSON.
  • Comparar texto — Compara dos textos línea por línea y ve adiciones y eliminaciones.
  • JSON a código — Genera tipos de Go, Rust, Python, Java, Kotlin, C# y TypeScript a partir de JSON.

Más herramientas de JSON

  • JSON a TypeScript — Genera interfaces de TypeScript a partir de una muestra JSON.
  • JSON a CSV — Convierte un arreglo de objetos JSON planos a CSV.
  • Escapar / Desescapar JSON — Escapa texto a una cadena JSON o desescapa una cadena JSON a texto sin formato.
  • JSON a código — Genera tipos de Go, Rust, Python, Java, Kotlin, C# y TypeScript a partir de JSON.
  • JSON Diff — Compara dos documentos JSON con un diff estructural por rutas.
  • JSON Schema — Genera un JSON Schema desde una muestra o valida un documento JSON contra uno.
  • JSON Flatten / Unflatten — Aplana JSON anidado a claves con notación de puntos, o vuelve a anidarlo.
  • JSON a Zod — Genera un esquema de Zod a partir de una muestra JSON.
  • JSON a Pydantic — Genera clases de modelo Pydantic v2 a partir de una muestra JSON.
  • Evaluador de JSONPath — Prueba expresiones JSONPath contra tu JSON y ve las coincidencias en vivo.
  • JSON a TOON — Convierte JSON a TOON para usar menos tokens en los prompts de LLM.
  • jq Playground — Ejecuta filtros jq contra JSON con el motor jq real, todo en tu navegador.

Ver todas las herramientas de JSON (29) · Todas las herramientas