# Midday React PDF Invoice Template

> Open-source React PDF template and Next.js route for rendering invoices

An open-source invoice template built on @react-pdf/renderer from Midday. It renders customizable, cleanly designed PDF invoices using Geist Mono typography, Tiptap rich-text integration, and dynamic QR codes without requiring external rendering APIs.

Website: https://midday.ai/updates/invoice-pdf

## What it is for

- Generate PDF invoices programmatically inside a Next.js or Node.js web application
- Preview generated invoices directly in the browser using dynamic route queries
- Render rich-text invoice notes and customer details stored in Tiptap JSON format

## Features

- Built on @react-pdf/renderer for client-side and server-side PDF generation
- Custom typography support configured with Vercel's Geist Mono font
- Embedded QR codes pointing directly to live web invoices
- Flexible page sizing supporting both standard A4 and US Letter formats
- Modular component layout for line items, summaries, payment details, and logos
- Next.js Route Handler pattern for streaming PDF responses directly

## Pricing

Open source. Free and open source

## Details

- Type: Website
- Category: [Development](https://xiry.app/topics/development.md)
- Topic: [UI Components](https://xiry.app/topics/development/ui-components.md)
- Open source: yes
- Platforms: Code library, Web
- For: React and Next.js developers building custom billing or invoicing features
- Alternative to: Puppeteer, DocRaptor, PDFShift
- Tags: react pdf, invoicing, nextjs, typescript, templates

## Why it was saved

- [@pontusab, 18 August 2025](https://x.com/pontusab/status/1957440401771479529): A real, production-grade open-source React PDF invoice component with a documented set of features (Tiptap-based dynamic content, Geist font, A4/letter support, QR code linking to web invoice). Directly reusable for anyone building PDF generation into a web app.

## Compare

- [Alternatives to Puppeteer](https://xiry.app/alternatives/puppeteer.md)

## Related

- [shadcn/ui](https://xiry.app/resources/shadcn-ui-1902): Copy-paste React UI components built with Tailwind CSS and Radix primitives. (Website, Open source)
- [Efferd](https://xiry.app/resources/efferd): Pre-built, responsive shadcn/ui blocks and layouts for React applications (Web app, Freemium)
- [Motion](https://xiry.app/resources/motion): Open-source animation library for React, Vue, and vanilla JavaScript (Website, Freemium)
- [React Bits](https://xiry.app/resources/react-bits): Open-source animated and interactive React UI components and backgrounds (Website, Freemium)
- [21st.dev](https://xiry.app/resources/21st-dev): Curated directory of crafted React, Tailwind, and shadcn UI components. (Website, Freemium)
- [lucide-animated](https://xiry.app/resources/lucide-animated): Open-source animated React icons built with Lucide and Motion (Web app, Open source)

Updated 10 October 2026. Page: https://xiry.app/resources/midday-react-pdf-invoice-template

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.