DEV Community

Ray
Ray

Posted on

Building a 100% Client-Side Invoice & Thermal Receipt Generator with Astro and Canvas

#webdev #showdev #astro #javascript

When building utility web apps, developers often reach for a full-stack architecture (database, auth, API routes) by default. But for document generation tools—like invoices and receipts—a serverless, zero-backend approach offers massive advantages in speed, user trust, and operating cost.

Here is an architectural breakdown of how I built Generate Real Invoice using Astro, React, and client-side PDF generation.

1. Zero Backend = Zero Data Liabilities

Invoicing tools handle sensitive information: client names, physical addresses, hourly billing rates, and tax identification numbers.

By keeping calculations and document compilation entirely on the client:

  • No user data is stored on remote servers (automatic GDPR compliance).
  • Users don't need to create accounts or authenticate to get their PDF.
  • Server operating costs remain near zero because Cloudflare Pages only serves static assets.

2. Solving Thermal POS Receipt Rendering

Standard CSS print styles (@media print) usually target standard Letter or A4 paper. Printing to compact Bluetooth or USB thermal receipt printers (58mm or 80mm rolls) presents unique challenges:

  • Font Blurring: Standard anti-aliased proportional fonts turn fuzzy on 203-DPI printheads. Using fixed monospaced fonts (Courier, JetBrains Mono) keeps characters crisp.
  • Roll Boundaries: Fixed CSS roll constraints prevent desktop browsers from ejecting excessive trailing blank paper:

css
@page {
  size: 80mm auto;
  margin: 0;
}
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
wolf2016 profile image
wolf Valencia •

Keeping invoices fully client-side is a strong trust argument for this kind of tool. Nobody wants their rates and tax IDs sitting on a server they've never heard of.

As a Staff SDET I took a look at the live site, and two things stood out:

  • No preview image when the link is shared. The homepage sets twitter:card to summary_large_image but has no og:image or twitter:image, so Slack, X, LinkedIn and WhatsApp show a text-only card or an empty image box. For a free tool that spreads through people sharing the link, a simple 1200x630 image plus those two tags is usually a quick win.
  • www and non-www both load. www.generaterealinvoice.com serves the full site instead of redirecting to generaterealinvoice.com. The canonical tag points to the bare domain, which helps, but a 301 redirect (a single rule in Cloudflare) keeps links and search signals on one address.

We found 8 other issues on top of those two. Also, the @page 80mm trick for thermal rolls is a nice detail. I hadn't seen the trailing-paper problem explained that clearly before.