A powerful and intuitive web-based certificate generator that allows you to create professional certificates in bulk. Upload your certificate template, define text areas for names and other content, customize typography, and generate certificates for multiple recipients at once.
- Template Upload: Support for PNG, JPEG, and JPG certificate templates up to 10MB
- Interactive Text Areas: Click and drag to define areas where text will be placed
- Rich Typography Controls:
- 30+ Google Fonts + custom font upload support
- Font size, color, alignment, and styling options
- Text effects: bold, italic, underline, shadows
- Letter spacing and line height adjustments
- Batch Generation: Process multiple names from manual input or CSV import
- Real-time Preview: See exactly how your certificates will look
- Zoom & Grid: Precision editing with zoom controls and optional grid overlay
- Bulk Download: Generate all certificates as a ZIP file
- Responsive Design: Works on desktop and mobile devices
- Activity Logs: Track your progress with detailed logging
- Node.js 18+
- npm, yarn, or pnpm
-
Clone the repository ```bash git clone cd certificate-generator ```
-
Install dependencies ```bash npm install
yarn install
pnpm install ```
-
Run the development server ```bash npm run dev
yarn dev
pnpm dev ```
-
Open your browser Navigate to http://localhost:3000
- Upload Template: Click "Upload Template" and select your certificate template image
- Define Text Areas: Click "Add Text Area" and drag on the canvas to define where names/text should appear
- Customize Typography: Use the Style tab to adjust fonts, colors, sizes, and effects
- Add Recipients: Input names manually or upload a CSV file with recipient names
- Preview: Use the preview name to see how certificates will look
- Generate: Click "Generate All Certificates" to create and download a ZIP file
For bulk name import, use a CSV file with names in the first column: ```csv John Doe Jane Smith Bob Johnson ```
- Built-in: 30+ Google Fonts including Roboto, Open Sans, Montserrat, and more
- Custom Fonts: Upload your own .ttf, .otf, .woff, or .woff2 files (max 5MB)
- Framework: Next.js 15 with React 19
- Styling: Tailwind CSS with custom components
- UI Components: Radix UI primitives
- File Processing: JSZip for bulk downloads
- Canvas: HTML5 Canvas for certificate generation
- Typography: Google Fonts API + custom font loading
``` ├── app/ │ ├── layout.tsx # Root layout with metadata │ ├── page.tsx # Main certificate generator component │ └── globals.css # Global styles ├── components/ │ ├── ui/ # Reusable UI components │ └── log-viewer.tsx # Activity log component ├── lib/ │ └── utils.ts # Utility functions └── public/ # Static assets ```
No environment variables are required for basic functionality. The app works out of the box.
- Fonts: Modify the
GOOGLE_FONTSarray inapp/page.tsxto add/remove available fonts - Styling: Customize colors and themes in
tailwind.config.ts - File Limits: Adjust file size limits in the upload handlers
The application is fully responsive and works on mobile devices, though the desktop experience is optimized for the best user experience when working with detailed certificate layouts.
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is open source and available under the MIT License.
If you encounter any issues or have questions:
- Check the activity logs in the app for error details
- Open an issue on GitHub with:
- Steps to reproduce the problem
- Browser and OS information
- Screenshots if applicable
- Multiple text areas per certificate
- Advanced text formatting (gradients, outlines)
- Template library with pre-built designs
- QR code integration
- Database integration for recipient management
- API endpoints for programmatic access
Happy certificate generating! 🎓✨
