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 React, TypeScript, and Tailwind.

​

Key Features

• 📌 Support for the latest CSS features like margin boxes and flexbox
• 🧩 Collection of unstyled components for document layout
• 📄 JSX templating system for building dynamic documents
• 🔗 Full TypeScript support for type safety
• ⚡ Dynamic data integration through props and APIs
• 📊 Real-time preview server with hot reloading

​

Example

To see htmldocs in action, here’s a simple example of a dynamic invoice template:

Creating multiple invoices is as simple as passing different customer information through props. Here’s how you can generate a new invoice by updating the customer details:

<Invoice 
  customer={{
    name: "John Doe",
    address: "456 Main St",
    city: "Anytown",
    state: "CA",
    zip: "12345",
    phone: "123-456-7890",
  }}
  items={[
    {
      name: "Website Development",
      description: "Frontend implementation with React",
      price: 2000.00,
      quantity: 1
    },
    {
      name: "UI/UX Design",
      description: "Custom design system creation",
      price: 1500.00,
      quantity: 1
    }
  ]}
/>

​

Components

htmldocs comes with a set of standardized components that makes it easy to build documents.