Formateador JSON

Introducción

Un formateador JSON es una herramienta esencial para cualquiera que trabaje con datos JSON — desarrolladores, testers de API, analistas de datos y redactores técnicos. El JSON sin procesar de APIs o archivos de configuración a menudo está minimizado o mal indentado, lo que dificulta su lectura y depuración. El formateador JSON convierte la entrada JSON desordenada en una salida limpia y bien estructurada con sangrías adecuadas y validación de sintaxis.

A diferencia de las herramientas de línea de comandos o extensiones de navegador que requieren instalación, el Formateador JSON de Toollect funciona completamente en su navegador. Cada pegado se analiza al instante, dándole retroalimentación inmediata sobre la validez y estructura de su JSON. Como no se envían datos a servidores externos, ofrece velocidad y privacidad.

Ya sea que esté depurando una respuesta de API REST, preparando archivos de configuración para despliegue, o enseñando sintaxis JSON, esta herramienta proporciona la precisión e inmediatez que necesita.

Cómo funciona

El formateador JSON está impulsado por los métodos nativos de JavaScript JSON.parse() y JSON.stringify(), el mismo motor que maneja JSON en todos los navegadores modernos y Node.js.

Analizar

La herramienta pasa su texto de entrada a JSON.parse(). Este método lee la cadena e intenta construir un objeto o array de JavaScript en memoria. El analizador es estricto — sigue exactamente la especificación ECMA-404 JSON y rechaza cualquier desviación de la sintaxis JSON válida.

Validar

Si JSON.parse() tiene éxito, la entrada es JSON válido. Si falla, el método lanza un SyntaxError con un mensaje descriptivo. La herramienta captura este error y lo muestra en el área de estado. Errores comunes en esta fase:

• Unexpected token: Un carácter extra, una coma final o una clave sin comillas
• Expected property name: Una coma faltante entre propiedades o comillas incorrectas
• Unexpected end of input: La cadena JSON se truncó o tiene paréntesis sin cerrar

Formatear

Para JSON válido, la herramienta pasa el objeto analizado a JSON.stringify() con el parámetro space=2. Esto le indica:

1. Re-serializar el objeto como una cadena JSON
2. Insertar saltos de línea después de cada {, }, [, ] y coma
3. Indentar cada nivel de anidamiento con dos espacios
4. Preservar los tipos de datos originales

Salida

El resultado formateado aparece en el área de salida, mostrado con una fuente monoespaciada para mejorar la legibilidad. La salida es de solo lectura, pero se puede copiar al portapapeles con un clic.

Cómo usarlo

Usar el Formateador JSON de Toollect no requiere configuración ni registro. Siga estos pasos:

1. Abra la herramienta — Abra la página del formateador JSON en su navegador.

2. Pegue el JSON — Copie texto JSON de cualquier fuente y péguelo con Ctrl+V (Cmd+V en Mac) en el área de entrada.

3. Vea el resultado — Después de pegar, la herramienta formatea automáticamente y muestra el resultado de inmediato.

4. Revise el estado — Verifique el indicador de estado entre los campos:

   • Un mensaje verde confirma JSON válido
   • Un mensaje de error rojo muestra el problema del analizador

5. Copie el resultado — Haga clic en "Copiar" para transferir el JSON formateado al portapapeles.

6. Reinicie — Haga clic en "Limpiar" para vaciar ambos campos y restablecer el indicador de estado.

Tutorial

Este tutorial le guía a través del flujo de trabajo completo.

Escenario: Está depurando una respuesta de API REST y necesita inspeccionar la estructura JSON.

1. Abra el Formateador JSON.

2. Copie la respuesta JSON sin procesar:

{"status":"success","data":{"users":[{"id":1,"name":"Alice","email":"[email protected]","active":true},{"id":2,"name":"Bob","email":"[email protected]","active":false}],"total":2,"page":1},"timestamp":"2026-07-11T10:30:00Z"}

3. Pegue y formatee automáticamente:

{
  "status": "success",
  "data": {
    "users": [
      {
        "id": 1,
        "name": "Alice",
        "email": "[email protected]",
        "active": true
      },
      {
        "id": 2,
        "name": "Bob",
        "email": "[email protected]",
        "active": false
      }
    ],
    "total": 2,
    "page": 1
  },
  "timestamp": "2026-07-11T10:30:00Z"
}

4. Examine la estructura — La sangría revela inmediatamente la jerarquía de anidamiento.

5. Pruebe JSON con errores:

{"status":"success","data":{"users":[{"id":1,"name":"Alice",}]}}

La herramienta muestra: Invalid JSON: Expected property name or '}' at position...

6. Copie y use — Haga clic en "Copiar" para transferir el resultado al portapapeles.

Consejos avanzados

• Cuidado con las comas finales: JSON no permite comas después del último elemento
• Diagnóstico con comillas: Si no está seguro, péguelo en el formateador — el mensaje de error muestra exactamente dónde falló el análisis
• Valide respuestas de API durante el desarrollo: Mantenga el formateador abierto y pegue respuestas para validación rápida
• Verifique caracteres BOM: Si una cadena aparentemente válida no se analiza, puede contener caracteres Unicode invisibles
• Comparación antes/después: Use la vista lado a lado para comparar JSON minimizado vs formateado
• Combine con otras herramientas: Copie la salida formateada a una herramienta diff para rastrear cambios entre versiones de API

Alternativas

Solución de problemas

Especificaciones técnicas

Rendimiento

Detalles técnicos

• Motor de validación: JSON.parse() nativo (especificación ECMAScript)
• Motor de formateo: JSON.stringify() nativo con space=2
• Modelo de eventos: La entrada activa el formateo automático (300ms debounce)
• Compatibilidad: Chrome 80+, Firefox 75+, Safari 13+, Edge 80+, Samsung Internet 13+, Opera 67+

Privacidad

• Cero transferencia de datos: todo el procesamiento en la memoria del navegador
• Sin cookies, localStorage ni sessionStorage
• Sin scripts de análisis o rastreo
• Utilizable sin conexión después de la carga inicial
• Sin registro, inicio de sesión ni claves API

Características

• Formateo y embellecimiento instantáneo de JSON con sangría automática
• Validación JSON en tiempo real con mensajes de error detallados
• Detección de errores de sintaxis con localización automática
• Copia del JSON formateado con un clic
• Borrado de entrada y salida con un clic
• Se ejecuta completamente en el navegador — sin envío de datos a servidores

Preguntas frecuentes