🚀 Active Development: htmldocs is under continuous improvement with frequent updates and performance optimizations. Recent release achieved 8-12x faster hot reload!
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.
This package is in active development with a focus on:
- ⚡ Performance optimization (recent: 8-12x faster hot reload)
- 🐛 Bug fixes and stability improvements
- ✨ New features based on community feedback
- 📦 Regular NPM releases
Latest (v0.4.9): Incremental build optimization, 3-layer caching, 2-4s hot reload
htmldocs is a local document editor and preview server to help you create PDFs with React. It provides all the structural benefits of LaTeX with the familiarity of HTML and CSS. With htmldocs, you can use JSX to build document templates (invoices, reports, contracts, etc.) and generate PDFs just by passing data as props. htmldocs has:
- 📌 Support for the latest CSS features like margin boxes and flexbox
- 🧩 A collection of unstyled components to help you layout your documents
- 📄 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
htmldocs is actively maintained with a focus on:
- ⚡ Performance optimization - 8-12x faster hot reload in latest release
- 🐛 Bug fixes and stability improvements - Regular updates based on user feedback
- ✨ New features - Continuous improvement based on community feedback
- 📦 Regular NPM releases - Frequent updates with latest features and fixes
To see the full power of htmldocs, here is how you might build a dynamic invoice document template with JSX template variables:
To change the customer details, all you need to do is render the Invoice component with different props:
<Invoice
customer={{
name: "John Doe",
address: "456 Main St",
city: "Anytown",
state: "CA",
zip: "12345",
phone: "123-456-7890",
}}
items={items}
/>
To create your first htmldocs project, run the following command:
npx htmldocs-v2@latest initFor further instructions or to integrate htmldocs into your existing project, refer to the Getting Started guide.
htmldocs comes with a standard set of components to help you layout and style your documents.
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.
Lightning-fast development workflow:
- First document load: ~32s (builds context)
- Edit and see changes: 2-4s ⚡
- 10 edits: ~1 minute (vs 5+ minutes in other tools)
Smart caching across:
- ✅ esbuild incremental builds
- ✅ React component rendering
- ✅ Tailwind CSS generation
htmldocs provides a modern development experience with hot reload that's 8-12x faster than traditional approaches. Work on your documents with near-instant feedback.
 |
 |
 |
 |
|---|---|---|---|
| Next.js | TypeScript | Turborepo | pnpm |
MIT License