Cómo Construí un Editor Web en Vivo para RenderCV con Gemini

Currículums como Código: La Elegancia de RenderCV

Si eres ingeniero o académico, escribir currículums en MS Word es una pesadilla de formato, y las plantillas LaTeX personalizadas suelen ser demasiado verbosas para mantener.

Recientemente descubrí un brillante proyecto de Python llamado RenderCV. Te permite escribir el contenido de tu currículum en un archivo YAML limpio y estructurado, y genera un PDF perfectamente formateado con tipografía impecable usando Typst bajo el capó. Trata tu currículum como código, lo que significa que puedes versionarlo, concentrarte estrictamente en el contenido y dejar que la herramienta se encargue de los márgenes, la alineación y el estilo.

Sin embargo, RenderCV fue diseñado principalmente como una herramienta de interfaz de línea de comandos (CLI). Cada vez que haces un cambio, tienes que ejecutar rendercv render John_Doe_CV.yaml, verificar el resultado, abrir el visor de PDF y comprobar la alineación. Si cometes un error de validación o de esquema, tienes que leer los rastreos del compilador CLI.

Quería cerrar esta brecha añadiendo un Editor Web en Vivo—una aplicación web local de una sola página con un editor Monaco lado a lado, vista previa de PDF en tiempo real, validación de esquema instantánea y controles interactivos de temas/secciones.

¡Con la ayuda de Gemini, construí e integré exitosamente esta interfaz web directamente en RenderCV! Así es como lo hicimos.

El Stack Tecnológico y la Arquitectura

Para mantener el editor web ligero, rápido y con dependencias mínimas, elegimos:

  1. Backend: FastAPI + Uvicorn — perfecto para escribir APIs de alto rendimiento y servir activos estáticos.
  2. Frontend: HTML5 Vanilla + CSS Moderno + Javascript — evitando pasos de compilación pesados (como Webpack o Vite) para un ayudante CLI local. Usamos el Monaco Editor (vía CDN) para una experiencia de escritura YAML de nivel VS Code y Lucide Icons para elementos visuales fluidos.
  3. Renderizado: API de Python de RenderCV — llamando directamente a los modelos internos de la biblioteca para analizar, validar y construir documentos Typst y PDF en memoria o dentro de directorios temporales.

1. Diseñando el Backend FastAPI (web_app.py)

El núcleo del servidor es el endpoint /api/render. Cuando el usuario escribe YAML en la interfaz web, el frontend lo envía a este endpoint. El backend maneja tres tareas principales:

  1. Renderizado del PDF: Compilamos la cadena YAML usando las funciones de compilación internas de RenderCV y devolvemos los bytes del PDF en bruto.
  2. Alternancia de Visibilidad de Secciones: RenderCV permite ocultar o mostrar secciones de tu CV. Analizamos el YAML entrante, identificamos todas las secciones del CV disponibles, eliminamos las que el usuario eligió ocultar en el menú desplegable de la interfaz y compilamos el documento final.
  3. Mapeo Estructurado de Errores: Cuando la validación falla, RenderCV lanza un RenderCVUserValidationError. Interceptamos este error, extraemos los números exactos de línea y columna del campo YAML inválido, y devolvemos una respuesta de error JSON limpia para que Monaco pueda mostrar líneas onduladas rojas en la posición exacta del error.

2. Una Interfaz Web Premium (index.html)

Para la interfaz de usuario, queríamos algo que se sintiera premium, responsivo y completamente inmersivo. Gemini me ayudó a programar un hermoso diseño moderno que incluye:

  • Tema Oscuro HSL: Fondos de pizarra profundos, superposiciones semitransparentes (backdrop-filter: blur) y acentos vibrantes de degradado lineal morado.
  • Pantalla Dividida: Editor Monaco a la izquierda, visor de PDF en vivo (usando un <iframe> cargado con una URL Blob local) a la derecha.
  • Controles Dinámicos:
    • Un menú desplegable de Cambio de Tema para cargar plantillas (clásica, ingeniería, moderncv, etc.) y fusionar automáticamente los datos de tu CV en ellas.
    • Un Menú Desplegable de Secciones que consulta los encabezados del backend y genera listas de verificación para ocultar/mostrar dinámicamente secciones del currículum.
    • Una Consola de Registro de Validación en línea en la parte inferior del editor que se expande para mostrar detalles de errores.

3. Envolviendo todo en la CLI (web_command.py)

Para que sea increíblemente fácil para los usuarios comenzar, añadimos un nuevo comando a la CLI de RenderCV basada en Typer:

1
rendercv web

Esto lanza el servidor FastAPI local de Uvicorn y abre tu navegador web automáticamente.

Reflexiones sobre Programar con Gemini

Construir esta función con Gemini fue excepcionalmente rápido. Lo que normalmente habría tomado días de lectura de código fuente interno y configuración de Monaco se resolvió en horas:

  1. Entendiendo la biblioteca AST/YAML: Gemini identificó correctamente que debíamos usar ruamel.yaml para analizar el archivo YAML y preservar las comillas, comentarios y estructura del usuario al cambiar de tema.
  2. Mapeo de errores: Gemini descubrió exactamente cómo recorrer las coordenadas de RenderCVUserValidationError y construir los payloads de marcadores de validación de Monaco.
  3. Pulido de UX: Elaboró variables CSS y desplazamientos de diseño que lucen geniales, escalan bien en múltiples resoluciones de pantalla y son muy responsivos.

¡Si escribes currículums, echa un vistazo a RenderCV y prueba ejecutar rendercv web para experimentar el editor en vivo tú mismo!

¡Feliz programación!