¿Por qué leer PDFs si no puedes escribir en ellos?
¡Hola a todos! Soy Albert y me encanta hacer las herramientas más convenientes.
Si alguna vez has intentado el auto-aprendizaje, estudiar libros de texto de programación o leer documentos técnicos complejos en PDF en tu laptop o tablet, conoces esta lucha. Abres un libro, quieres resaltar un fragmento de código clave, dibujar una flecha rápida en un diagrama junto a una explicación, o dejar una nota en los márgenes—y te das cuenta de que los visores de PDF estándar son o demasiado pesados, comerciales, o pierden completamente tus dibujos si accidentalmente refrescas la pestaña.
Quería solucionar esto y crear PDF Ink—una aplicación web ligera y rápida para leer y anotar interactivamente libros PDF directamente en el navegador.
La Idea y el Stack Tecnológico
El objetivo principal era construir una herramienta que:
- Se inicie con un clic en cualquier navegador moderno.
- Permita cargar cualquier libro de texto PDF local.
- Deje dibujar en las páginas con ratón, lápiz óptico o toque, y escribir anotaciones de texto.
- Lo más importante: Guarde de forma segura tu página actual, nivel de zoom, lista de biblioteca y todas las notas de dibujo localmente para que puedas retomar el aprendizaje en cualquier momento.
Para la implementación, seleccioné el stack moderno: React + TypeScript + Vite + TailwindCSS.
Para el motor de renderizado de PDF, integré el confiable pdfjs-dist (PDF.js) de Mozilla, que renderiza páginas de documentos directamente en elementos HTML5 <canvas>.
Arquitectura de Canvas de Doble Capa
Para mantener la aplicación altamente eficiente y responsiva durante la interacción con el ratón o el toque, dividí el espacio de trabajo en dos capas independientes:
- Capa PDF: Un
<canvas>de fondo estático que renderiza la imagen de la página PDF con respecto a la escala activa (zoom). - Capa de Anotaciones: Un
<canvas>transparente de superposición absoluta que intercepta los eventos del puntero del usuario, dibuja trazos vectoriales y superpone notas de texto.
Este enfoque de doble capa hace que dibujar sea extremadamente rápido: cuando un usuario dibuja una línea, la aplicación solo repinta la ligera superposición de trazo vectorial, dejando intacto el pesado canvas del PDF.
Evolución de la Base de Datos: Actualización a IndexedDB v2
La versión inicial del prototipo guardaba el archivo PDF activo y todos los dibujos en IndexedDB como un único objeto bajo la clave last-opened.
Sin embargo, a medida que los libros se volvían más grandes, encontramos un cuello de botella de rendimiento:
El Problema: Cada vez que el usuario añadía un trazo de tinta o movía una nota de texto, la aplicación realizaba un autoguardado en IndexedDB. Escribir un búfer de array de 20 MB del archivo PDF en bruto de vuelta al disco cada 250 ms provocaba lag en la interfaz y desgastaba el SSD.
La Solución: Separar Archivos de Anotaciones
Reescribí el gestor de IndexedDB y actualicé el esquema del almacén a la versión 2:
- Almacén
pdfs: Almacena los búferes de archivos binarios en bruto (ArrayBuffer) con clave por UUID del documento. Esto se escribe solo una vez cuando se sube un nuevo archivo a la biblioteca. - Almacén
pdfs_metadata: Almacena metadatos JSON ligeros, incluyendo números de página, niveles de zoom, trazos de dibujo y coordenadas de texto.
¡Ahora, al dibujar, solo se actualiza el objeto de metadatos ligero, eliminando completamente el lag!
Pulido de UX: Biblioteca, Idiomas y Controles Plegables
Para que PDF Ink se sintiera como una herramienta premium:
- Biblioteca de PDF Responsiva: Un panel lateral plegable que muestra la lista de PDFs subidos con tarjetas interactivas.
- Selector de Idioma: Sistema de localización compatible con inglés (predeterminado) y ruso, con configuraciones persistidas en
localStorage. - Configuración de Pincel Plegable: La fila de configuración del bolígrafo (colores, control deslizante de tamaño, opacidad) se puede ocultar para maximizar el espacio en pantallas más pequeñas.
¡Pruébalo!
Puedes probar la versión en vivo de la aplicación aquí:
👉 PDF Ink App en Vivo
Conclusión
Las herramientas de aprendizaje deben ayudarte a concentrarte en absorber conocimiento, no en luchar con la interfaz. Desarrollar PDF Ink me mostró cómo las API modernas del navegador (IndexedDB, PointerEvents, HTML5 Canvas) permiten a los desarrolladores construir herramientas potentes y offline-first que respetan la privacidad de los datos del usuario.
¡Feliz aprendizaje, y escribe código que simplifique las vidas!