htmldocs editor 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: Invoice template with htmldocs 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
    }
  ]}
/>

Automatic Installation

Use the CLI tool to quickly set up htmldocs in your project with minimal configuration.

Manual Installation

Integrate htmldocs step-by-step into your existing TypeScript project.

​
Components

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

Document

The root wrapper component representing a document.

Page

A single page within a document.

Head

Add custom content to the top of your document pages.

Spacer

Add vertical space between document pages.

MarginBox

Position content in the margins of printed pages.

Footer

Add page numbers and custom footers to your documents.