¿Qué es un editor binario?

Un editor binario es una herramienta que permite editar archivos directamente en notación hexadecimal o ASCII. Mientras que un editor de texto convencional trabaja con “cadenas”, un editor binario accede a la secuencia bruta de bytes de un archivo y permite modificar cualquier bit o byte en una posición arbitraria.

Son imprescindibles para el análisis de software, la recuperación de datos o la investigación de protocolos. Entre las aplicaciones de escritorio, HxD o Binary Ninja son muy conocidas. Sin embargo, mi objetivo en esta ocasión era crear un editor binario de archivo único que funcionara solo en el navegador.

Enfoque de implementación

  • Completamente del lado del cliente (sin transmisión de datos)
  • Cargar archivos locales mediante la API FileReader
  • Mostrar el hexadecimal (Hex) a la izquierda y el ASCII a la derecha
  • Entrar en modo edición con un clic y sobrescribir valores directamente
  • Resaltar en rojo las celdas editadas
  • Permitir alternar entre modo de edición Hex y modo de edición ASCII
  • Descargar de nuevo el resultado editado como archivo

Tropiezos reales y cómo los resolví

1. El marco de edición se desplazaba

En la primera versión, el contorno amarillo que marcaba la celda en edición quedaba ligeramente descentrado y se veía raro. La causa era que, debido al line-height de CSS y a la distribución mediante flex, la referencia del carácter y la del contorno no coincidían. Aunque usaba una fuente monoespaciada, el motor de renderizado del navegador coloca la línea base de cada fuente de forma distinta, de modo que el marco terminaba subiendo o bajando.

Forcé vertical-align: middle y cambié la celda a inline-block para igualar alturas, lo que eliminó el problema.

.hex-cell.editing {
  outline: 2px solid yellow;
  vertical-align: middle;
}

2. La tecla ESC escribía caracteres

Al principio, si pulsaba ESC con una celda activa aparecían caracteres como “EE”.

El motivo era que no interceptaba el evento keydown, así que el navegador enviaba el código de la tecla directamente al flujo de entrada. El manejador solo esperaba 0–9 y A–F, pero Escape también tiene código propio (keyCode = 27 en implementaciones antiguas, key = "Escape" en la API moderna). Sin un filtro, el proceso interpretaba la entrada como el carácter "E", de ahí que se escribiera "EE".

La solución fue sencilla: capturar Escape en keydown, cancelar la edición y evitar el procesamiento por defecto.

document.addEventListener("keydown", e => {
  if (e.key === "Escape") {
    cancelEdit();
    e.preventDefault(); // Impedir que llegue a la ruta de entrada genérica
  }
});

Así ESC pasó a actuar solo como “cancelar edición” y dejó de escribir letras.

3. Las celdas rojas quedaban después de recargar

Tras editar un archivo, si abría otro distinto quedaban los resaltados en rojo.

La causa era que el arreglo y el estado que rastreaban las celdas modificadas no se reiniciaban al cargar un nuevo archivo. Vaciar la zona visible no bastaba, porque la marca de “modificado” seguía activa y hacía parecer que el nuevo archivo también estaba editado.

Añadí una llamada a clearModifiedState() justo después de la carga para borrar esas marcas y restaurar el estilo neutro.

4. Alternar entre modos HEX y ASCII

La primera versión permitía editar simultáneamente en HEX y ASCII. Esto hacía difícil saber qué entrada tenía prioridad, y editar el mismo byte por dos rutas generaba conflictos. Al escribir en ASCII se sobrescribía el valor HEX, pero durante la introducción aparecían inconsistencias momentáneas.

Para evitar esa confusión cambié a un selector explícito de modo y dejé como predeterminado el modo HEX. Así el usuario sabe siempre qué está editando, y la lógica de sincronización se simplifica.

Fragmento de código

La rutina de escritura quedó así:

function applyEdit(offset, newValue) {
  if (mode === "hex") {
    buffer[offset] = parseInt(newValue, 16);
  } else {
    buffer[offset] = newValue.charCodeAt(0);
  }
  markModified(offset);
  render();
}

markModified(offset) añade la clase de resaltado en rojo si el valor difiere del original; es una implementación sencilla.

Conclusión

El editor binario para navegador que desarrollé funciona sin conexión y es un “tool” completamente del lado del cliente, seguro desde la perspectiva de seguridad.

  • Para pequeños retoques binarios
  • Para investigaciones en entornos donde no se puede instalar software
  • Para comprender de forma intuitiva las secuencias de bytes en educación o autoaprendizaje

Esos son los escenarios donde puede aprovecharse.