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

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;
}