Build once. Fill forever. A privacy-first, browser-based tool for creating reusable document templates and exporting pixel-perfect PDFs — no server, no cloud, no data ever leaves your device.
DocumentMaker is an open-source, local-first SPA that lets you upload any document image, draw input zones on top of it with a drag-and-drop canvas, and generate a dynamic form that exports a high-fidelity PDF — with your data perfectly overlaid.
Use it for government forms, invoices, contracts, certificates, or any repeating paperwork you fill out manually today.
| Feature | Description |
|---|---|
| 🖼️ Visual Template Editor | Drag-and-drop zone mapping powered by Fabric.js v6 |
| 📋 Auto Form Generation | Zones → form fields, instantly, with zero configuration |
| 📄 High-Fidelity PDF Export | Pixel-perfect output via jsPDF + html2canvas |
| 💾 100% Local Storage | All data stored in IndexedDB (Dexie.js) — nothing uploaded |
| 🌐 RTL / LTR i18n | Full Persian & English support with dynamic layout switching |
| 🌙 Dark / Light Theme | System-aware, no flash |
Your documents never leave your browser.
All processing — image rendering, form data, PDF generation, and template storage — happens entirely client-side. There is no backend, no analytics, no third-party data sharing.
| Layer | Technology |
|---|---|
| Framework | React 19, TypeScript 5, Vite 7 |
| Canvas Engine | Fabric.js v6 |
| State | Zustand (UI) + TanStack Query (async) |
| Storage | Dexie.js (IndexedDB) |
| Styling | Tailwind CSS v4, Radix UI, Framer Motion |
| PDF Export | jsPDF, html2canvas, file-saver |
| Routing | React Router v7 |
DocumentMaker follows Clean Architecture and SOLID principles across four strict layers:
src/
├── presentation/ # React components, pages, layouts (UI only)
│ ├── components/ # Radix UI + Tailwind primitives
│ ├── layouts/
│ └── pages/
├── application/ # Hooks, Zustand stores, React Query mutations
│ ├── hooks/
│ ├── services/
│ └── store/ # UI-only state — no async DB logic here
├── core/ # Domain entities, TypeScript interfaces, pure utils
│ ├── types/ # Template, Document, Zone models
│ └── utils/ # CoordinateTransformer, math helpers
└── infrastructure/ # Database config, repository implementations
├── db/
└── repositories/
Key decisions:
- Zustand holds only transient UI state (atomic selectors, no re-render leaks)
- All async/DB operations go through TanStack Query — never directly in components
- Zero "God Components" — each component has a single, well-defined responsibility
Prerequisites: Node.js v20+, pnpm (required — do not use npm/yarn)
# 1. Clone
git clone https://github.com/javadSharifi/DocumentMaker.git
cd DocumentMaker
# 2. Install
pnpm install
# 3. Develop
pnpm dev
# 4. Build for production
pnpm buildDocumentMaker is a pure CSR SPA. Deploy to any static host.
| Setting | Value |
|---|---|
| Build Command | pnpm run build |
| Output Directory | dist |
| SPA Redirect | Included via public/_redirects (Netlify-compatible) |
Clean URLs work out of the box — no hash routing required.
Contributions are welcome. Please respect the architectural boundaries:
- No async/DB logic inside Zustand stores
- No business logic inside presentation components
- No "God Hooks" that mix multiple concerns
MIT © javadSharifi