Comment j'ai construit un éditeur Web en direct pour RenderCV avec Gemini

Les CV sous forme de code : l’élégance de RenderCV

Si vous êtes ingénieur ou universitaire, rédiger des CV dans MS Word est un cauchemar de mise en page, et les modèles LaTeX personnalisés sont souvent trop verbeux à maintenir.

Récemment, je suis tombé sur un projet Python génial appelé RenderCV. Il vous permet de rédiger le contenu de votre CV dans un fichier YAML propre et structuré et génère un PDF magnifiquement mis en page avec une typographie parfaite en utilisant Typst en arrière-plan. Il traite votre CV comme du code, ce qui signifie que vous pouvez le suivre avec Git, vous concentrer strictement sur le contenu, et laisser l’outil gérer les marges, l’alignement et le style.

Cependant, RenderCV a été conçu principalement comme un outil CLI. Chaque fois que vous apportez une modification, vous devez exécuter rendercv render John_Doe_CV.yaml, vérifier la sortie et rouvrir le PDF.

Je voulais combler ce fossé en ajoutant un éditeur Web en direct — une application Web locale d’une seule page avec un éditeur Monaco côte à côte, un aperçu PDF en direct, une validation de schéma instantanée et des contrôles de sections interactifs.

Avec l’aide de Gemini, j’ai réussi à construire et à intégrer cette interface Web directement dans RenderCV ! Voici comment nous avons procédé.


Stack technique et architecture

Pour garder l’éditeur Web léger, rapide et avec un minimum de dépendances, nous avons choisi :

  1. Backend : FastAPI + Uvicorn — idéal pour écrire des API hautes performances et servir des fichiers statiques.
  2. Frontend : HTML5 Vanilla + CSS moderne + Javascript — pour éviter des étapes de construction complexes. Nous avons utilisé Monaco Editor (via CDN) pour une édition YAML de niveau VS Code, et Lucide Icons pour des éléments visuels fluides.
  3. Rendu : API Python RenderCV — appel direct des modèles internes de la bibliothèque pour analyser, valider et compiler les documents dans un dossier temporaire.

1. Conception du backend FastAPI (web_app.py)

Le cœur du serveur est le point de terminaison /api/render. Lorsque l’utilisateur tape du YAML dans l’interface Web, le frontend l’envoie à ce point de terminaison. Le backend gère trois tâches majeures :

  1. Rendu du PDF : Nous compilons la chaîne YAML en utilisant les fonctions internes de RenderCV et renvoyons les octets bruts du PDF.
  2. Gestion de la visibilité des sections : Nous analysons le YAML, identifions les sections disponibles et masquons dynamiquement celles décochées par l’utilisateur.
  3. Cartographie des erreurs de validation : En cas d’erreur, nous interceptons RenderCVUserValidationError, récupérons la ligne et colonne exactes du champ invalide, et renvoyons une réponse JSON propre pour que Monaco affiche des lignes rouges ondulées directement à l’endroit de l’erreur !

2. Une interface Web premium (index.html)

Pour l’interface utilisateur, nous voulions quelque chose de premium et de réactif. Gemini m’a aidé à coder une superbe mise en page moderne comprenant :

  • Thème sombre HSL : Arrière-plans profonds, effets flous (backdrop-filter: blur) et accents violets dégradés.
  • Écran divisé côte à côte : Éditeur Monaco à gauche, visionneuse PDF en direct à droite.
  • Contrôles dynamiques : Sélecteur de thèmes, liste déroulante des sections et console de validation en bas.

3. Intégration dans le CLI (web_command.py)

Pour simplifier le lancement, nous avons ajouté une commande au CLI de RenderCV :

1
rendercv web

Cela lance le serveur local FastAPI Uvicorn et ouvre automatiquement votre navigateur Web.

Bon codage !