HTML vs LaTeX CV Templates in career-ops: Choosing the Right Rendering Pipeline

career-ops provides two distinct CV generation pipelines—an HTML-based template rendered via Playwright and a LaTeX-based template compiled with pdflatex—that differ in styling mechanisms, dependencies, and ATS preprocessing requirements while sharing identical data placeholder syntax.

The career-ops repository offers dual templating engines for generating professional CVs from structured data. While both templates/cv-template.html and templates/cv-template.tex utilize the same placeholder syntax (e.g., {{NAME}}, {{SUMMARY_TEXT}}), they diverge significantly in rendering architecture, customization workflows, and output characteristics. Understanding these differences helps you select the optimal format for your specific application scenario, whether you need browser-based visual richness or lightweight, printer-ready documents.

Rendering Engines and Pipeline Architecture

HTML-to-PDF via Playwright

The HTML template pipeline relies on Playwright’s headless Chromium to convert styled markup into PDF documents. In generate-pdf.mjs, the script loads templates/cv-template.html, injects absolute file:// URLs for locally stored fonts, and passes the content through Playwright’s PDF generation API. This browser-based approach ensures precise CSS rendering including modern features like flexbox, grid layouts, and @media print queries.

LaTeX Compilation via pdflatex

Conversely, the LaTeX workflow in generate-latex.mjs invokes the pdflatex compiler directly on templates/cv-template.tex. This produces pure vector-based PDFs using the TeX box model rather than web rendering engines. The process requires no browser automation, relying instead on traditional LaTeX packages such as titlesec, fancyhdr, and multicol to manage layout and typography.

Styling Mechanisms and Customization

CSS-Driven Design in HTML

The HTML template embeds styling within a <style> block, leveraging web fonts loaded via @font-face declarations (specifically Space Grotesk and DM Sans). Customization happens through standard CSS rules—modify .header-gradient classes or adjust html[lang="ar"] selectors for RTL language support. Changes reflect immediately in browser previews, making iterative design workflows faster for visual-rich CVs.

Macro-Based Layout in LaTeX

The LaTeX template defines structure through custom commands like \resumeItem and environments such as \resumeSubHeadingListStart. Visual adjustments require editing LaTeX macros or adding packages like bidi for internationalization. Unlike CSS, these changes necessitate re-running pdflatex to observe results, creating a slower feedback loop but yielding more typographically precise output for text-heavy documents.

ATS Compatibility and Text Processing

Pre-Rendering Normalization

Before PDF generation, the HTML pipeline executes normalizeTextForATS (defined in generate-pdf.mjs) to clean smart quotes, dashes, and zero-width characters that might confuse Applicant Tracking Systems. This preprocessing step ensures the final PDF contains ATS-friendly text while preserving visual styling.

Inherent ASCII Cleanliness

LaTeX output requires no special ATS normalization because the source generates inherently plain-text ASCII with standard glyphs. The pdflatex compiler produces clean, searchable text natively, making the LaTeX path inherently ATS-compatible without additional preprocessing overhead.

Dependencies and Output Characteristics

Runtime Requirements

The HTML workflow demands Node.js with Playwright installed, plus font files housed in the fonts/ directory. The LaTeX alternative requires only a standard LaTeX toolchain with pdflatex available, using system fonts or package-embedded typography rather than external file references.

File Size and Fidelity Trade-offs

HTML-generated PDFs typically feature larger file sizes due to embedded web fonts and potential rasterization of CSS gradients. These documents excel at displaying color-rich, visually complex layouts. LaTeX outputs remain compact and purely vector-based, ideal for minimal, printer-friendly CVs that prioritize fast loading and text selectability over graphical embellishment.

Practical Usage Examples

Both templates reference identical placeholders, but the surrounding syntax differs by format.

HTML snippet from templates/cv-template.html:

<h1>{{NAME}}</h1>
<div class="contact-row">
  <span>{{PHONE}}</span> | <a href="{{LINKEDIN_URL}}">{{LINKEDIN_DISPLAY}}</a> | {{LOCATION}}
</div>
<div class="section">
  <div class="section-title">{{SECTION_SUMMARY}}</div>
  <div class="summary-text">{{SUMMARY_TEXT}}</div>
</div>

LaTeX snippet from templates/cv-template.tex:

{\Huge\scshape {{NAME}}}
\\ {{CONTACT_LINE}}\\
\href{mailto:{{EMAIL_URL}}}{\faEnvelope\ \underline{{{EMAIL_DISPLAY}}}} ~
\href{{{LINKEDIN_URL}}}{\faLinkedin\ \underline{{{LINKEDIN_DISPLAY}}}}
...
\section{Education}
  \resumeSubHeadingListStart
  {{EDUCATION}}
  \resumeSubHeadingListEnd

Generate an HTML-based CV with ATS normalization:

node generate-pdf.mjs output.html output.pdf --format=a4

This command processes the template through normalizeTextForATS, validates section ordering, and renders via Playwright.

Generate a LaTeX-based CV directly:

node generate-latex.mjs cv.tex cv.pdf

This invocation runs pdflatex on the populated template without additional text-cleaning steps, producing a streamlined vector PDF.

Summary

• Dual pipelines: career-ops offers browser-based HTML rendering (generate-pdf.mjs) and traditional LaTeX compilation (generate-latex.mjs) from the same data source.
• Styling paradigms: HTML uses CSS with web fonts (Space Grotesk, DM Sans) and flexbox layouts; LaTeX employs macro packages (titlesec, fancyhdr) and the TeX box model.
• ATS handling: HTML requires explicit normalizeTextForATS preprocessing; LaTeX produces ATS-ready text natively.
• Dependencies: HTML needs Node.js/Playwright and local font files; LaTeX requires only the pdflatex toolchain.
• Output profiles: HTML yields visually rich, larger PDFs with CSS gradients; LaTeX generates compact, vector-only documents optimized for printing.

Frequently Asked Questions

Can I use the same data file for both HTML and LaTeX templates in career-ops?

Yes. Both templates/cv-template.html and templates/cv-template.tex utilize identical placeholder syntax (e.g., {{NAME}}, {{EDUCATION}}). The data loader populates both templates before their respective render steps, allowing you to maintain a single source of truth for your CV content while outputting to either format.

Which template is better for Applicant Tracking Systems?

Both can produce ATS-compatible results, but through different mechanisms. The HTML template requires the normalizeTextForATS function in generate-pdf.mjs to strip problematic characters like smart quotes and zero-width spaces. The LaTeX template generates inherently clean ASCII text through pdflatex, requiring no additional preprocessing to remain machine-readable.

How do I customize fonts and colors in each template?

For the HTML template, modify the @font-face declarations and CSS rules in the <style> block of templates/cv-template.html—you can reference local files in the fonts/ directory or external URLs. For the LaTeX template, adjust font packages in the preamble and modify color commands using standard LaTeX syntax; note that this requires recompiling with pdflatex to see changes.

Can I generate both formats from the same command?

The repository provides separate entry points—generate-pdf.mjs for HTML and generate-latex.mjs for LaTeX. You would need to run both commands sequentially or create a wrapper script that invokes both node generate-pdf.mjs ... and node generate-latex.mjs ... to produce both output variants from a single data source.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}