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

> Learn the key differences between HTML and LaTeX CV templates in career-ops. Discover how each rendering pipeline impacts styling, dependencies, and ATS compatibility to choose the best for your needs.

- Repository: [Santiago Fernández de Valderrama/career-ops](https://github.com/santifer/career-ops)
- Tags: how-to-guide
- Published: 2026-06-13

---

**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`](https://github.com/santifer/career-ops/blob/main/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`](https://github.com/santifer/career-ops/blob/main/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`](https://github.com/santifer/career-ops/blob/main/templates/cv-template.html):**

```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`:**

```latex
{\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:

```bash
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:

```bash
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`](https://github.com/santifer/career-ops/blob/main/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`](https://github.com/santifer/career-ops/blob/main/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.