Modern Invoice Generator Lite
— Angular 21

Modern Invoice Generator Lite is a fully frontend, browser-based invoice generation application built with Angular 21. It requires no server, no database, and no backend — making it trivial to deploy anywhere that can serve static files.

The application lets users build polished, professional invoices in minutes and export them as PDF files or send them directly to print. All data is persisted automatically via the browser's LocalStorage, so nothing is ever lost on refresh.

What you can do with it

A complete overview of every feature included in this product.

Modern Angular 21 Patterns

This project uses the latest Angular features and architectural patterns:

The project follows Angular's recommended feature-based folder structure.

      

src/
├── app/
│   ├── core/                     # Singleton services & data models
│   │   ├── models/
│   │   │   └── invoice.model.ts  # All TypeScript interfaces & defaults
│   │   └── services/
│   │       ├── invoice.service.ts   # Central signal-based state store
│   │       ├── storage.service.ts   # LocalStorage read/write abstraction
│   │       └── pdf-export.service.ts # html2pdf.js lazy loader & export
│   │
│   ├── features/               # Lazy-loaded route features
│   │   ├── invoice/
│   │   │   ├── invoice.routes.ts
│   │   │   ├── pages/invoice-page/     # Root invoice page layout
│   │   │   └── components/
│   │   │       ├── invoice-editor/     # Left panel — all form inputs
│   │   │       ├── invoice-items/      # Line items table with add/remove
│   │   │       └── invoice-preview/    # Right panel — live PDF-ready preview
│   │   └── settings/
│   │       ├── settings.routes.ts
│   │       └── pages/settings-page/    # Company info, currency, tax rate
│   │
│   ├── shared/                 # Reusable components
│   │   └── components/
│   │       ├── navbar/             # Top nav — New Invoice, Print, Export PDF
│   │       └── logo-upload/        # Drag-and-drop logo uploader
│   │
│   ├── app.ts                  # Root component
│   ├── app.html                # Root template (<router-outlet>)
│   ├── app.routes.ts           # Top-level lazy routes
│   └── app.config.ts           # provideZonelessChangeDetection, Router
│
├── styles/                     # Global SCSS design system
│   ├── _variables.scss         # Color tokens, spacing, typography
│   ├── _mixins.scss            # Reusable SCSS helpers
│   ├── _buttons.scss
│   ├── _forms.scss
│   ├── _layout.scss
│   └── _invoice.scss           # Invoice preview print styles
│
├── styles.scss                 # Global stylesheet entry
└── types/
    └── html2pdf.d.ts           # TypeScript declarations for html2pdf.js
      

Key Files Explained

Follow these steps to get the project running on your local machine.

node --version
# Should output v22.x.x or higher

npm --version
# Should output 10.x.x or higher

npm install -g @angular/cli

ng version

npm install --legacy-peer-deps

Start the Angular development server with live reload.

ng serve

Once the server starts, open your browser and navigate to:

http://localhost:4200

Application Routes

Create an optimized production build with tree-shaking, minification, and code splitting.

ng build --configuration production

The compiled output is placed in the /dist directory at the project root. The contents of this folder are what you deploy.

Since this is a pure static application, it can be hosted on any static file hosting provider.

Deploy to Netlify (Recommended)

Option A — Drag & Drop (quickest)

ng build --configuration production

Option B — Git-Connected Auto Deploy

Build command:  ng build --configuration production
Publish directory:  dist/morden-invoice-generator/browser

/*    /index.html   200

Configuration is done entirely through the application's Settings page (/settings). No code changes are needed for basic configuration. All settings are persisted automatically in LocalStorage.

Settings Page Fields

Per-Invoice Configuration

Each invoice also has its own editable fields on the main invoice editor page:

Developers can customize the look and feel of both the application UI and the invoice layout by editing the SCSS files.

Design Tokens — src/styles/_variables.scss

All colors, spacing, and typography values are defined as SCSS variables here. Change these to re-theme the entire application:

// Brand colors — change these to re-theme the app
$primary:      #6366f1;   // Indigo — buttons, links, accents
$primary-dark: #4f46e5;   // Hover state
$accent:       #22d3ee;   // Cyan highlights

// Invoice layout colors
$invoice-header-bg: #1e2535;
$invoice-border:    #2a3144;
$invoice-text:      #f1f5f9;

// Typography
$font-base:  'Inter', system-ui, sans-serif;
$font-mono:  'JetBrains Mono', monospace;

Invoice Print Layout — src/styles/_invoice.scss

This file controls how the invoice looks when printed or exported as PDF. Edit it to match your brand:

// Invoice preview wrapper
.invoice-preview {
  background: #fff;
  color: #1a1a2e;
  font-family: 'Inter', sans-serif;
  max-width: 794px;  // A4 width in px at 96dpi
  padding: 40px 48px;
}

// Header section with company info + logo
.invoice-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 32px;
}

// Customize the accent color of table headers
.invoice-table thead th {
  background: $primary;
  color: #fff;
}

SCSS File Overview

The application ships with six currencies out of the box. The selected currency symbol is displayed throughout the invoice — in item prices, subtotal, tax, and grand total.

Adding a New Currency

To add a new currency, open src/app/core/models/invoice.model.ts and add an entry to the CURRENCIES array:

export const CURRENCIES: CurrencyOption[] = [
  { code: 'USD', symbol: '$',  name: 'US Dollar' },
  { code: 'INR', symbol: '₹', name: 'Indian Rupee' },
  { code: 'EUR', symbol: '€', name: 'Euro' },
  { code: 'GBP', symbol: '£', name: 'British Pound' },
  { code: 'AUD', symbol: 'A$', name: 'Australian Dollar' },
  { code: 'CAD', symbol: 'C$', name: 'Canadian Dollar' },
  // Add your currency here:
  { code: 'JPY', symbol: '¥', name: 'Japanese Yen' },
];

The new currency will automatically appear in the currency dropdown on both the invoice editor and the settings page.

Print Invoice

Click the Print button in the top navigation bar. The application applies print-optimized CSS that hides the editor pane and displays only the invoice preview, perfectly formatted for your printer.

Export as PDF

Click the Export PDF button in the navigation bar. The PDF is generated entirely in the browser using html2pdf.js + html2canvas. The file is named after the invoice number (e.g., invoice-INV-0001.pdf).

How it works internally

PDF Quality Settings

PDF quality and page settings can be adjusted in src/app/core/services/pdf-export.service.ts:

const options = {
  margin:      [8, 8, 8, 8],     // top, right, bottom, left (mm)
  filename:    `invoice-${invoiceNumber}.pdf`,
  image:       { type: 'jpeg', quality: 0.98 },
  html2canvas: { scale: 2, useCORS: true },  // scale: 2 = retina quality
  jsPDF:       { unit: 'mm', format: 'a4', orientation: 'portrait' },
};

Common issues and their solutions. Click any item to expand.

npm install -g @angular/cli

node --version

nvm install 22
nvm use 22

npm install --legacy-peer-deps

npm cache clean --force
npm install --legacy-peer-deps

ng serve --port 4300

Before contacting support

Please check the following first to speed up resolution:

Modern Invoice Generator Lite · Angular 21 · v1.0.0
© 2026 · All rights reserved · Licensed per CodeCanyon Standard/Extended License