InvioLite

📖 Overview

InvioLite is a modern, professional invoice generator built with vanilla JavaScript. It allows you to create beautiful invoices, quotes, and proforma invoices with ease. No installation or build process required - it works entirely in your browser!

Key Features

Technology Stack

• Vanilla JavaScript (ES6+) - No frameworks required
• HTML5 - Semantic markup
• CSS3 - Modern styling
• html2pdf.js - PDF generation (CDN-loaded)

Browser Compatibility

• ✅ Chrome (latest)
• ✅ Firefox (latest)
• ✅ Safari (latest)
• ✅ Edge (latest)

c o d e l i s t . c c

Quick Start

1. Download or extract the files to your web server or local machine
2. Open index.html in a modern web browser
3. Start creating invoices!

File Structure

inviolite/
├── index.html              # Main application file
├── script.js               # Core application logic
├── style.css               # Base styles and editor panel
├── translations.js         # Translation manager
├── translations.json       # Multi-language strings
├── config.json             # Configuration file
├── package.json            # Project metadata
├── README.md               # Quick start guide
├── templates/
│   ├── template-1.css      # Classic Professional template
│   ├── template-2.css       # Stripe Inspired template
│   ├── template-3.css       # Commercial template
│   ├── template-3-commercial.html
│   ├── template-4.css       # Design template
│   ├── template-4-design.html
│   ├── template-5.css       # Physical template
│   └── template-5-physical.html
└── logo.png                # Company logo (optional)

Web Server Setup (Optional)

While InvioLite works locally, for best results (especially for PDF generation), use a web server:

Python Server

python3 -m http.server 8000

Then open: http://localhost:8000

PHP Server

php -S localhost:8000

Then open: http://localhost:8000

Node.js Server

npx http-server -p 8000

Then open: http://localhost:8000

⚙️ Configuration

All customization is done through the config.json file. This centralized configuration makes it easy to customize your invoice generator.

Configuration Structure

{
  "company": {
    "name": "Your Company Name",
    "logo": "logo.png",
    "address": {
      "line1": "Company Address Line 1",
      "line2": "City / State",
      "country": ""
    },
    "contact": {
      "email": "info@example.com",
      "phone": "+1 555 000 0000",
      "website": "example.com"
    }
  },
  "invoice": {
    "defaultNumber": "INV-001",
    "defaultTaxRate": 20,
    "currency": "TRY",
    "dateFormat": "DD.MM.YYYY"
  },
  "branding": {
    "primaryColor": "#ff6600",
    "headerBarColor": "#ff6600"
  },
  "footer": {
    "enabled": true,
    "showLogo": true,
    "showCompanyInfo": true,
    "showEmail": true,
    "showPhone": true,
    "showWebsite": true,
    "showAddress": true
  },
  "template": {
    "name": "template-1",
    "displayName": "Classic Professional"
  }
}

Company Information

Invoice Defaults

Branding

Footer Configuration

Control what appears in the invoice footer:

• footer.enabled - Enable/disable entire footer
• footer.showLogo - Show company logo
• footer.showCompanyInfo - Show company name
• footer.showEmail - Show email address
• footer.showPhone - Show phone number
• footer.showWebsite - Show website
• footer.showAddress - Show address

Template Selection

Choose from 5 professional templates:

• "template-1" - Classic Professional
• "template-2" - Stripe Inspired
• "template-3" - Commercial
• "template-4" - Design
• "template-5" - Physical

📋 Usage Guide

Creating an Invoice

1. Fill in document details:
   • Select document type (Invoice, Proforma Invoice, or Quote)
   • Choose currency (TRY, USD, EUR, GBP)
   • Enter invoice number
   • Set issue date and expiry date
2. Add customer information:
   • Company/Name
   • Address
   • Phone number
3. Add line items:
   • Click "+ Add Item" to add products/services
   • Enter description, quantity, and unit price
   • Remove items with the "Remove" button
4. Configure pricing:
   • Set tax rate (default: 20%)
   • Add discount (percentage or fixed amount)
5. Add notes (optional):
   • Payment terms
   • Delivery details
   • Other important information
6. Export:
   • Click "Download PDF" to generate PDF
   • Click "Print" to print directly
   • Click "Save" to save to browser storage
   • Click "Export" to download JSON backup

Data Management

Auto-Save

The application automatically saves your work to browser localStorage every 2 seconds after changes. Your data persists across page reloads.

Manual Save

Click the "Save" button to manually save your current invoice state.

Export Data

Click "Export" to download a JSON backup file containing:

• All line items
• Form data (customer info, dates, etc.)
• Settings (tax rate, discount)
• Timestamp

Import Data

Click "Import" and select a previously exported JSON file to restore your invoice data.

Language Switching

Use the language selector in the header to switch between available languages:

• 🇹🇷 Turkish (Türkçe)
• 🇬🇧 English
• 🇩🇪 German (Deutsch)
• 🇮🇹 Italian (Italiano)
• 🇧🇬 Bulgarian (Български)
• 🇷🇺 Russian (Русский)

The selected language is saved and persists across sessions.

🎨 Templates

InvioLite includes 5 professional invoice templates. Switch between them via config.json.

Template 1: Classic Professional

• Style: Traditional business invoice
• Features: Bold orange accent bar, classic typography
• Best for: Professional services, traditional businesses
• Files: templates/template-1.css

Template 2: Stripe Inspired

• Style: Clean, modern design
• Features: Gradient header bar, minimal design
• Best for: Tech companies, SaaS businesses
• Files: templates/template-2.css

Template 3: Commercial

• Style: Professional B2B invoice
• Features: Blue gradient header, structured layout
• Best for: B2B companies, commercial transactions
• Files: templates/template-3.css, templates/template-3-commercial.html

Template 4: Design

• Style: Creative and modern
• Features: Purple gradient header, card-based layout
• Best for: Design agencies, creative businesses
• Files: templates/template-4.css, templates/template-4-design.html

Template 5: Physical

• Style: Traditional paper invoice
• Features: Black borders, traditional layout
• Best for: Physical businesses, printed invoices
• Files: templates/template-5.css, templates/template-5-physical.html

Switching Templates

Edit config.json and change the template name:

{
  "template": {
    "name": "template-2",
    "displayName": "Stripe Inspired"
  }
}

💡 Customization

Adding Your Logo

1. Place your logo file in the project root directory
2. Supported formats: PNG, SVG, JPG
3. Update config.json:

   "logo": "your-logo.png"

4. If no logo is found, the company name will display as styled text

Customizing Colors

Edit config.json to change branding colors:

{
  "branding": {
    "primaryColor": "#your-color",
    "headerBarColor": "#your-color"
  }
}

Adding Custom Templates

1. Create a new CSS file in templates/ directory
2. Name it: template-X.css (where X is a number)
3. Copy styles from an existing template and modify
4. Update config.json to use your template

Adding New Languages

1. Open translations.json
2. Copy an existing language section
3. Add a new language code (e.g., "fr" for French)
4. Translate all strings
5. Add language option to index.html language selector

Modifying Invoice Layout

For templates 1 and 2, modify the HTML in index.html. For templates 3, 4, and 5, edit the corresponding HTML files in templates/ directory.

🔧 API Reference

InvoiceGenerator Class

The main application class that handles all invoice operations.

Methods

loadConfig()

Loads configuration from config.json.

await invoiceGenerator.loadConfig();

addItem()

Adds a new line item to the invoice.

invoiceGenerator.addItem();

removeItem(index)

Removes a line item at the specified index.

invoiceGenerator.removeItem(0);

updatePreview()

Updates the invoice preview with current data.

invoiceGenerator.updatePreview();

calculateTotals()

Calculates subtotal, tax, discount, and grand total.

const totals = invoiceGenerator.calculateTotals();

exportPDF()

Generates and downloads a PDF of the invoice.

await invoiceGenerator.exportPDF();

saveToStorage()

Saves current invoice data to localStorage.

invoiceGenerator.saveToStorage();

loadFromStorage()

Loads invoice data from localStorage.

invoiceGenerator.loadFromStorage();

exportData()

Exports invoice data as JSON file.

invoiceGenerator.exportData();

importData(file)

Imports invoice data from JSON file.

invoiceGenerator.importData(file);

TranslationManager Class

Handles multi-language support.

Methods

loadTranslations()

Loads translations from translations.json.

await translationManager.loadTranslations();

t(key, params)

Gets translated string for a key.

const text = translationManager.t('ui.save');
const taxLabel = translationManager.t('invoice.tax', { rate: 20 });

setLanguage(lang)

Sets the current language.

translationManager.setLanguage('en');

getCurrentLanguage()

Gets the current language code.

const lang = translationManager.getCurrentLanguage();

🔍 Troubleshooting

Common Issues

PDF Export Not Working

Logo Not Displaying

Data Not Saving

Template Not Loading

Language Not Switching

Browser Console Errors

If you encounter errors, check the browser console (F12) for detailed error messages. Common issues:

• CORS errors: Run on a web server, not file://
• 404 errors: Check file paths are correct
• JSON parse errors: Check config.json syntax
• Type errors: Check JavaScript console for details

Performance Issues

• Slow loading: Check internet connection for CDN resources
• Laggy preview: Reduce number of line items
• PDF generation slow: Normal for large invoices, be patient

❓ Frequently Asked Questions

General

Do I need a server to run InvioLite?

No, InvioLite works locally in your browser. However, for PDF generation, it's recommended to use a local web server.

Can I use this commercially?

Yes, InvioLite is designed for commercial use. Check your license agreement for specific terms.

Is my data secure?

Yes, all data is stored locally in your browser. No data is sent to any server.

Customization

Can I modify the code?

Yes, you can modify the code to suit your needs. However, you cannot redistribute or resell the modified code.

How do I add more currencies?

Edit translations.json to add currency translations, and update the currency selector in index.html.

Can I create custom templates?

Yes, create new CSS files in the templates/ directory and reference them in config.json.

Technical

What browsers are supported?

Chrome, Firefox, Safari, and Edge (latest versions).

Does it work on mobile?

Yes, InvioLite is fully responsive and works on mobile devices.

Can I integrate this with my website?

Yes, you can embed InvioLite in your website or integrate it with your existing systems.

🆘 Support

For support, questions, or feature requests:

• Email: info@imgera.com
• Website: imgera.com