Ayúdanos a mejorar JSON Workbench: cuéntanos cómo lo usas.

Cuándo conviene comparar archivos

Cualquier proyecto acaba divergiendo: una configuración que ayer funcionaba, un .env distinto en dos máquinas, código generado que ya no coincide, logs de antes y después de un despliegue. Compararlos a ojo línea a línea es lento y propenso a errores. Una herramienta de diff te da la respuesta directa: qué es igual y qué se ha añadido, eliminado o modificado.

Este comparador hace solo eso: alinea dos textos, resalta lo que difiere y te deja revisarlo cambio a cambio. No fusiona ni adivina intenciones. Sin subidas, sin cuenta y sin backend.

Configuraciones que se desvían

Compara .env, nginx.conf, docker-compose.yml o manifiestos de Kubernetes entre commits o servidores y localiza la línea que cambió.

Diferencias entre entornos

Compara las variables o los feature flags de staging y production y detecta una clave que falta o un booleano invertido antes de que cause una incidencia.

Revisión de código generado

Antes de hacer commit, compara la salida de clientes OpenAPI, stubs de Protobuf o SQL de migraciones y mira solo lo que realmente ha cambiado.

Logs y datos

Pon dos logs, exportaciones CSV o fragmentos NDJSON uno junto al otro: las líneas añadidas y eliminadas delatan regresiones, eventos perdidos o huecos en un pipeline.

Obteniendo los archivos

El editor acepta texto en lugar de binarios, y ofrece tres rutas que terminan en la misma vista sincronizada. Elija el método que coincida con donde se encuentra su contenido.

MétodoCuándo usarloQué sucede
PegarUn fragmento ya está en su portapapeles, como un bloque de código de un PR, un extracto de registro o una configuración copiada desde SSH.Haga clic en Pegar en ese lado o presione Ctrl+V / Cmd+V. El editor de ese lado se reemplaza con el texto del portapapeles y el diff se recalcula.
SubirEl contenido vive en el disco, como un .txt, .json, .yml, .xml o cualquier archivo fuente basado en texto.Arrastre el archivo a la zona de colocación o haga clic para abrir el selector de archivos. Solo se acepta un archivo por lado. Binarios como .pdf, .png, .zip o .exe se rechazan. Los archivos de más de 10MB se adjuntan como una Referencia de archivo y se transmiten en fragmentos.
Traspaso de herramientasAcaba de decodificar dos cargas útiles de Base64 en pestañas separadas y desea saber por qué difieren, o la salida de un formateador está lista para comparar.En la página de Base64, cada decodificación abre una pestaña numerada. Pasa el cursor sobre una pestaña y haz clic en el icono ⇄: los dos textos decodificados aparecen aquí, como izquierda y derecha, con el nombre de cada pestaña como nombre de archivo. El mismo traspaso funciona desde comparar JSON: abre esta página y el contenido ya estará cargado.
Las tres rutas alimentan el mismo par de paneles. El icono de enlace sobre cada panel cambia ese lado entre Buscar e importar por URL. La importacion por URL obtiene el texto remoto y convierte automaticamente las URLs de vista de archivo de GitHub a su equivalente sin procesar.

Anatomía del resultado

El resultado es una vista sincronizada en paralelo: dos paneles que se desplazan al unisono para que cada cambio en un lado quede alineado con su contraparte en el otro. La maqueta anotada a continuacion muestra el diseno real:

ARCHIVOS · COMPARACIÓNtexto plano · lado a lado
Izquierda — app.env.example
1HOST=localhost
2PORT=3000−
3LOG_LEVEL=info
4TIMEOUT=30~
Derecha — app.env.production
1HOST=localhost
2PORT=8080+
3LOG_LEVEL=info
4TIMEOUT=60~
El panel izquierdo es el original y el derecho es el modificado. El margen muestra los números de línea, y la columna de marcadores internos muestra +, − o ~ para añadir, eliminar o cambiar.
1
Añadido (verde)
Una línea que existe solo a la derecha. Monaco la sombrea en verde y coloca un marcador +. En el ejemplo, PORT=8080 aparece solo a la derecha, ya que la línea izquierda está ausente.
2
Eliminado (rojo)
Una línea que existe solo a la izquierda. Está sombreada en rojo con un − y tachada. Aquí PORT=3000 se eliminó en producción, para que veas exactamente dónde.
3
Cambiado (ámbar)
Una línea emparejada cuyo texto difiere. Ambos lados están sombreados en ámbar con un marcador ~ y el tramo diferente se resalta en línea. TIMEOUT=30 → TIMEOUT=60 es una sola edición, no una suma más una resta.
4
Alineado y buscable
Las líneas sin cambios se mantienen neutrales y mantienen ambos paneles alineados. La Búsqueda por lado y las flechas de Cambio Anterior / Siguiente saltan entre fragmentos sin desplazarse.
Sobre cada panel, la barra de herramientas ofrece importación de Búsqueda o URL, Basura para limpiar ese lado, un contador de coincidencias, navegación de coincidencias, Copiar, Pegar (deshabilitado solo en modo solo lectura >10MB), y Recortar espacios en blanco. Los controles del extremo derecho recorren los fragmentos de diff globales, y Salir limpia el almacén para volver al formateador.

Navegando archivos grandes

Los archivos de más de 10MB no caben cómodamente en una propiedad de cadena de React. El editor cambia a una ruta de transmisión en el momento en que cualquiera de los lados supera el umbral, ya sea que el contenido provenga de un pegado o de un objeto File soltado.

Modo de solo lectura optimizado

Archivo grande detectado. Modo de solo lectura optimizado habilitado por rendimiento. El historial (Deshacer/Rehacer) y el Plegado están deshabilitados. Mostrando datos fragmentados a medida que cargan.

Se mantiene interactivo
  • Desplazamiento, vista sincronizada lado a lado y números de línea
  • Búsqueda por lado e importación de URL
  • Navegación global de Cambio Anterior / Siguiente (FlechaArriba / FlechaAbajo)
  • Copiar por lado y alternancia de ajuste de línea (Alt+Z)
Deshabilitado temporalmente
  • Edición: readOnly y domReadOnly son verdaderos en ambos paneles
  • Transformaciones de Recortar, Formatear y Minificar (información sobre herramientas: “Recortar deshabilitado para archivos grandes”)
  • Pegar en el panel grande
  • Minimapa, plegado, historial y diagnósticos JSON

El umbral de 10 MB se aplica a cada lado por separado. Por debajo, el contenido se conserva automáticamente si recargas la pestaña. Por encima, el archivo se envía directamente al visor sin guardarse, así que al recargar se empieza de cero. Si limpias ambos lados, el editor vuelve al modo interactivo completo.

Límites y privacidad

Todo lo de esta página se ejecuta en tu navegador. No se sube ningún archivo, no hay procesamiento en servidor y no se guarda nada más allá de lo necesario para mostrar la comparación actual.

Eso también significa que los límites son locales y no están impuestos por una cuota:

Primero local

El texto nunca abandona el dispositivo. Cierra la pestaña y el contenido desaparece; recarga y el almacén estará vacío.

Limitado por la memoria

Decenas de megabytes son cómodos en el escritorio. El techo práctico es la memoria disponible de la pestaña, y los archivos de una sola línea muy grandes son los más difíciles de renderizar.

Sin subida

Los archivos se leen localmente desde tu dispositivo. La red solo se usa si importas contenido explicitamente mediante una URL.

Cosas a tener en cuenta

Estos son los casos que sorprenden a las personas que comparan archivos por primera vez. Cada uno es un comportamiento real, no un error, y tiene una solución sencilla.

Las diferencias de solo espacios en blanco iluminan toda la línea▾
En modo de archivo, ignoreTrimWhitespace es falso, por lo que el diff trata la sangría y los espacios finales como significativos. Eso es deliberado porque para el texto plano, un espacio es dato. En el modo JSON, la misma bandera es verdadera. Si el ruido te molesta, presiona Recortar espacios en blanco: recorta cada línea, elimina las líneas vacías por completo y colapsa las ejecuciones de dos o más espacios en uno solo. Úsalo cuando te importe el contenido, no el formato.
CRLF vs LF muestra cada línea como cambiada▾
Los archivos de Windows terminan las líneas con CRLF (\r\n), mientras que macOS/Linux y la mayoría de los checkouts de git usan LF (\n). Recortar también maneja esto: divide en \n y trim() elimina la \r suelta, normalizando los finales de línea a LF. Si necesitas conservar el estilo de final de línea, no recortes; en su lugar, configura tu editor o git config core.autocrlf antes de comparar.
Un archivo JSON minificado es una línea enorme y el diff parece roto▾
Una línea única no tiene dónde alinearse, así que cualquier cambio parece afectar a todo el archivo. Pásalo antes por el formateador JSON para expandirlo en varias líneas con sangría y vuelve a compararlo. Además, las líneas enormes también anulan Recortar espacios en blanco, que trabaja línea a línea.
El resultado se ve como o mojibake▾
Eso es un error de codificacion, no corrupcion. La herramienta espera UTF-8. Los archivos guardados como Windows-1252 o Latin-1 con caracteres acentuados se mostraran de forma ilegible. Vuelve a guardar el archivo como UTF-8 primero (VS Code: indicador de codificacion abajo a la derecha > Guardar con codificacion > UTF-8), y luego compara de nuevo.
No hay Formato, Minificar o cambio de idioma, solo Recortar▾
Así es: esta página hace una comparación de texto plano y solo ofrece «Recortar espacios en blanco». Para comparar por estructura JSON usa comparar JSON; para dar formato, el formateador JSON.

Preguntas frecuentes

¿Mis archivos se suben o se guardan en algún sitio?

No. Pegar, arrastrar, importar desde URL y calcular la comparación se hace en tu navegador. No se envía nada a un servidor, y al cerrar la pestaña el contenido desaparece.

¿Qué tipos de archivo puedo comparar?

Cualquier archivo de texto: .txt, .env, .json, .yml, código fuente… Los binarios, como PDF o imágenes, se bloquean antes de leerse.

¿Qué hace exactamente «Recortar espacios en blanco»? ¿Modifica mi archivo?

Modifica el contenido del editor: quita los espacios al principio y al final de cada línea, elimina las líneas vacías y colapsa los espacios repetidos en uno solo. Si tus líneas vacías son intencionadas, ten cuidado. El archivo original no se toca.

¿Qué tamaño máximo admite?

No hay un límite estricto, pero por encima de 10 MB pasa a modo de solo lectura y el límite práctico es la memoria de la pestaña.

¿Puedo comparar aquí contenido decodificado de Base64?

Sí. En la página de Base64, cada decodificación abre una pestaña numerada: pasa el ratón sobre una, pulsa el icono ⇄ y repite con la segunda. Los dos textos aparecen aquí, lado a lado. Comparar JSON permite el mismo traspaso.

¿En qué se diferencia de comparar JSON o carpetas?

Comparar JSON entiende la estructura JSON e ignora el ruido de espacios; la comparación de carpetas compara árboles de directorios; este comparador de archivos es para texto plano en el que los espacios importan y necesitas una comparación estricta línea a línea.

Herramientas relacionadas

Cuando termines con las diferencias, si el contenido es JSON pásalo por el formateador JSON para validarlo y usa comparar JSON para ignorar los espacios; para directorios enteros, la comparación de carpetas; y para valores codificados, el decodificador Base64.