CVResume

Create, preview, and export professional resumes to PDF.

Source code Live demo
CVResume

Overview

CV Resume Builder is a web application for creating and exporting clean, ATS-friendly resumes. The interface features a form on the left and a live A4 document preview on the right, updating the layout in real time as fields are modified.

Resume data is stored directly in the user's browser using IndexedDB, removing the need for account registration or backend database setup to draft a resume. Users can customize typography, print or save directly to PDF, and export or import JSON backups for future updates.

Features

  • Split-screen layout with input fields on the left and live document preview on the right.
  • Form sections for Personal Details, Professional Summary, Work Experience, Education, Skills, Certifications, and Additional Information.
  • Automatic bullet point formatting for multi-line experience and education entries.
  • Typography settings with independent font selection and font size sliders for headings, section titles, and body text.
  • Dynamic Google Fonts integration for instant typography updates.
  • Browser storage persistence with IndexedDB, preserving entered data across page reloads.
  • Manual save trigger and Ctrl+S / Cmd+S keyboard shortcuts with save status notifications.
  • JSON backup export and import to transfer or restore resume profiles.
  • Print-ready PDF export styled with print-specific CSS rules for A4 paper.
  • Reset feature with a confirmation dialog to wipe stored data and restore defaults.

Technical Implementation

The application is deployed as a SvelteKit web application. Form interactions trigger reactive state updates through Svelte 5 runes and save directly to browser-managed IndexedDB storage.

Requirements

  • Node.js 18.x or higher (or Bun runtime)
  • Any modern web browser (Chrome, Firefox, Safari, Edge)

Installation

Clone the repository and install dependencies:

sh 
# Using Bun
bun install

# Or using npm
npm install

Running the Application

Start the local development server:

sh 
bun run dev

Open http://localhost:5173 in your browser.

Important Commands

  • bun run dev - Starts the local development server.
  • bun run build - Builds the application for production deployment.
  • bun run preview - Previews the production build locally.
  • bun run check - Runs SvelteKit type checks.
  • bun run lint - Runs Prettier and ESLint code checks.
  • bun run format - Formats source files with Prettier.
  • bun run test:e2e - Runs Playwright end-to-end tests.

Main Workflow

  1. Initialization: On page load, cvState.init() checks browser IndexedDB for previously entered data. If found, it populates the form; otherwise, it loads default template content.
  2. Editing: Input fields update cvState.data reactively, updating the preview pane simultaneously.
  3. Typography: Selecting a font inserts the appropriate Google Fonts link in the document <head>, applying styles dynamically.
  4. Saving: Users can save progress into their browser storage via the toolbar or by pressing Ctrl+S / Cmd+S.
  5. PDF Export: The Export PDF option updates the document title and triggers window.print(). Custom print CSS styles format the document neatly onto A4 pages.
  6. Data Transfer: Users can export full profile data as .json or import previously saved JSON files.

typography-panel-a43f0690-grid

Development

The application stack consists of:

  • SvelteKit & Svelte 5: Manages routing, component architecture, and reactive state through $state and $props.
  • TypeScript: Provides static typing for data models (Profile, Experience, Education, Skill, Certification, DesignSettings, CVData).
  • Tailwind CSS v4 & DaisyUI: Provides UI elements, range sliders, input wrappers, buttons, and modal dialogs.
  • IndexedDB: Handles local client-side data persistence through promise wrappers in storage.ts.
  • Vite: Serves and bundles application assets.
  • Playwright: Configured for automated browser testing.

Highlights

  • Real-Time State Sync: Uses Svelte 5 runes for automatic two-way reactivity between nested form arrays and the live preview document.
  • Dynamic Google Fonts Injection: Loads font stylesheets on demand into the document head when selected by the user.
  • Client-Side Storage: Keeps user data stored locally in the browser via IndexedDB with automatic schema migration.
  • Print Stylesheet Formatting: Uses @media print rules and break-inside-avoid to ensure clean pagination and avoid split cards when exporting to PDF.
  • Client-Centric Privacy: CV drafting and PDF exports happen in the browser without requiring users to upload sensitive personal details to external servers.

screenshot-2026-08-18-085604-ab344be5-grid

Back to Projects