Introduction

htmldocs is a modern typesetting toolkit that lets you build document templates using React and JSX - the same way you build web applications. Create reusable components, use props for dynamic content, and leverage the entire JavaScript ecosystem:

function Invoice({ customer, items, total }) {
  return (
    <Document size="A4" orientation="portrait" margin="0.75in">
      <Footer position="bottom-center">
        Page {currentPage}
      </Footer>

      <Page style={{ padding: '1rem' }}>
        <h1>Invoice for {customer.name}</h1>
        {items.map(item => (
          <LineItem {...item} />
        ))}
        <Total amount={total} />
      </Page>
    </Document>
  );
}

With htmldocs, you can:

• Build document templates using React components and JSX syntax
• Use your favorite JavaScript libraries - from date formatting to charting
• Style documents with modern CSS and frameworks like Tailwind
• Generate professional-quality PDFs at scale with precise typesetting
• Preview changes in real-time with hot-reloading as you develop
• Share components and styles across your documents for consistent branding
• Version control your templates just like you do with code

​

Components

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