Cómo creamos un editor de PDF gratuito y de código abierto con Next.js

La visión: edición de PDF con la privacidad por delante

La mayoría de los editores de PDF de hoy en día te exigen subir tus documentos a sus servidores. Para documentos sensibles como contratos, historiales médicos o extractos financieros, esto es una pesadilla para la privacidad.

Queríamos crear algo diferente:

• Procesamiento 100 % del lado del cliente — los archivos nunca salen de tu navegador
• Sin necesidad de instalación — funciona directamente en los navegadores web
• Sin registro ni rastreo — uso completamente anónimo
• Código abierto — código transparente que cualquiera puede auditar
• Gratis para siempre — sin muros de pago ni suscripciones

Con estos principios en mente, empezamos a evaluar las tecnologías que podrían hacer realidad esta visión.

Cómo elegimos la pila tecnológica

Framework de frontend: Next.js 14

Elegimos Next.js 14 con el nuevo App Router por varias razones:

• Excelentes capacidades de SEO — renderizado del lado del servidor y gestión de metadatos de serie
• Soporte para exportación estática — despliega donde sea (Vercel, Netlify, GitHub Pages)
• Integración con TypeScript — seguridad de tipos y una mejor experiencia de desarrollo
• Optimización del rendimiento — división automática del código, optimización de imágenes
• Experiencia de desarrollo — recarga en caliente, excelente documentación, un enorme ecosistema

Renderizado de PDF: PDF.js

PDF.js de Mozilla es el estándar de oro para renderizar PDF en el navegador. Es lo que impulsa el visor de PDF integrado de Firefox.

Manipulación de PDF: pdf-lib

Para crear y modificar PDF, usamos pdf-lib — una biblioteca de JavaScript puro que se ejecuta enteramente en el navegador.

Gestión del estado: Zustand

En lugar de Redux, elegimos Zustand — una biblioteca de gestión del estado mínima y rápida.

• API sencilla — sin código repetitivo
• Diseño centrado en TypeScript
• Tamaño de paquete reducido (~1KB)
• No requiere proveedores de contexto

Estilos: Tailwind CSS

Tailwind CSS nos ofrece estilos utility-first con una excelente experiencia de desarrollo y paquetes de producción reducidos gracias a la depuración automática.

Arquitectura y decisiones de diseño

1. Procesamiento exclusivamente del lado del cliente

Todo ocurre en el navegador:

User uploads PDF
  ↓
PDF.js parses and renders to canvas
  ↓
User makes edits (text, images, shapes)
  ↓
pdf-lib creates new PDF with changes
  ↓
Download to user's device

En ningún momento el archivo sale del dispositivo del usuario. Esto es privacidad real por diseño.

2. Sistema de coordenadas normalizado

Un desafío importante: los PDF tienen diferentes tamaños de página y los usuarios pueden acercar y alejar el zoom. ¿Cómo hacemos para rastrear las posiciones de las superposiciones?

Solución: Normalizar todas las coordenadas al rango [0, 1].

// Instead of absolute pixels:
{ x: 150, y: 200 }

// We store normalized coordinates:
{ x: 0.25, y: 0.33 }

// Then scale to current viewport:
actualX = normalizedX * pageWidth * zoom
actualY = normalizedY * pageHeight * zoom

Esto hace que las superposiciones sean independientes del zoom y portables entre diferentes tamaños de página.

3. Arquitectura de componentes

Estructuramos la aplicación en componentes específicos:

• PdfViewer — renderizado del canvas principal
• Thumbnails — barra lateral de navegación de páginas
• Toolbar — controles de zoom, rotación y eliminación
• EditToolbar — selección de herramientas (texto, imagen, forma)
• AdvancedOverlayLayer — renderizado de texto, imágenes y formas
• ExportButton — lógica de exportación de PDF

4. Patrón de gestión del estado

Nuestro store de Zustand mantiene:

{
  originalFile: File,
  pages: [
    {
      id: string,
      originalIndex: number,
      rotation: 0 | 90 | 180 | 270,
      deleted: boolean,
      textOverlays: [],
      imageOverlays: [],
      shapeOverlays: []
    }
  ],
  selectedPageId: string,
  zoom: number,
  editMode: 'select' | 'text' | 'image' | 'shape'
}

Desafíos técnicos a los que nos enfrentamos

Desafío 1: precisión en la extracción de texto

PDF.js puede extraer texto, pero el posicionamiento no siempre es perfecto al píxel debido a cómo los PDF codifican el texto (a veces como caracteres individuales, a veces como palabras).

Solución: Extraemos los elementos de texto con sus matrices de transformación y los convertimos a coordenadas normalizadas con cuadros delimitadores generosos.

Desafío 2: rendimiento con PDF grandes

Renderizar PDF de más de 100 páginas puede bloquear el navegador.

Solución:

• Carga diferida de páginas (renderizar solo las páginas visibles)
• Usar requestAnimationFrame para un renderizado fluido
• Recomendar un límite de 25MB / 50 páginas
• Canvas fuera de pantalla para las miniaturas

Desafío 3: calidad de exportación

Incrustar texto e imágenes en pdf-lib requiere una transformación cuidadosa de coordenadas desde el espacio del navegador hasta el espacio del PDF.

Solución: Construir una canalización de transformación integral que gestione:

• Rotaciones de página
• Diferencias en el sistema de coordenadas (el eje Y está invertido en el PDF)
• Incrustación y tamaño de fuentes
• Conversión de formato de imagen

Desafío 4: compatibilidad entre navegadores

Los distintos navegadores tienen implementaciones de canvas ligeramente diferentes y peculiaridades en el renderizado de PDF.

Solución: Pruebas exhaustivas en Chrome, Firefox, Safari y Edge. Usar detección de funcionalidades en lugar de detección de navegador.

Por qué lo hicimos de código abierto

Desde el primer día supimos que esto tenía que ser de código abierto:

Los resultados

Tras meses de desarrollo, lanzamos EditoraPDF con:

El código base está disponible en github.com/affsquadDevs/editorapdf bajo la licencia MIT.

Conclusiones clave para desarrolladores

Participa

EditoraPDF es un proyecto de código abierto, y damos la bienvenida a las contribuciones de desarrolladores de todos los niveles.

Preguntas frecuentes

Reflexiones finales

Crear EditoraPDF fue un recorrido desafiante pero gratificante. Aprendimos muchísimo sobre el procesamiento de PDF, las capacidades de los navegadores y el desarrollo de código abierto.

¿La mejor parte? Cualquiera puede ahora tomar este código, aprender de él, modificarlo o crear algo aún mejor. Ese es el poder del código abierto.

Si estás trabajando en un proyecto similar o simplemente sientes curiosidad por el código, echa un vistazo al repositorio de GitHub. Nos encantaría conocer tu opinión, responder a tus preguntas o revisar tus pull requests.