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

Ray — Thu, 08 Oct 2026 13:18:28 +0000

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

DEV Community: Ray

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

1. Zero Backend = Zero Data Liabilities

2. Solving Thermal POS Receipt Rendering