CruxDevCruxDev Tools Prompts
finance Utility • Zero-Server Privacy • 100% Client-Side

Invoice Generator

Design invoices your way: 5 templates, live A4 preview, drag-and-drop line items, logo, accent colors, tax & discounts — print or export, nothing stored.

Overview

A full invoice builder that runs entirely in the browser: five template designs, a live A4 preview, drag-and-drop line item ordering, logo upload, an ISO-4217 currency picker, and tax or discount handling. The finished invoice can be printed to PDF from a popup or downloaded as a standalone HTML file, with no account and no upload.

How It Works

Pick a template (Classic, Modern, Minimal, Bold, or Elegant) and an accent colour. Fill in the invoice number, issue date, payment-due window in days, and currency; then add your business details and the client's details as free text. Add line items with quantity and price, dragging the grip handle to reorder them, and set a tax percentage and a discount as either a percentage or a flat amount. Upload a logo up to 400 KB to embed it, watch the A4 preview update, then use Print (choose Save as PDF in the dialog) or download the invoice as an HTML file.

Step-by-Step Usage Guide

  1. Choose a template and accent colour.
  2. Enter invoice number, dates, currency, and both parties' details.
  3. Add line items, reorder them by dragging, and set discount and tax.
  4. Print to PDF from the popup or download the standalone HTML file.

Technical Specifications & Standards

Totals follow the order subtotal, minus discount, plus tax: the discount subtracts either a percentage or a flat amount capped at the subtotal, and tax applies to the discounted amount — a common invoicing sequence. The currency picker draws on an ISO-4217 dataset that carries each currency's symbol, decimal places, and symbol position, which is why Bahraini Dinar renders three decimals and Burundian Franc renders none. The preview is a debounced (250 ms) render of a complete standalone HTML document; every user-entered string is HTML-escaped before being placed in that document, so a company name containing angle brackets cannot break the layout or inject markup. Printing opens a popup window with the document — allow popups — where your browser's Save as PDF produces the PDF. One honest limitation: the draft is held in component state and is not saved to localStorage, so refreshing the page discards an unsaved invoice; download the HTML or print before navigating away.

Targeted Use Cases

  • Freelancers issuing a one-off invoice with a client's terms and a logo.
  • Producing a currency-correct invoice for an international client.
  • Applying a percentage or flat discount plus tax to itemised work.
  • Generating a printable record without creating an account on an invoicing service.

Notes & Gotchas

  • Download the HTML or print before leaving the page — drafts do not survive a refresh.
  • Keep logos under the 400 KB limit so the embedded data URL stays lightweight.
  • Set the due-in-days field so the due date prints correctly from the issue date.
  • Verify tax treatment for your jurisdiction; the tool applies one flat rate after discounts.

Frequently Asked Questions

How do I get a PDF?

Click Print, allow the popup, and choose Save as PDF in your browser's print dialog. The invoice opens as a standalone A4-formatted document, so the PDF matches the preview.

Is my invoice data stored on a server?

No. The invoice is composed and rendered entirely in your browser, and export is a local file download. Note that the draft itself is not persisted — refreshing the page starts a new invoice.

Which currencies are supported?

A broad ISO-4217 list with each currency's symbol, decimal places, and symbol position — from two-decimal dollars to three-decimal Bahraini Dinar and zero-decimal Burundian Franc. The picker formats amounts correctly for the chosen code.

How are discount and tax combined?

The subtotal is reduced by the discount first (percentage or flat, capped at the subtotal), and the tax percentage is then applied to the discounted amount. Each step is shown as its own line in the totals block.