Invoice Generator With Preview
An invoice generator with preview lets you check how the finished document actually looks before you send it, instead of committing blind. On this page the preview is the generated PDF itself: your details stay in the form, so you generate, open the result, spot what reads badly or overflows, adjust, and regenerate — a loop fast enough to repeat every few seconds. There is no live drag-and-drop canvas; what you review is the genuine final file, produced entirely in your browser.
How it works
The generator is deterministic: the same inputs always produce byte-for-byte the same layout. That property is what makes iteration meaningful. Change one thing — shorten a description, merge two line items, switch the currency code — and the next PDF differs in exactly that one place, so you can compare versions side by side and see precisely what your edit did. The engine typesets seller and buyer blocks, the invoice number and date, an item table parsed from description | quantity | price lines, and the computed subtotal, tax, and total onto a fixed A4 template with pdf-lib, doing all money arithmetic in integer cents.
Being deliberate about the honest part: "preview" here does not mean a WYSIWYG editor where you drag boxes around a canvas. It means the review artifact is the real output. In practice that is a stronger guarantee than a live mock-up, because approximated previews are exactly where surprises hide — a canvas that wraps text at a slightly different width than the PDF engine will happily show you a one-page invoice that exports as two. Here nothing is approximated; if the preview shows the total block on page one, the file you send has it on page one, because they are the same file.
The loop the page is designed around: fill the form once, generate, and open the PDF in a second browser tab or your viewer. Read it as your client will — top to bottom. Typical second-iteration fixes are wording, not numbers: "Development work" becomes "Frontend development, June sprint 1–2"; a catch-all line gets split into three lines so the client's project manager can approve it without questions; a long description gets trimmed so it no longer wraps to a second table row. Then regenerate and re-check. Because your entries persist in the form, each cycle costs seconds, and none of them transmits anything — every version is built and discarded in local memory.
Worked example: three iterations to a sendable invoice
Version 1: a designer enters five line items and generates. Reading the 18 KB PDF reveals two problems the form did not show — the first description, 92 characters long, wraps onto a second line and makes the table ragged, and the 20% tax rate is wrong for the client's country. Version 2, forty seconds later: the description is cut to 48 characters, the rate corrected to 19%, and the total changes from 2,952.00 to 2,927.40 EUR. The table is now clean, but reading on, the payment terms line mentions 14 days while the client's contract says 30.
Version 3 fixes the terms and is final: three generations, roughly four minutes total, and every fix was something spotted by reviewing the typeset document rather than the input fields. The three PDFs varied by only a few dozen bytes — same template, same fonts, different text — which is the deterministic behavior that makes this workflow trustworthy.
Frequently asked questions
Is there a live preview that updates while I type?
No — the preview is the generated PDF itself, which you regenerate after each round of edits. Because generation takes well under a second and the form keeps your entries, the check-and-adjust cycle is nearly as fast as a live canvas and shows the true final output rather than an approximation of it.
What can I actually change between iterations?
Everything the invoice is made of: item descriptions and their order, quantities and prices, how you split or combine lines, the seller and buyer blocks, invoice number, tax rate, and currency. Layout positions and fonts are fixed by the template, which is what keeps every iteration tidy.
Why check the PDF instead of trusting the form values?
Because problems appear in typeset form that are invisible in input boxes: a description that wraps awkwardly, an item list that pushes the total block down the page, or a wrong tax rate you only notice next to the computed amount. Reviewing the real artifact catches what proofreading fields does not.
Do my entries survive between regenerations?
Yes, within the session: the form keeps everything you typed, so each iteration only changes what you edit. If you close the tab your draft is gone, so keep it open until the final version is downloaded.
Can I reuse the result as a template for next month's invoice?
The practical pattern is to keep a plain-text copy of your line items and details, paste it in next time, and change only the invoice number, date, and quantities. The generator's fixed layout guarantees the new invoice matches the old one visually.
Does iterating repeatedly send my data anywhere?
No. Every regeneration happens in your browser's memory, so ten iterations transmit exactly as much billing data as one: none. Only the PDFs you explicitly download are written to disk.