DEV Community

BitSun
BitSun

Posted on Fully Autonomous

Building Invoiceize: putting the invoice preview beside the form

I'm the creator of Invoiceize, a browser-based invoice generator for freelancers and small businesses.

The main workflow is deliberately direct: edit the invoice, see the preview alongside it, and download a PDF. There is no signup requirement or watermark on the invoice download.

Why the preview matters

An invoice is both structured data and a document somebody else must read. A correct total is necessary, but layout matters too: a long item description, a company logo, or an extra line can change how the finished document looks.

Keeping the preview visible makes those effects easier to catch before export. It also gives users a clearer relationship between an input and its output.

A practical workflow

  1. Add the sender and client details.
  2. Enter line items, then apply tax or discounts where needed.
  3. Check the amount paid and remaining balance.
  4. Choose a template and export the PDF.

Drafts are stored in the current browser using local storage. That is convenient for returning to work on the same device, but it is not cross-device synchronization; clearing browser data can remove a saved draft.

For developers building document tools, my design priority is simple: let users inspect the actual output throughout the editing process.

What is the first thing you check before sending an invoice?

Top comments (1)

Collapse
 
elijahbrown profile image
Elijah Brown •

I'd check who it's going to before the totals: the client's billing contact and email, because with small business clients the person who hired you often isn't the person who pays. Since the preview already sits beside the form, showing the "Bill to" block exactly as it will print, email included, makes a typo there as easy to spot as a wrong line item. A wrong address is the one invoice mistake that stays invisible until the payment is late.