htmldocs

Introduction

PDF document creation is stuck in the past - from clunky Word docs to complex LaTeX to outdated tools. htmldocs brings document generation into 2025 with a modern developer experience using the tools you already love: React, TypeScript, and Tailwind.

Why

htmldocs is a modern toolkit for building documents with the web:

• Styling: Use modern CSS properties to create visually stunning documents with web-like flexibility.

• Structure: Create clean layouts using HTML's powerful tools like flexbox, grid, and tables.

• External Libraries: Seamlessly integrate web libraries like FontAwesome, Bootstrap, and KaTeX

• Dynamic Templates: Leverage JSX to create reusable document templates with dynamic content:

  function Invoice({ customer, items, total }) {
    return (
      <Document>
        <Page>
          <h1>Invoice for {customer.name}</h1>
          {items.map(item => (
            <LineItem {...item} />
          ))}
          <Total amount={total} />
        </Page>
      </Document>
    );
  }
  

• Data-Driven Documents: Generate documents programmatically by passing data through props or fetching from APIs. Perfect for invoices, contracts, and reports that need dynamic content.

• Version Control: Track document changes using Git and other version control systems

• Consistency: Maintain uniform document styling across your organization through shared stylesheets.

Install

To create your first htmldocs project, run the following command:

npx htmldocs@latest init

For further instructions or to integrate htmldocs into your existing project, refer to the Getting Started guide.

Getting Started

Create your first document with htmldocs:

import { Document, Page } from "@htmldocs/react";

export default function MyDocument() {
  return (
    <Document size="A4" orientation="portrait" margin="0.5in">
        <Page style={{ backgroundColor: "#000", color: "#fff" }}>
            <h1>Hello from the dark side</h1>
        </Page>
    </Document>
  );
}

Components

htmldocs comes with a standard set of components to help you layout and style your documents.

• Document
• Head
• Page
• Footer
• MarginBox
• Spacer

How it works

htmldocs is a modern toolkit for building documents with web technologies. It automatically handles the layout and chunking of your document into pages, templating variables using JSX, and hot-reloading your document.

htmldocs is built upon Chromium's rendering engine, which means it can render any HTML, CSS, and JavaScript. This is different from other tools like wkhtmltopdf, WeasyPrint, and Prince, which only support a subset of HTML and CSS.

htmldocs also uses the Paged.js library under the hood. Paged.js is used for layout and chunking, as well as more modern features like margin boxes that aren't fully supported by the W3C's CSS standard.

Tech Stack

Next.js	TypeScript	Turborepo	pnpm

Contributing

We welcome contributions! Please see our Contributing Guide for details.

License

MIT License