Visor de árbol JSON

Visor, validador y editor de JSON en línea gratis

Nuestro visor de árbol JSON convierte los datos JSON sin procesar en una estructura de árbol interactiva y plegable que facilita explorar incluso los objetos con más niveles de anidamiento. Pegue una cadena JSON, suba un archivo .json o arrástrelo a la página, y la herramienta valida, analiza y muestra al instante sus datos en una jerarquía navegable, con tipos diferenciados por color para cadenas, números, booleanos y valores nulos.

Además de visualizar, la herramienta funciona como un editor de JSON ligero. Pase el cursor sobre cualquier valor primitivo del árbol para ver los botones de editar y eliminar, y modifique los datos directamente sin cambiar a otro editor. Los cambios se reflejan de inmediato en el JSON subyacente, que luego puede copiar o descargar. El validador de JSON integrado resalta los errores de sintaxis en tiempo real, y la función de corrección automática arregla errores comunes como claves sin comillas, comillas simples y comas finales.

Una potente función de búsqueda permite encontrar claves y valores en toda la estructura, mientras que el panel de estadísticas ofrece un desglose del total de claves, objetos, arreglos, cadenas, números, booleanos, nulos, profundidad máxima y tamaño en bytes. Tanto si depura la respuesta de una API, inspecciona un archivo de configuración o analiza una exportación de base de datos, este visor de JSON en línea mantiene su flujo de trabajo ágil y sus datos privados: todo se ejecuta en su navegador, sin subir nada a ningún servidor.

Características principales

• Vista de árbol interactiva con controles para expandir, contraer, expandir todo y contraer todo
• Validación de JSON en tiempo real con mensajes de error descriptivos
• Corrección automática de errores comunes de JSON: claves sin comillas, comillas simples, comas finales y valores undefined
• Edición y eliminación de valores directamente en la vista de árbol
• Búsqueda de claves y valores con resultados resaltados y visualización de la ruta
• Panel de estadísticas de JSON: total de claves, objetos, arreglos, cadenas, números, booleanos, nulos, profundidad máxima y tamaño
• Alternancia entre formatear (dar formato legible) y minificar el JSON de entrada
• Subida de archivos, arrastrar y soltar, copia al portapapeles y descarga como .json
• Alternancia entre la vista de árbol y la vista de código
• Panel de entrada plegable para disponer de más espacio al ver el árbol

Cómo usar el Visor de árbol JSON

1. Cargue su JSON: Pegue el JSON en el área de entrada, haga clic en “Subir” para seleccionar un archivo .json, arrastre un archivo a la zona de entrada o haga clic en “Cargar ejemplo” para ver una demostración.
2. Valide y analice: La herramienta valida su JSON en tiempo real. Si detecta errores, haga clic en “Corregir errores de JSON” para arreglar automáticamente los problemas comunes.
3. Explore el árbol: Haga clic en los nodos para expandirlos o contraerlos. Use “Expandir todo” y “Contraer todo” para navegar en bloque.
4. Busque datos: Escriba el nombre de una clave o un valor en la barra de búsqueda para localizar las coincidencias con su ruta completa.
5. Edite o elimine valores: Use los controles de editar o eliminar junto a un valor primitivo. Estos controles siguen disponibles en pantallas táctiles; la eliminación requiere confirmación.
6. Exporte sus datos: Haga clic en “Copiar” para colocar el JSON en el portapapeles o en “Descargar” para guardarlo como archivo .json.

Casos de uso

• Depuración de respuestas de API: Pegue una respuesta REST o GraphQL para visualizar su estructura y localizar campos concretos con rapidez.
• Inspección de archivos de configuración: Suba un package.json, un tsconfig.json o cualquier archivo de configuración para verificar su estructura y sus valores.
• Análisis de la estructura de datos: Use el panel de estadísticas para entender la complejidad de un JSON: su profundidad de anidamiento, cuántas claves tiene y su tamaño en bytes.
• Edición rápida de JSON: Haga pequeñas correcciones en los datos JSON sin abrir un IDE completo ni un editor de texto.
• Corrección de errores: Arregle JSON mal formado procedente de registros o de terceros con la función de corrección automática antes de procesarlo en su aplicación.
• Revisión de exportaciones de bases de datos: Inspeccione en un formato legible las exportaciones JSON de MongoDB, Firebase u otras bases de datos de documentos.
• Enseñanza y aprendizaje: Visualice estructuras de datos anidadas para estudiantes que aprenden sobre JSON, API y modelado de datos.

Preguntas frecuentes

Consejos y buenas prácticas

• Dé formato antes de explorar: Haga clic en “Formatear JSON” para dar formato legible a la entrada, de modo que el texto sin procesar se lea mejor junto a la vista de árbol.
• Contraiga el panel de entrada: Tras cargar el JSON, oculte el panel de entrada para dar al árbol el máximo espacio de pantalla en jerarquías profundas.
• Use la búsqueda en archivos grandes: En lugar de expandir nodos a mano en un JSON grande, escriba una clave o un valor en la barra de búsqueda para saltar directamente a las coincidencias.
• Consulte las estadísticas para auditorías rápidas: Use “Mostrar estadísticas” para obtener una visión general de la complejidad de los datos antes de entrar en cada nodo.
• Arrastre y suelte por comodidad: Arrastre un archivo .json desde su administrador de archivos hasta el área de entrada: es la forma más rápida de cargar datos.
• Descargue tras editar: Después de hacer ediciones directas, haga clic en “Descargar” para guardar el JSON modificado como archivo nuevo en lugar de sobrescribir el original.