Como eu construí um editor Web em tempo real para RenderCV usando Gemini

Currículos como Código: A elegância do RenderCV

Se você é engenheiro ou acadêmico, escrever currículos no MS Word é um pesadelo de formatação, e os modelos LaTeX personalizados costumam ser verbosos demais para manter.

Recentemente, me deparei com um projeto Python brilhante chamado RenderCV. Ele permite que você escreva o conteúdo do seu currículo em um arquivo YAML limpo e estruturado e gera um PDF lindamente formatado com tipografia perfeita usando Typst sob o capô. Ele trata seu currículo como código, o que significa que você pode colocá-lo em controle de versão, concentrar-se estritamente no conteúdo e deixar a ferramenta cuidar das margens da página, alinhamento e estilo.

No entanto, o RenderCV foi projetado principalmente como uma ferramenta de linha de comando (CLI). Cada vez que você faz uma alteração, precisa executar rendercv render John_Doe_CV.yaml, verificar o resultado e abrir o PDF.

Eu queria preencher essa lacuna adicionando um Editor Web em Tempo Real — um aplicativo da web local de página única com um editor Monaco lado a lado, visualização de PDF em tempo real, validação instantânea de esquema e controles interativos de seções.

Com a ajuda do Gemini, construí e integrei com sucesso esta interface da web diretamente no RenderCV! Veja como fizemos isso.


Stack Tecnológica e Arquitetura

Para manter o editor da web leve, rápido e com dependências mínimas, escolhemos:

  1. Backend: FastAPI + Uvicorn — perfeito para escrever APIs de alto desempenho e servir arquivos estáticos.
  2. Frontend: HTML5 Vanilla + CSS Moderno + Javascript — evitando etapas de construção complexas. Usamos o Editor Monaco (via CDN) para uma experiência de escrita YAML de nível VS Code e Ícones Lucide para elementos visuais fluidos.
  3. Renderização: API Python do RenderCV — chamando os modelos internos da biblioteca diretamente para processar, validar e compilar documentos Typst e PDF na memória.

1. Projetando o Backend do FastAPI (web_app.py)

O núcleo do servidor é o endpoint /api/render. Quando o usuário digita o YAML na interface da web, o frontend o envia para este endpoint. O backend lida com três tarefas principais:

  1. Renderização do PDF: Compilamos a string YAML usando as funções de compilação internas do RenderCV e retornamos os bytes brutos do PDF.
  2. Visibilidade de Seções: Analisamos o YAML, identificamos as seções e removemos aquelas ocultadas pelo usuário.
  3. Mapeamento de Erros de Validação: Quando a validação falha, interceptamos o RenderCVUserValidationError, extraímos os números exatos da linha e coluna e retornamos uma resposta JSON para que o Monaco mostre as linhas vermelhas onduladas no local exato do erro!

2. Uma Interface Web Premium (index.html)

Para a interface do usuário, queríamos algo premium e responsivo. O Gemini me ajudou a programar um layout moderno com:

  • Tema Escuro HSL: Fundos profundos, efeitos desfocados (backdrop-filter: blur) e gradientes roxos.
  • Divisão de Tela Lado a Lado: Editor Monaco à esquerda, visualização de PDF à direita.
  • Controles Dinâmicos: Seletor de temas, caixa de seções ocultáveis e console de validação integrado.

3. Integrando no CLI (web_command.py)

Para simplificar a inicialização, adicionamos um novo comando ao CLI do RenderCV:

1
rendercv web

Isso inicia o servidor local FastAPI Uvicorn e abre automaticamente o navegador.

Feliz programação!