If you like htmldocs, please consider giving it a star onGitHub

htmldocs is a React library for
building and generating documents

Create dynamic invoices, reports, and contracts using modern web technologies. Design once with JSX, then generate thousands of PDFs just by passing props.

Invoice
INV_NAJWNAD8

Issued

Jul 24, 2025

Due

Jul 31, 2025

Billed To

Cookie Monster

123 Sesame Street

New York, NY 10036

123-1234-1234

From

Ridegeek

123 Pedalgear Ave

San Francisco, CA 94210

ItemQtyPriceLine total
Chocolate chip cookieReally yummy!
1$4.50$4.50
White macadamia cookieA bit more unique
2$4.50$9.00
Subtotal$13.50
Tax (12%)$1.62
Total$15.12
Amount due$15.12
1function Invoice({ customer, items }) {
2  const invoiceId = generateId()
3  const issueDate = formatDate(new Date())
4
5  // 7 days from now
6  const dueDate = formatDate(Date.now() + 7 * 24 * 60 * 60 * 1000)
7
8  return (
9    <Document size="A4" orientation="portrait" margin="0.5in">
10      <Page>
11        <div className="flex flex-col h-full space-y-3">
12          <div className="flex items-center justify-between">
13            <div className="flex flex-col">
14              <div className="text-black text-lg font-semibold leading-tight">
15                Invoice
16              </div>
17              <div className="text-gray-500 text-[10px]">
18                {invoiceId}
19              </div>
20            </div>
21            <img src="logo.svg" />
22          </div>
23
24          <Header
25            issueDate={issueDate}
26            dueDate={dueDate}
27            customer={customer}
28          />
29
30          <ItemsTable items={items} />
31
32          <div className="h-full flex-1"></div>
33
34          <Footer />
35        </div>
36      </Page>
37    </Document>
38  )
39}
40