Jobpare CV Generator

GitHub license

A local-first tool to generate beautiful, professional CVs from JSON data and HTML templates. Perfect for developers, designers, and professionals who want full control over their CV presentation.

🧠 JSON-based data input - Easy to edit and version control
🖨️ PDF output - High-quality, print-ready CVs using Puppeteer
🔧 Local-first - No cloud dependencies, your data stays private
🎨 Web-based editor - Visual editor with live preview (CV-JSON Web Editor)
📱 CLI tool - Command-line interface for automation
🎯 Role-specific guidance - Skills, verbs, and schema for different roles

📋 Requirements

Before you begin, ensure you have the following installed:

Node.js 18+ - JavaScript runtime for the CLI tool
Chrome/Chromium - For PDF generation (optional, falls back to HTML)
Modern web browser - For the web-based editor

Dependencies

Handlebars for templating
Puppeteer for PDF generation
Commander.js for CLI interface

🚀 Quick Start

Follow these steps to create your professional CV:

1. Installation

# Install Node.js dependencies
npm install

# Make the CLI tool executable
chmod +x src/generate.js

1.1. Run Local Development Server

# Navigate to docs directory
cd docs

# Start local server on port 9000
python3 -m http.server 9000

# Or using Node.js (if you have serve installed)
npx serve -s . -l 9000

Access the editor at: http://localhost:9000

2. Edit CV JSON

2.1. Open JSON Web Editor to customize your information

Visit https://jobpare.github.io/cvgen/ (online editor)
The editor automatically loads the backend developer example
Edit your CV data using the form editor or JSON view
See live preview of your CV as you type
Data is automatically saved to localStorage as you type

CV JSON Editor

2.2. Load Different Examples

?data=backend-cv-schema - Backend developer example (default)
?data=frontend-cv-schema - Frontend developer example
?data=my-custom-job - Create new CV with custom job ID
?data=https://api.example.com/cv/123 - Load from external URL

2.3. Save JSON

Click "Download JSON" to save your CV data as a JSON file
Save it as my-cv.json in your project directory
Data is automatically saved to localStorage with key cvgen_{job_id}

3. Pick Template + Format

Available Templates:

template-1.html - Clean, professional single-column layout

Output Formats:

HTML - Web-friendly, can be opened in any browser
PDF - Print-ready, professional format (requires Chrome/Chromium)

4. Run CLI Commands to generate your CV

# Generate HTML file (recommended for most users)
node src/generate.js generate \
  -t docs/cv-templates/template-1.html \
  -i docs/cv-json-example/backend-cv-schema.json \
  -o output/my-cv.html

# Generate PDF file
node src/generate.js generate \
  -t docs/cv-templates/template-1.html \
  -i docs/cv-json-example/frontend-cv-schema.json \
  -o output/my-cv.pdf

# Validate your data before generating
node src/generate.js generate \
  -t docs/cv-templates/template-1.html \
  -i docs/cv-json-example/backend-cv-schema.json \
  --validate-only

Your generated CV will be saved in the output/ directory!

🏗️ Architecture

Jobpare CV Generator uses a modern web-based approach combining HTML/CSS/JavaScript for the editor and Node.js for document generation. This provides a simpler alternative to traditional LaTeX-based CV solutions.

Key Components

Web Editor: Online editor at jobpare.github.io/cvgen/ with instant live preview
JSON Data: Version control friendly, platform-independent format
Templates: Handlebars.js for flexible, logic-less templating
Generation: HTML output + PDF conversion via Puppeteer
Preloading: Automatic example CV loading for fast access and offline use
URL-Driven: Simple ?data= parameter system for loading different CVs
Curated Content: Skills and action verbs lists compiled from most-used terms across the web

Comparison with LaTeX Solutions

| Feature | 🛠 Jobpare CV Generator | 📚 Traditional LaTeX (e.g., Awesome-CV) | | ------------------- | ------------------------------------- | ------------------------------------------- | | Setup | Simple npm install | Complex LaTeX distribution setup | | Learning Curve | Basic HTML/CSS or JSON | Steep; requires LaTeX syntax | | Live Preview | Instant browser preview | Compile → View cycle | | Customization | Visual editor or tweakable CSS | Manual code editing | | Version Control | Clean JSON + template files | Mixed text + binary artifacts | | Cross-Platform | Works on any OS with Node.js + Chrome | OS-specific LaTeX quirks | | Dependencies | Minimal (Node.js, Puppeteer/Chrome) | Full LaTeX suite (TeX Live, MikTeX, etc.) | | Output Quality | Clean, professional, print-ready PDF | Excellent typographic control |

cvgen delivers most of the output quality of LaTeX with a dramatically simpler setup and developer-friendly workflow.

🌐 Integration

Integrate the CV editor into your application using the simple postMessage API. The editor accepts CV data and processes it silently.

Note: The PostMessage integration is handled by integration.js which provides secure one-way communication to the CV editor.

Basic Integration

// Open CV editor
const editorUrl = `https://jobpare.github.io/cvgen/?data=my-cv-123`;
const editorWindow = window.open(editorUrl, '_blank');

// Wait a moment for editor to load, then send data directly
setTimeout(() => {
  editorWindow.postMessage({
    type: 'SET_CV_JSON',
    data: {
      profile: { name: 'John Doe', email: 'john@example.com' },
      summary: 'Experienced developer...',
      experiences: [/* ... */],
      education: [/* ... */],
      skills: { programming_languages: ['JavaScript', 'Python'] }
    }
  }, 'https://jobpare.github.io');
}, 1000);

// No need to listen for responses - data is processed silently

Simple Communication Flow

The integration uses a straightforward approach:

Open CV Editor - Open the editor in a new window
Wait for Load - Give the editor a moment to initialize
Send CV Data - Send your CV data using SET_CV_JSON
Done - Data is processed silently, no response needed

This approach is ultra-simple and reliable for most use cases.

Message Format

{
  type: 'SET_CV_JSON',
  data: { /* CV JSON object */ }
}

Response Format

The editor processes data silently - no responses are sent back. Check the editor console for processing logs.

Security Considerations

Important: Always validate the origin of PostMessage events for security:

window.addEventListener('message', (event) => {
  // Always check the origin
  if (event.origin !== 'https://jobpare.github.io') return;
  
  // Process the message...
});

Never use '*' as target origin in production - always specify the exact origin for security.

The editor automatically loads data from localStorage using the URL parameter (?data=my-cv-123) and saves with key cvgen_my-cv-123. PostMessage data is immediately applied and saved.

URL Parameters

?data=cv_123453 - Load from localStorage with specific CV ID
?data=https://api.example.com/cv/123 - Load from external URL
?data=backend-cv-schema - Load backend developer example
?data=frontend-cv-schema - Load frontend developer example
No parameter - Load backend developer example (default)

Preloading System

The editor automatically preloads example CVs into localStorage on first load:

Backend Example: cvgen_backend-cv-schema (default)
Frontend Example: cvgen_frontend-cv-schema

This ensures fast loading and offline availability of example data without requiring external requests.

🔗 URL Parameter System

The editor uses a simple URL parameter system to load different CVs:

Supported Formats

Job ID: ?data=my-job-123 - Loads from localStorage with key cvgen_my-job-123
External URL: ?data=https://api.example.com/cv/123 - Fetches data from external URL
Example CVs: ?data=backend-cv-schema or ?data=frontend-cv-schema - Loads preloaded examples
Default: No parameter loads backend developer example

Examples

https://jobpare.github.io/cvgen/                           # Backend example (default)
https://jobpare.github.io/cvgen/?data=frontend-cv-schema   # Frontend example
https://jobpare.github.io/cvgen/?data=my-custom-cv        # Custom CV
https://jobpare.github.io/cvgen/?data=https://api.com/cv  # External URL

Data Persistence

All data is automatically saved to localStorage with key cvgen_{job_id}
Changes are saved in real-time as you type
Data persists between browser sessions
External URLs are fetched fresh each time

Cvgen

Install / Use

README