The Invoice Generator I Built After Getting Burned

Freelancing taught me many things. It taught me about client communication, scope creep, the importance of contracts, and the specific joy of finishing a project you are proud of. It also taught me, painfully, about unpaid invoices.

I had been freelancing on the side for about two years when a client - a small marketing agency - simply stopped responding after I delivered a finished project. I had sent them an invoice via email. It was a PDF I had generated in Google Docs, reformatted about six times because the spacing never looked right, and sent with a polite message that I now cringe at.

Three months and four follow-up emails later, they still had not paid. The invoice itself looked a bit janky. The payment terms were vague. There was no clear due date. And when I look back at it now, I wonder if the unprofessional presentation gave them an excuse - consciously or not - to deprioritize it.

After that experience, I decided two things: I was going to get more serious about my invoicing, and I was going to build a tool that made professional-looking invoices easy for anyone.

The Problem Was Worse Than I Thought

Once I started researching, I realized the invoicing pain point was not unique to me. Freelancers, small business owners, and contractors of all kinds were dealing with the same issues: clunky Word templates, paid software with subscriptions for features they barely used, platforms that required account creation just to send a single invoice, and tools that looked outdated from 2005.

What people needed was simple: a clean, free, browser-based tool that let you fill in your details and get a professional-looking invoice without friction. No account required. No subscription. No ads asking you to upgrade to premium.

Designing the Form and the Output

The first thing I focused on was the output - what the final invoice would look like. I wanted it to look like something a real business would send. Clean typography, proper spacing, clear sections for invoice details, line items, and payment terms. I spent a surprising amount of time tweaking the layout, looking at invoices from companies I respected and thinking about what made them feel trustworthy.

I then worked backward to design the form. Every field in the form maps directly to something in the invoice. Business name, client name, invoice number, issue date, due date, line items with descriptions, quantities, and rates. Plus optional fields for notes, payment methods, and a logo upload.

One decision I debated was whether to show a live preview. Some invoice generators show a full preview in real-time as you type. Others keep the form and the output separate. I went with a live preview - I found in testing that seeing the invoice take shape as you fill it in was motivating and helped people catch mistakes before they sent anything.

The Technical Implementation

I built this entirely client-side. There is no backend server. The invoice generation happens in the browser, and when you hit the Download or Print button, it uses the browser's built-in PDF print dialog to generate a clean PDF. This approach has significant advantages: the tool is free to host, there are no privacy concerns about user data being sent to a server, and it works on any device with a browser.

The tricky part was getting the PDF output to look exactly like the on-screen preview across different browsers and operating systems. Browser print rendering can vary significantly. I spent a fair amount of time writing CSS that would render consistently - using fixed-width layouts, explicit font sizes, and careful handling of page breaks so that long invoices did not cut a line item awkwardly between pages.

I also added a way to save your business details in localStorage so returning users would not have to refill their company information every time. This was a small quality-of-life feature that got surprisingly positive feedback.

What Users Taught Me About Invoicing

After I launched the Online Invoice generator, the user feedback shaped several subsequent updates.

The most requested feature was multiple currency support. I had defaulted to USD because that was what I knew, but users from the UK, Australia, India, Canada, and dozens of other countries wanted to be able to display their local currency. This was easy to add but important - a tool for freelancers worldwide needed to not assume everyone is in the US.

Several users also asked for the ability to add taxes, which I had naively left out of the initial version. Adding a configurable tax field - with the option to show it as a percentage or a fixed amount - was a straightforward change that made the tool dramatically more useful for users in countries with VAT or GST.

Another update came from a user who said she had sent an invoice to a client only to realize afterward that she had put the wrong due date. She asked if there was a way to save a draft. I added a copy-link feature that encodes the invoice data in a URL, so users can bookmark or share an in-progress invoice and come back to it.

The Unpaid Invoice That Started This

The original client - the marketing agency - eventually paid, but only after I escalated with a formal letter referencing the contract. It took five months from delivery to payment.

I cannot say that a better invoice would have fixed that. Some clients just do not want to pay. But I do believe that a professional-looking invoice, with a clear due date and explicit payment terms, sets a different tone for the relationship. It signals that you take this seriously. And it makes follow-up easier, because you can point to a specific document with specific terms rather than a vaguely worded email chain.

These days, when I send an invoice, it looks like it came from a real company. The projects I invoice for get paid faster. I do not know how much of that is the tool and how much is just me being better at client management generally. But I know which one I enjoy using.