BizTooly Invoice Generator – Professional PDF Invoicing Tool

🚀 How to Use the Invoice Generator Tool

Prerequisites

• Node.js (v18 or higher)

• npm or yarn package manager

Installation & Setup

1. Clone/Download the Project Files

# Navigate to your project directory
cd biztooly-invoice-generator

2. Install Dependencies

npm install
# or
yarn install

3. Run Development Server

npm run dev
# or
yarn dev

4. Build for Production

npm run build
# or
yarn build

Using the Invoice Generator

📄 Step 1: Fill Invoice Details

• Company/From Details: Enter your business name, address, email, and tax information

• Client/To Details: Add client information including name, company, and contact details

• Invoice Metadata: Set invoice number, date, and due date

• Logo Upload: Upload your company logo (optional)

📊 Step 2: Add Line Items

• Click “Add Item” to include new line items

• For each item, specify:

  • Description of product/service

  • Quantity

  • Unit price

  • Tax rate (if applicable)

• Items auto-calculate subtotals and totals

💰 Step 3: Configure Financial Settings

• Set currency (USD, EUR, GBP, etc.)

• Add discounts (percentage or fixed amount)

• Include shipping charges

• Add notes or payment terms

• Apply tax settings (VAT, sales tax, etc.)

🎨 Step 4: Customize Appearance

• Choose from available templates

• Adjust color scheme to match branding

• Select font styles

• Configure column display options

📥 Step 5: Preview & Download

• Preview Mode: Review the invoice before finalizing

• PDF Generation: Click “Download PDF” to generate

• Save Draft: Save progress as JSON for later editing

• Email: Send directly to client (if email integration configured)

Features Available

✅ Core Features

• Real-time invoice preview

• PDF generation with jsPDF and autoTable

• Line item management (add/remove/edit)

• Automatic tax calculations

• Subtotal and grand total computation

• Multiple currency support

✅ Advanced Features

• Company logo embedding

• Custom invoice numbering

• Due date tracking

• Tax rate configuration

• Discount handling

• Notes and terms sections

• Responsive design for all devices

✅ Export Options

• PDF download

• JSON save/load

• Print directly

• Email as PDF (requires backend)

Keyboard Shortcuts

• Ctrl/Cmd + N – New invoice

• Ctrl/Cmd + S – Save draft

• Ctrl/Cmd + P – Print invoice

• Ctrl/Cmd + D – Download PDF

• Ctrl/Cmd + Shift + A – Add new line item

Troubleshooting

Issue: PDF not generating correctly

• Solution: Ensure all required fields are filled (minimum: from name, client name, at least one line item)

Issue: Logo not appearing in PDF

• Solution: Logo must be under 2MB and in JPG/PNG format. Try resizing the image.

Issue: Currency symbols not displaying

• Solution: Check browser locale settings or manually select currency from dropdown

Issue: Build errors

• Solution: Clear node_modules and reinstall: rm -rf node_modules && npm install

File Structure Overview

src/
├── components/          # React components
│   ├── InvoiceForm/    # Form inputs
│   ├── InvoicePreview/ # Live preview
│   ├── PDFGenerator/   # PDF creation logic
│   └── UI/             # Reusable UI elements
├── hooks/              # Custom React hooks
├── types/              # TypeScript interfaces
├── utils/              # Helper functions
│   ├── calculations/   # Tax/total calculations
│   ├── formatting/     # Currency/date formatting
│   └── pdf/           # PDF generation utilities
└── App.tsx            # Main application

Dependencies Used

• react & react-dom – UI framework

• jspdf – PDF generation

• jspdf-autotable – Table formatting in PDFs

• date-fns – Date manipulation

• tailwindcss – Styling

• clsx & tailwind-merge – Conditional classes

• TypeScript – Type safety

Browser Support

• Chrome (latest 2 versions)

• Firefox (latest 2 versions)

• Safari (latest 2 versions)

• Edge (latest 2 versions)

• Opera (latest 2 versions)

API Integration (Optional)

The tool can be extended with backend integration for:

• Invoice storage

• Client management

• Payment processing

• Email automation

• Accounting software sync (QuickBooks, Xero, etc.)