Skip to content
 
 

Repository files navigation

📄 Payslip Generator

Deploy to GitHub Pages Buy Me A Coffee License

A professional, dynamic payslip & employment document generator built with React and Vite. Create, customize, and print payslips, tax forms, and employment letters instantly.

🚀 Live Demo | 🎓 Student ID Generator


Warning

Disclaimer: This project is intended for educational and research purposes only. The documents generated by this tool are mock documents and must not be used for official financial, legal, or employment verification purposes.

✨ Features

📄 Multiple Document Types

  • Payslip - Standard employee pay statement
  • Tax Form - Tax withholding statement
  • W-2 Form - Wage and tax statement (US format)
  • Employment Letter - Employment verification letter
  • Offer Letter - Job offer letter with terms

👥 Employee & Contractor Modes

  • Employee Mode - Full-time employee documents with payslip, benefits
  • Contractor Mode - Independent contractor invoices with service agreements

🎨 Modern UI/UX

  • Dark Sidebar - Professional dark theme editor panel
  • Gradient Preview - Beautiful purple gradient preview area
  • Zoom Controls - 30%-150% zoom with smooth transitions
  • Drag & Pan - Freely drag documents in preview
  • Company Logo - Upload and display company logo on all documents
  • Responsive Design - Works on desktop, tablet, and mobile

💰 Dynamic Calculations

  • Flexible Earnings & Deductions - Add unlimited rows
  • Automatic Totals - Net pay calculated in real-time
  • Tax Calculations - Federal, state, Social Security, Medicare

🖨️ Export Options

  • Print/PDF - Built-in print dialog for saving as PDF
  • Professional Layout - Clean, A4-sized documents

🛠️ Tech Stack

React Vite CSS3

📖 Usage Guide

Quick Start

  1. Select Mode - Choose Employee or Contractor in the nav bar
  2. Select Document Type - Click Payslip, Tax Form, W-2, Employment, or Offer Letter
  3. Fill Details - Use the sidebar to enter company, employee, and pay info
  4. Upload Logo - Add your company logo (optional)
  5. Random Data - Click 🎲 for sample data
  6. Download - Click 📥 Download PDF to save

Navigation

  • Document Tabs - Switch between 5 document types
  • Mode Toggle - Employee documents vs Contractor invoices
  • Student ID Link - Quick access to Student ID Generator app

💻 Development

# Install dependencies
npm install

# Start dev server
npm run dev

# Build for production
npm run build

🤝 Support

If you find this project useful, please consider:

Buy Me A Coffee

📝 License

MIT License - feel free to use for educational purposes.

Releases

Packages

Contributors

Languages