Automated PDF Generation Made Simple
Templify is a powerful SaaS platform that allows you to create custom HTML templates and generate professional PDFs through a simple API. Perfect for invoices, letters, certificates, and more.
- 🎨 Template Designer: Create beautiful HTML templates with custom CSS styling and assets
- 📝 Code Editor: Built-in Monaco editor for editing HTML and CSS
- ⚡ Real-time Preview: Live PDF preview as you edit your templates
- 🔧 Mustache Variables: Dynamic content using
{{variable}}syntax - ⚙️ PDF Settings: Customize format, orientation, margins, and more
- 🔐 Secure API: JWT authentication and API key-based access
- ☁️ Cloud Storage: S3-compatible storage for template and PDF storage (I'm using R2)
- 📊 Dashboard: Manage templates and track generated PDFs
- 🌙 Dark Mode: Beautiful UI using shadcn components
- Node.js 18+
- PostgreSQL database
- S3-compatible bucket (for file storage)
- SMTP service (for email notifications)
- Clone the repository
git clone https://github.com/pmsoltani/templify.git
cd templify- Install dependencies
# Backend dependencies
cd api
npm install
# Frontend dependencies
cd ../web
npm install- Environment Setup
Create .env files in both api/ and web/ directories:
api/.env
# Database
DATABASE_URL=postgresql://username:password@localhost:5432/templify
# For Render's free tier PostgreSQL:
PGSSLMODE=no-verify
# JWT
JWT_SECRET=your-super-secret-jwt-key
# R2 Storage
R2_ENDPOINT=https://your-r2-endpoint
R2_ACCESS_KEY_ID=your-r2-access-key
R2_SECRET_ACCESS_KEY=your-r2-secret-key
# Email (SMTP)
MAIL_HOST=smtp.gmail.com
MAIL_PORT=587
MAIL_USER=[email protected]
MAIL_PASS=your-app-password
# App Config
FRONTEND_URL=http://localhost:3000
PORT=3001web/.env
NEXT_PUBLIC_API_URL=http://localhost:3001
NEXT_PUBLIC_BASE_URL=http://localhost:3000- Database Setup
cd api
npm run migrate up- Start the Application
# Start the API server (from api/ directory)
npm run dev
# Start the web app (from web/ directory)
npm run devVisit http://localhost:3000 to access the application.
- Sign up for an account at
/register - Create a new template with HTML content
- Add variables using Mustache syntax:
{{customerName}},{{invoiceNumber}} - Upload assets like CSS files, images, or fonts
- Configure PDF settings (format, orientation, margins)
- Preview your template with sample data
// Get your API key from the dashboard
const response = await fetch("/api/templates/{templateId}/generate", {
method: "POST",
headers: {
Authorization: "Bearer YOUR_API_KEY",
"Content-Type": "application/json",
},
body: JSON.stringify({
customerName: "John Doe",
invoiceNumber: "INV-001",
items: [
{ name: "Website Design", price: 1500 },
{ name: "Development", price: 3000 },
],
}),
});
const result = await response.json();
console.log("PDF URL:", result.data.pdf.tempUrl);<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Invoice</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="invoice">
<h1>Invoice #{{invoiceNumber}}</h1>
<p><strong>Bill To:</strong> {{customerName}}</p>
<table class="items">
{{#items}}
<tr>
<td>{{name}}</td>
<td>${{price}}</td>
</tr>
{{/items}}
</table>
<div class="total">
<strong>Total: ${{total}}</strong>
</div>
</div>
</body>
</html>- Framework: Express.js with ES modules
- Database: PostgreSQL with node-pg-migrate
- Authentication: JWT tokens + API keys
- PDF Generation: Puppeteer with Chromium
- Template Engine: Mustache.js
- File Storage: S3-compatible storage (R2)
- Email: Nodemailer
- Validation: Zod schemas
- Framework: Next.js 15 with App Router
- Styling: Tailwind CSS with shadcn components
- Code Editor: Monaco Editor
- State Management: React Context
api/
├── migrations/ # Database migrations
└── src/
├── config/ # Database, S3, Puppeteer, etc setup
├── controllers/ # Request handlers
├── middlewares/ # Auth, validation, error handling
├── repositories/ # Database queries
├── routes/ # API routes
├── schemas/ # Zod validation schemas
├── services/ # Business logic
└── utils/ # Helper functions
web/
├── public/ # Static assets
└── src/
├── app/ # Next.js app router pages
├── components/ # React components
├── contexts/ # React context providers
├── hooks/ # Custom React hooks
├── lib/ # Utilities and configuration
└── utils/ # Helper functions
All contributions are welcome! Feel free to submit issues or pull requests.
This project is licensed under the MIT License - see the LICENSE file for details.
- Mustache.js for template rendering
- Puppeteer for PDF generation
- Monaco Editor for the code editor
- Radix UI for accessible UI components
- Tailwind CSS for styling
⭐ Star this repository if you find it helpful!
For questions or support, please open an issue.