Skip to content
Manan Devs
Book a Free Call

BillFlow — Free Invoice Generator

An invoice generator where the preview is the PDF

BillFlow makes a professional invoice, tax invoice or proforma in four short steps and downloads it as a print-ready PDF. It is free, needs no account, and keeps the invoice in the browser. The work that mattered was making the numbers exact and making the preview match the download page for page.

Visit the live siteSource codeAll projects
Type
Free web tool
Role
Design & full-stack build
Core stack
Next.js 16 · React 19 · TypeScript · React PDF
Focus
Exact totals, true preview, privacy
BillFlow — Free Invoice Generator — interface screenshot

The problem

Most free invoice tools either want an account before they give you a PDF, or show an HTML preview that does not match the file you download. A freelancer finds out the totals wrapped or the logo moved only after the invoice has been sent.

Invoices also hold private details: client names, bank accounts and prices. Sending all of that to a server just to make a PDF is a cost the user should not have to pay.

What I built

A Next.js 16 App Router site in TypeScript with Tailwind CSS v4, deployed on Vercel. The whole generator runs in the browser.

  • Four-step generator: document type, your and your client’s details, line items, then design and download, with a progress stepper that blocks on the first field that needs fixing.

  • Live PDF preview: the real PDF is drawn and shown next to the form as you type, with fit and 100% zoom and a full-screen view.

  • Line items: quantity, unit price, per-line tax and discount, drag-and-drop reordering, duplicate and delete, plus an invoice discount and shipping.

  • Design: four templates (Classic, Modern, Minimal and Bold), an accent colour and a choice of sans, serif or mono type.

  • Send it: download, print, copy a share link, or open an email to the client with the subject and total filled in.

  • Optional account: signing in with Clerk saves your business and payment details so they fill in on any device.

The technical decisions, and why

Money is counted in cents

All the maths runs on whole numbers of cents, so 0.1 + 0.2 problems can never reach a total. The invoice discount is split across the lines with the largest-remainder method, so the shares always add up to exactly the discount, and tax is worked out on each line after its discount. Tax is grouped by rate for the summary, and the rules are covered by unit tests in Vitest.

The preview is the downloaded file

Instead of an HTML copy of the invoice, the preview renders the same @react-pdf/renderer document used for the download, then draws its pages with PDF.js. Renders wait 400 ms after typing stops, an older render is dropped when a newer one starts, and the last pages stay on screen until the new ones are ready, so there is no loading flash. The download reuses the preview’s file when it is current, so what you saw is what you get.

Heavy libraries load only when needed

The PDF renderer and PDF.js are large, so both are imported lazily inside the generator. The landing page, templates and FAQ stay light, and the PDF code is only fetched once someone starts an invoice.

The invoice stays in the browser

Drafts are saved to local storage with Zustand, and a share link compresses the whole invoice with lz-string into the URL hash, which browsers never send to a server. Logos and signatures are left out of the link to keep it a sensible length. Zod checks a shared invoice’s structure before it loads, so a broken link cannot break the form.

Accounts save only what is needed

An account is optional. When someone signs in, only their business details, payment details and default terms are saved to their Clerk profile. The logo, signature and invoices stay on the device, which also keeps the saved data inside Clerk’s 8 KB metadata limit.

Where it landed

The finished tool takes someone from a blank page to a downloaded PDF in four steps, without an account, and the file matches the preview exactly. Picking “New invoice” keeps the business, payment and design details and suggests the next invoice number, so the second invoice is faster than the first.

The main lesson is to preview the real output rather than an imitation of it. Rendering the actual PDF costs more than an HTML mock-up, but it removes a whole class of “it looked different on screen” bugs.

Built with

Next.js 16React 19TypeScriptReact PDFZustandClerk Auth

Related work