JSON Formatter: Embellecer y Validar JSON

¿Qué es JSON Formatter?

JSON Formatter es una herramienta basada en el navegador que toma texto JSON crudo o mal formado y produce una salida limpiamente indentada y legible en segundos. Los desarrolladores se encuentran constantemente con JSON ilegible: desde respuestas de API comprimidas en una sola línea, hasta fragmentos de configuración copiados que perdieron su espaciado en blanco, o archivos editados manualmente con errores de sintaxis sutiles. Esta herramienta resuelve los tres problemas a la vez: formatea con indentación configurable, valida la sintaxis y repara errores comunes automáticamente usando la biblioteca jsonrepair.

A diferencia de las alternativas del lado del servidor, el JSON Formatter se ejecuta completamente en tu navegador. Tus datos nunca abandonan tu máquina. No hay cuenta, ni límite de velocidad, ni costo.

Funciones principales

• Formatear con indentación personalizable (2 o 4 espacios) — Elige tu tamaño de indentación preferido en el menú desplegable de la barra de acciones antes de hacer clic en Formatear. La selección persiste entre sesiones cuando se combina con el guardado de preajustes.
• Validar la sintaxis JSON con mensajes de error — La herramienta ejecuta JSON.parse después de intentar la reparación automática y muestra el mensaje de error exacto si la entrada no se puede analizar, mostrado en el panel de salida con un atributo role="alert" accesible.
• Reparar automáticamente JSON mal formado — La biblioteca jsonrepair corrige cadenas entre comillas simples, comas finales, claves sin comillas y otras desviaciones comunes antes del análisis. Si se aplica la reparación, una notificación emergente distintiva te lo indica.
• Minificar JSON (eliminar espacios en blanco) — Produce una salida de una sola línea con todos los espacios de formato eliminados, útil para incrustar JSON en archivos de configuración o reducir el tamaño del payload.
• Copiar la salida formateada al portapapeles — Copia con un clic usando la API del portapapeles con un respaldo para navegadores más antiguos.
• Descargar como archivo .json — Guarda la salida como formatted.json con el tipo MIME application/json.
• Pestaña Validador de esquemas — Pega datos JSON y un documento JSON Schema draft-07; la herramienta informa cada violación con su ruta exacta (p. ej., root.user.email).
• Pestaña Generador de esquemas — Pega cualquier objeto JSON; la herramienta infiere un documento JSON Schema draft-07 que incluye formatos detectados (email, fecha, UUID, URI).
• Pestaña Visor de árbol — Renderiza el JSON analizado como un árbol colapsable interactivo con tipos codificados por colores, resaltado de búsqueda, expandir/contraer todo y copia de rutas con un clic.

Cómo usar JSON Formatter

Paso 1: Pega tu JSON

Abre la pestaña Formatear/Minificar (la vista predeterminada). Pega tu JSON en el panel de entrada en el lado izquierdo. El área de texto acepta entradas de cualquier tamaño y puede redimensionarse verticalmente arrastrando el borde inferior. Si estás cargando un enlace compartido de un colega, la herramienta lee la entrada de la URL automáticamente y muestra una notificación emergente.

Paso 2: Elige la indentación

En la barra de acciones debajo de los paneles, abre el menú desplegable de indentación. Selecciona 2 espacios (el predeterminado) o 4 espacios. Esto controla cuántos espacios se usan por nivel de anidamiento en la salida. Una indentación de 4 espacios es común en proyectos Python y algunas guías de estilo; 2 espacios es el estándar en los ecosistemas JavaScript y Node.js.

Paso 3: Haz clic en Formatear

Haz clic en el botón Formatear o presiona Cmd+Enter (Mac) / Ctrl+Enter (Windows/Linux). El JSON formateado aparece en el panel de salida de solo lectura en la derecha. Si la entrada contiene problemas corregibles — como comas finales o claves sin comillas — una notificación emergente lee "JSON formatted and repaired" para confirmar que se aplicó la reparación. Si el JSON no se puede reparar, aparece un mensaje de error debajo del panel de salida con el error de análisis específico.

Ejemplo de entrada (respuesta de API comprimida):

{"user":{"id":4821,"name":"Maria Santos","email":"maria@example.com","roles":["admin","editor"],"active":true,"lastLogin":null}}

Salida con indentación de 2 espacios:

{
  "user": {
    "id": 4821,
    "name": "Maria Santos",
    "email": "maria@example.com",
    "roles": [
      "admin",
      "editor"
    ],
    "active": true,
    "lastLogin": null
  }
}

Paso 4: Minificar (opcional)

Para reducir el JSON de vuelta a una sola línea, haz clic en Minificar o presiona Cmd+Shift+M / Ctrl+Shift+M. Esto es útil cuando tienes JSON formateado que necesita incrustarse en una variable de entorno o una cadena de configuración.

Paso 5: Copiar o descargar la salida

Haz clic en Copiar para colocar la salida en tu portapapeles. Haz clic en Descargar para guardar formatted.json en tu carpeta de descargas. El botón Copiar está deshabilitado hasta que exista una salida, evitando operaciones accidentales de portapapeles vacío.

Usar el Validador de esquemas

Cambia a la pestaña Validador de esquemas. Pega tus datos JSON en el panel izquierdo y un documento JSON Schema en el panel derecho, luego haz clic en Validar. Los resultados aparecen debajo con una marca de verificación verde para datos válidos o una lista roja de violaciones. Cada violación muestra su ruta en notación de puntos (p. ej., root.addresses[0].postalCode) y una descripción en lenguaje claro de lo que falló (p. ej., "La cadena no coincide con el patrón: ^\\d{5}$").

Usar el Generador de esquemas

Cambia a la pestaña Generador de esquemas. Pega un objeto JSON de muestra y haz clic en Generar esquema. La herramienta produce un documento JSON Schema draft-07 inferido de la muestra en segundos, incluyendo sugerencias de formato para cadenas que parecen correos electrónicos, fechas (YYYY-MM-DD), fechas y horas ISO, UUIDs y URIs.

Usar el Visor de árbol

Cambia a la pestaña Visor de árbol. Pega JSON y el árbol se construye automáticamente después de un debounce de 500 ms (no es necesario presionar ningún botón). Haz clic en cualquier nodo de objeto o matriz para expandirlo o contraerlo. Usa el cuadro de búsqueda para resaltar nodos cuya clave o valor coincida con tu término. Haz clic en Expandir todo para abrir toda la estructura a la vez, o pasa el cursor sobre cualquier nodo para revelar un botón de copia de ruta que copia la ruta en notación de puntos a ese campo.

Ejemplos prácticos

Depurar una respuesta de API

Una API REST devuelve un perfil de usuario comprimido para solución de problemas:

{"profile":{"id":"a3f8-bc21","created":"2025-11-03","tier":"pro","quota":{"used":14200,"limit":50000},"features":["export","api","webhooks"]}}

Pégalo y haz clic en Formatear con indentación de 2 espacios. La salida muestra inmediatamente la jerarquía de anidamiento, dejando claro que quota es un objeto anidado con dos campos y features es una matriz de tres cadenas. Copia el resultado y pégalo en tu informe de errores.

Validar un archivo de configuración contra un esquema

Tu aplicación espera una configuración con un entero port requerido entre 1 y 65535 y una cadena host requerida. Pega el JSON de configuración en el panel izquierdo del Validador de esquemas y un esquema como:

{
  "type": "object",
  "required": ["host", "port"],
  "properties": {
    "host": { "type": "string" },
    "port": { "type": "integer", "minimum": 1, "maximum": 65535 }
  }
}

Si port es "8080" (una cadena en lugar de un entero), el validador informa: root.port — Expected integer, got string.

Generar un esquema para un nuevo contrato de API

Tienes una respuesta de muestra de una nueva API de terceros y necesitas escribir un JSON Schema para ella rápidamente. Pega la muestra en la pestaña del Generador de esquemas y haz clic en Generar esquema. La herramienta produce un esquema draft-07 en segundos, que luego puedes refinar manualmente añadiendo restricciones como minLength, pattern o valores enum.

Consejos y mejores prácticas

Usa los atajos de teclado. Cmd+Enter formatea y Cmd+Shift+M minifica sin alcanzar el ratón. En el YAML Formatter el atajo equivalente es Cmd+Shift+J para la conversión a JSON, pero en esta herramienta Cmd+Shift+M siempre significa minificar.

Verifica la notificación de reparación. Si el toast de éxito dice "formatted and repaired" en lugar de "formatted successfully", revisa tu fuente original. La reparación puede haber corregido un error genuino en un archivo de configuración que debería corregirse en la fuente.

El visor de árbol se construye automáticamente. No necesitas hacer clic en Construir árbol — el árbol se renderiza 500 ms después de que dejes de escribir. Esto es útil para explorar rápidamente una estructura de datos desconocida mientras aún estás editando la entrada.

Copia rutas para acceso en JavaScript. En el Visor de árbol, pasa el cursor sobre cualquier nodo y haz clic en el icono de copia que aparece. La ruta copiada (p. ej., root.users[2].address.city) es la notación exacta de punto y corchete que necesitas para acceder a ese valor en JavaScript después de JSON.parse().

El generador de esquemas marca todas las claves existentes como requeridas. Después de generar un esquema, revisa la matriz required y elimina los campos que son genuinamente opcionales en tu modelo de datos.

Problemas comunes y solución de problemas

Error "Invalid JSON syntax" al pegar — La entrada no pudo repararse automáticamente. Las causas comunes son las comillas escapadas que se escaparon doblemente durante la copia (\\" en lugar de \"), o caracteres binarios pegados desde una terminal. Intenta seleccionar el JSON en su aplicación fuente y copiarlo de nuevo, o verifica si hay caracteres invisibles.

La salida está vacía después de hacer clic en Formatear — El campo de entrada está vacío o contiene solo espacios en blanco. El botón Formatear está deshabilitado cuando la entrada está en blanco, pero si de alguna manera se activa, el mensaje de error "Please enter JSON to format" aparece debajo del panel de salida.

El Validador de esquemas muestra "Invalid JSON data" — El texto en el panel izquierdo del Validador de esquemas no es JSON válido. A diferencia de la pestaña Formatear, el Validador de esquemas no aplica reparación automática. Pega primero en la pestaña Formatear, copia la salida corregida y luego regresa al Validador de esquemas.

El Visor de árbol muestra "Invalid JSON" — El visor de árbol analiza con JSON.parse sin reparación. Si tu JSON tiene problemas menores, fórmatealo primero en la pestaña Formatear para obtener una copia limpia, luego pégala en el Visor de árbol.

La descarga produce un archivo llamado formatted.json cada vez — Esto es por diseño. Renombra el archivo después de descargarlo.

Privacidad y seguridad

JSON Formatter procesa todo en tu navegador usando JavaScript. Ninguna entrada — incluyendo claves de API sensibles, tokens, contraseñas o datos personales incrustados en JSON — se transmite a ningún servidor. La herramienta funciona completamente sin conexión una vez que la página se ha cargado. No hay ganchos de análisis en la lógica de formateo en sí. Puedes pegar con seguridad secretos de producción, credenciales de bases de datos o PII en esta herramienta sin que los datos abandonen tu máquina.

Preguntas frecuentes

¿Es JSON Formatter gratuito? Sí, el JSON Formatter es completamente gratuito sin límites de uso. Las pestañas Formatear, Minificar, Validador de esquemas, Generador de esquemas y Visor de árbol están disponibles sin costo. Las funciones premium de los seguidores de Glyph Widgets como preajustes guardados, historial de sesiones y notas de herramientas están disponibles para los seguidores, pero la funcionalidad de formateo principal no requiere nada.

¿Funciona sin conexión? Sí. Una vez que la página se ha cargado en tu navegador, todas las operaciones de formateo y validación se ejecutan localmente en JavaScript. Puedes desconectarte de Internet y continuar usando la herramienta sin ninguna pérdida de funcionalidad.

¿Es seguro pegar mis datos aquí? Sí. Todo el procesamiento ocurre en tu navegador. El texto de entrada nunca se envía a un servidor, se registra ni se almacena en ningún lugar fuera de tu sesión del navegador. Puedes formatear con seguridad JSON que contenga claves de API, contraseñas o datos personales.

¿Qué formatos JSON maneja la reparación automática? La herramienta usa la biblioteca jsonrepair, que maneja cadenas entre comillas simples, comas finales en objetos y matrices, claves de propiedad sin comillas, comentarios (// y / /), corchetes de cierre faltantes y varias otras desviaciones comunes de la especificación JSON.

¿Qué restricciones admite el Validador de esquemas? El validador admite type, enum, required, properties, additionalProperties, minProperties, maxProperties, minLength, maxLength, pattern, format (email, uri, date, date-time, ipv4, ipv6, uuid), minimum, maximum, exclusiveMinimum, exclusiveMaximum, multipleOf, minItems, maxItems, uniqueItems e items.

¿Qué formatos detecta automáticamente el Generador de esquemas? El generador detecta direcciones de correo electrónico, fechas ISO (YYYY-MM-DD), fechas y horas ISO, UUIDs y URIs. También distingue entre tipos integer y number para valores numéricos.

¿Puedo validar una matriz en lugar de un objeto? Sí. El validador de esquemas y el generador de esquemas aceptan cualquier valor JSON válido en el nivel raíz, incluyendo matrices, cadenas, números y booleanos, no solo objetos.

¿Cuál es el atajo de teclado para formatear? Presiona Cmd+Enter en macOS o Ctrl+Enter en Windows y Linux para activar Formatear. Presiona Cmd+Shift+M o Ctrl+Shift+M para Minificar. Estos atajos solo se activan cuando la pestaña Formatear/Minificar está activa.

¿Puede la herramienta manejar archivos JSON muy grandes? La herramienta almacena hasta 10.000 caracteres por entrada del historial, pero el formateo en sí no tiene límite incorporado más allá de la memoria del navegador. Los archivos muy grandes (varios megabytes) se formatearán correctamente, pero el área de texto puede sentirse lenta en dispositivos de gama baja.

¿A qué borrador de esquema apunta el esquema generado? El generador produce documentos JSON Schema draft-07, identificados por "$schema": "http://json-schema.org/draft-07/schema#" en la salida.

Herramientas relacionadas

XML Formatter — Formatea y valida documentos XML con los mismos controles de indentación y soporte de minificación.

YAML Formatter — Formatea archivos YAML y los convierte directamente a salida JSON con indentación configurable.

JSON Converter — Convierte JSON hacia y desde CSV, XML, YAML y otros formatos de datos.

Prueba JSON Formatter ahora: JSON Formatter