Auto Print Kiosk

A React SPA that automatically prints documents when opened in Chrome kiosk mode — no print dialog, no user interaction required.

How It Works

1. The app renders print-ready pages using CSS @media print for layout and page breaks
2. On load, window.print() fires automatically after a short render delay
3. Chrome's kiosk flags bypass the system print dialog and send directly to the default printer

Prerequisites

• Google Chrome installed
• A default printer must be configured on the system (especially important on Windows — go to Settings → Printers & Scanners → set your printer as default)

Development

npm install
npm run dev

Opens at http://localhost:5173. In dev mode, window.print() will still trigger the print dialog (kiosk flags aren't active). You'll see a status badge in the top-right corner.

Kiosk Mode Launch

macOS

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
  --kiosk \
  --kiosk-printing \
  http://localhost:5173

Windows

"C:\Program Files\Google\Chrome\Application\chrome.exe" ^
  --kiosk ^
  --kiosk-printing ^
  http://localhost:5173

Important (Windows): A default printer MUST be set in system settings, otherwise Chrome will still show the print dialog or fail silently.

Linux

google-chrome \
  --kiosk \
  --kiosk-printing \
  http://localhost:5173

Chrome Flags Explained

Flag	Purpose
--kiosk	Full-screen mode, no browser chrome (address bar, tabs, etc.)
--kiosk-printing	Silently prints to default printer without showing the print dialog

Build & Serve

npm run build
npx serve dist

Then launch Chrome in kiosk mode pointing to the served URL.

Current Test Pages

• Page 1 — Alignment test with a 2x2 grid
• Page 2 — Content/character rendering test

Adding New Pages

Add a new <div className="print-page"> in src/App.tsx. CSS handles the page breaks automatically — each .print-page element becomes one printed page.