Documentation

Overview

CvSnap is a premium, production-ready HTML5 Resume/CV Builder that runs entirely in the browser. No backend server, no database, no sign-up required — everything is powered by pure HTML5, CSS3, and vanilla JavaScript.

Features

Core Features

• 20+ Professional Templates: Classic, Modern, Elegant, Minimal, Professional, Creative, Executive, Developer, Designer, Academic, Compact, Timeline, Infographic, Bold, Clean, Corporate, Startup, Freelancer, Graduate, Premium
• 8 Color Presets: Ocean Blue, Emerald Green, Royal Purple, Sunset Orange, Crimson Red, Teal, Slate, Rose
• Comprehensive CV Sections: Personal info, Experience (add/remove), Education (add/remove), Skills with level bars (0-100%), Languages with proficiency, Tools & Technologies tags
• Profile Photo URL Support: Add a profile picture via any image URL
• Real PDF Download: Powered by html2canvas + jsPDF, runs entirely in the browser
• Live Preview: See changes instantly as you type
• Multiple CV Management: Create, save, duplicate, and delete multiple CVs
• Auto-Save: Changes are automatically saved to localStorage

UI/UX Features

• Light/Dark Mode: Full theme toggle with persistent preference
• Responsive Design: Works on desktop, tablet, and mobile
• SaaS Landing Page: Complete marketing page with hero, features, pricing, testimonials
• Login Modal: Pre-built authentication UI (connect your own backend)
• Privacy Policy Page: GDPR-ready privacy policy template
• Terms & Conditions Page: Complete legal terms template
• Documentation Page: This comprehensive guide
• Scroll Animations: Smooth intersection observer animations
• Toast Notifications: Elegant notification system

Technical Features

• Pure HTML5/CSS3/JS: No framework dependencies (React, Vue, Angular not required)
• 100% Offline: Works without internet (after initial load of CDN libraries)
• No Backend Required: Everything runs client-side
• localStorage Persistence: Data survives browser refreshes
• SEO Optimized: Proper meta tags, semantic HTML, heading structure
• Clean Code: Well-organized, commented, and maintainable

Installation

Option 1: Direct File Access

1. Extract the downloaded ZIP file to a folder on your computer
2. Open index.html in your web browser (Chrome, Firefox, Safari, Edge)
3. That's it! Start building your resume

Option 2: Web Server (Recommended)

1. Upload all files to your web server (Apache, Nginx, etc.)
2. Navigate to your domain in a web browser
3. The landing page will load at yourdomain.com/index.html
4. The editor is at yourdomain.com/editor.html

Option 3: Local Development Server

If you have Node.js installed, you can use any static file server:

# Using npx (no install needed)
npx serve .

# Using Python
python -m http.server 8000

# Using PHP
php -S localhost:8000

CDN Dependencies

CvSnap loads the following libraries from CDN for PDF generation:

If you need to work fully offline, download these libraries and update the <script> and <link> tags in editor.html and css/style.css to reference local copies.

File Structure

CvSnap/
├── index.html              # SaaS Landing Page
├── editor.html             # CV Editor (main app)
├── privacy.html            # Privacy Policy page
├── terms.html              # Terms & Conditions page
├── documentation.html      # This documentation
├── css/
│   ├── style.css           # Global design system & landing page styles
│   ├── editor.css          # Editor-specific styles
│   └── pages.css           # Privacy, Terms, Docs page styles
└── js/
    ├── app.js              # Landing page interactivity
    ├── editor.js           # Editor logic (form, preview, PDF, CV mgmt)
    ├── templates.js        # 20 template render functions + color presets
    └── storage.js          # localStorage CRUD manager

Getting Started

Quick Start

1. Open index.html to see the landing page
2. Click "Start Building Free" to open the editor
3. Fill in your personal information in the left sidebar
4. Add experience, education, skills, languages, and tools
5. Watch the live preview update in real-time on the right
6. Choose a template and color theme from the top toolbar
7. Click "Download PDF" when you're ready

Loading Sample Data

Click the "📋 Load Sample" button at the bottom of the sidebar to populate all fields with example data. This is a great way to see how your chosen template looks with content.

Templates

CvSnap includes 20 professionally designed templates. Each template is a JavaScript render function in js/templates.js that takes CV data and a color preset, then returns formatted HTML.

Switching Templates

Click the template selector button in the toolbar to open the template gallery. Click any template to switch instantly — your content is preserved across template changes.

Color Presets

Each template supports 8 professionally curated color themes:

Click any color dot in the toolbar to apply instantly. The selected color is saved with each CV.

Editor Guide

Layout

The editor has three main areas:

• Top Toolbar: Logo, CV name, template selector, color presets, theme toggle, My CVs, Download PDF
• Left Sidebar: Accordion-style form with collapsible sections for all CV data
• Right Preview: Live A4-sized preview that updates as you type

Sections

• Personal Information: Name, title, email, phone, location, website, LinkedIn, GitHub, photo URL, summary
• Experience: Add unlimited entries with position, company, dates, descriptions. Mark current positions with "Currently working here" checkbox
• Education: Add unlimited entries with degree, field, institution, dates, description
• Skills: Add skills with name and level slider (0-100%). Rendered as visual progress bars
• Languages: Add languages with proficiency level slider
• Tools & Technologies: Tag-based input — type and press Enter to add, Backspace to remove last tag

Auto-Save

All changes are automatically saved to localStorage 500ms after your last keystroke. You never need to manually save.

PDF Download

PDF generation uses html2canvas to capture the preview as an image, then jsPDF to embed it in a PDF file.

How It Works

1. Click "📥 Download PDF" in the toolbar
2. A progress spinner appears while the PDF is being generated
3. The preview is resized to exact A4 dimensions (794px width)
4. html2canvas captures the preview at 2x resolution for sharp output
5. jsPDF creates an A4 PDF and embeds the image
6. The PDF is automatically downloaded to your device

Tips for Best PDF Quality

• Use a modern browser (Chrome recommended) for best results
• Ensure all content fits on one page if possible
• Profile photos must be from URLs that allow cross-origin access (CORS)
• If the PDF looks blurry, try zooming your browser to 100% before downloading

Multiple CVs

CvSnap supports creating and managing multiple CVs. Each CV is independently stored with its own template, color theme, and content.

Managing CVs

• Create: Click "📂 My CVs" → "Create New CV"
• Switch: Click any CV in the list to load it
• Duplicate: Click the 📋 icon to clone a CV
• Delete: Click the 🗑️ icon (with confirmation)
• Rename: Edit the CV name in the toolbar input field

Customization

Adding New Templates

To add a custom template:

1. Open js/templates.js
2. Add a new function to the TEMPLATES object:

TEMPLATES.mytemplate = function(data, c) {
  return `
    <div style="font-family:'Inter',sans-serif;padding:30px;">
      <h1 style="color:${c.primary};">
        ${escapeHtml(data.fullName)}
      </h1>
      <!-- Your template HTML here -->
    </div>
  `;
};

3. Add an entry to TEMPLATE_LIST array:

{ id: 'mytemplate', name: 'My Template', desc: 'My custom design', category: 'Custom' }

Adding New Color Presets

Add a new entry to the COLOR_PRESETS object in js/templates.js:

COLOR_PRESETS.custom = {
  primary: '#8b5cf6',
  light: '#ede9fe',
  dark: '#6d28d9',
  bg: '#f5f3ff',
  text: '#3b1f7e'
};

Then add a corresponding color dot in editor.html:

<div class="color-preset" data-color="custom" title="Custom"
     style="background:#8b5cf6;"></div>

Modifying CSS Variables

The design system is built with CSS custom properties in css/style.css. You can customize:

• Colors: --primary, --secondary, --accent
• Typography: --font-heading, --font-body
• Spacing: --space-* tokens
• Borders: --radius-* tokens
• Shadows: --shadow-* tokens

Dark Mode

CvSnap supports full light/dark mode toggle. The current preference is stored in localStorage and persisted across pages and sessions.

Dark mode styles are defined using [data-theme="dark"] CSS selectors that override the default light theme variables.

Note: Dark mode affects the editor UI only — resume templates always render on a white background for PDF compatibility.

Browser Support

Frequently Asked Questions

Is my data safe?

Yes! All data is stored in your browser's localStorage and never transmitted to any server. Your resume information stays on your device.

Can I use this offline?

After the first load (which fetches CDN libraries and Google Fonts), the application works offline. For fully offline use, download the CDN libraries locally.

What happens if I clear my browser data?

Clearing browser data (localStorage) will delete all saved CVs. Always download PDF copies of important resumes as backup.

Can I add more than 20 templates?

Yes! See the Customization section for instructions on adding custom templates.

Why does my photo not appear in the PDF?

Profile photos loaded from external URLs may be blocked by CORS (Cross-Origin Resource Sharing) policies. Use a photo URL from a CORS-friendly host, or convert your photo to a base64 data URL.

Can I deploy this as a SaaS product?

Yes, with the Extended License. You can add your own authentication backend, payment system, and custom branding.

How do I connect a real login system?

The login modal in the landing page is a UI template. To add real authentication:

1. Choose an auth provider (Firebase Auth, Supabase, Auth0, etc.)
2. Modify js/app.js to handle the login form submission
3. Store user tokens and sync CV data with your backend

Changelog

Version 1.0.0 — April 2026

• 🎉 Initial release
• ✅ 20 professional templates
• ✅ 8 color presets
• ✅ Real PDF download (html2canvas + jsPDF)
• ✅ Live preview with real-time updates
• ✅ Experience, Education with add/remove
• ✅ Skills with level bars (0–100%)
• ✅ Languages with proficiency levels
• ✅ Tools & Technologies tags
• ✅ Profile photo URL support
• ✅ Multiple CV management
• ✅ Light/Dark mode
• ✅ SaaS landing page
• ✅ Login modal UI
• ✅ Privacy Policy page
• ✅ Terms & Conditions page
• ✅ Comprehensive documentation
• ✅ Responsive design
• ✅ Auto-save functionality

Support

If you have questions, issues, or feature requests, please reach out through the following channels:

• CodeCanyon Comments: Leave a comment on the item page
• Email: support@CvSnap.app
• Response Time: We aim to respond within 24-48 business hours

Thank you for choosing CvSnap! 🚀
© 2026 CvSnap. All rights reserved.