How to use
- Enter your name or business and your client's name, with an address for each if you want one on the invoice.
- Give the invoice a number and a date, and a due date if you use one. Set the currency label, such as $ or USD, and the page size.
- Add each item with a description, a quantity and a price; the amount and the running total update as you type. Press Add an item for more rows, and the × on a row to remove it.
- Set a tax percent if one applies, add any notes, and press Download PDF.
Examples
3 hours of design at $150, plus one month of hosting at $19.99
→ Subtotal $469.99Each line is quantity times price; the subtotal adds the real rows together.
Subtotal $469.99, tax 10%
→ Tax $47.00, total $516.99The tax is the subtotal times the percent (46.999 here), rounded to two decimals.
Ten lines of one item at $0.10
→ Subtotal $1.00The arithmetic is exact decimal, so it does not come out as 0.9999999999999999 the way some calculators do.
One item, quantity 1, price 1.005
→ Line total $1.01Halves round up. A plain floating-point calculation can give 1.00 for the same sum.
Two items, each quantity 1 at $0.005
→ Each line shows $0.01, and the subtotal is $0.01The subtotal is rounded once, from the unrounded lines, so the shown lines can differ from it by a cent.
Currency label €, one item at 10
→ Total € 10.00The euro sign can be drawn. The won sign ₩ cannot, and shows as ? in the PDF, so use a code such as KRW.
A client name typed in Korean
→ A warning that those characters cannot be shown in the PDFThey would appear as ? in the PDF, so the page lists them before you download.
How it works
The PDF is drawn directly, one line of text and one line or rectangle at a time, with @cantoo/pdf-lib (a maintained fork of pdf-lib), using Helvetica, one of the PDF format’s own built-in fonts, so no font file has to be downloaded. The built-in font covers the Latin letters and the windows-1252 set. A name or item in Korean, Chinese, Cyrillic or a symbol outside that set cannot be drawn and comes out as ?, which is why the page lists such characters before you download.
How an amount is worked out
| Step | Rule |
|---|---|
| Line total | Quantity times price, rounded half up to two decimals |
| Subtotal | The unrounded lines added together, rounded once; rows without a description are left out |
| Tax | Subtotal times the percent, divided by 100, rounded once; the line is left off when the percent is 0 |
| Total | Subtotal plus tax, rounded to two decimals |
Every step uses decimal.js, so many small amounts add up exactly instead of picking up binary-rounding noise.
What the page does not do
It does not number invoices for you, remember clients, convert currencies or work out which tax applies. It lays out what you enter, and it refuses to make a PDF that has no sender, no client or no valid item.
The arithmetic, the rounding cases, the character check and the PDF’s own text (read back out of it) are covered by tests.
Sources
- @cantoo/pdf-lib, the PDF library used here
- decimal.js, for exact money arithmetic
- WHATWG Encoding Standard: windows-1252
Frequently asked questions
- Is this invoice legally valid?
- This page lays out the numbers correctly and makes a PDF; it does not know tax law, invoice numbering rules or what your country or industry requires an invoice to say. Check what your business needs to include before sending one.
- Can I use a currency other than dollars?
- Yes. The currency field is a short label put before each amount, and it converts nothing. £, ¥, € and codes such as EUR or KRW can be drawn. The won sign ₩ cannot, because the built-in PDF font has no glyph for it, so type KRW.
- Which characters can the PDF show?
- The Latin letters up to code 255, such as é, ñ and ü, plus the extra characters of the windows-1252 set: the euro sign, en and em dashes, curly quotes, the bullet, the ellipsis and the trademark sign. Anything else, such as Korean, Chinese, Cyrillic or emoji, appears as ? in the PDF, and the page lists those characters before you download.
- Why does the subtotal differ by a cent from the lines above it?
- Each line is rounded for display, but the subtotal adds the lines unrounded and rounds once. With many small amounts this can differ from the sum of the shown lines by a cent. Round the quantities or prices yourself if you need the lines to add up exactly.
- Is the tax rounded per line?
- No. The tax is the subtotal times the percent, rounded once to two decimals, and the total is the subtotal plus that tax.
- What does it refuse to make?
- An invoice needs a name for the sender and for the client, at least one item with a description, a quantity above zero and a price of zero or more, and a tax percent that is not negative. A row with no description is left out, like an unused row on paper.
- Can I save the invoice to edit later?
- Not yet: this page does not store anything, and closing the tab loses what you typed. Keep your own copy of the information if you expect to send similar invoices again.
- Is my invoice uploaded?
- No. The PDF is built in your browser, and nothing you type is sent anywhere.
Related tools
Version history
- 1.0.1 — The euro sign, dashes, curly quotes and the bullet no longer trigger the unsupported-character warning, since the PDF can draw them. Adds how each amount is rounded, which characters the PDF can show, and what the page refuses to make.
- 1.0.0 — First release.