A modern, high-performance web platform for generating personalized certificates from custom or built-in templates and Excel / CSV data, with automated bulk email delivery via SMTP.
- Interactive Certificate Canvas — Upload your own PNG/JPG/WebP certificate template or click Use VG Luxury Certificate Template to generate a high-res certificate on the fly.
- Excel & CSV Data Import — Automatically extracts all columns and turns them into draggable fields; supports
.xlsx,.xls, and.csv. - Instant Sample Data — Load sample recipients and standard columns to test your template layout with a single click.
- Dynamic Recipient Stepper — Page through recipients with
❮and❯buttons on the live canvas to review each person's exact certificate before distribution. - Rich Typography & Styling — 20+ curated fonts (Handwriting, Elegant Serif, Classic, Sans-Serif, Monospace), font size, custom color, bold/italic, text transforms, and configurable drop shadows.
- Per-Row Fine-Tuning — Customize position or typography for specific recipients with long names without affecting others.
- High-Res Export (ZIP & PNG) — Download individual certificate previews or bulk generate and compress all certificates into a ZIP file with live progress tracking.
- Automated SMTP Bulk Email Delivery — Send personalized emails with high-res certificate attachments via Gmail, Outlook, Yahoo, or custom SMTP servers.
- Rich Email Composer — Supports custom HTML,
{{variable}}substitution (e.g.{{firstName}},{{course}},{{cert_id}}), clickable links, and reusable email templates. - SMTP Provider Presets — Fast 1-click configuration for Gmail, Outlook 365, and Yahoo Mail.
- Node.js (v16 or higher)
- npm
# Install dependencies
npm install
# Start the server
npm startThen open http://localhost:3001 in your web browser.
- Drag & drop your certificate background image onto the drop zone, OR
- Click Use VG Luxury Certificate Template to generate a built-in luxury certificate template.
- Upload your
.xlsx,.xls, or.csvfile in the sidebar, OR - Click Load Sample Recipient Data for an instant dataset.
Supported Standard Columns:
| Column | Description |
|---|---|
name |
Recipient's full name |
email |
Recipient's email address for distribution |
course / title |
Program or achievement name |
date / cert_id |
Custom metadata fields |
- Drag any column chip onto the certificate canvas.
- Click a placed field to select it and drag it into position.
- Customize font family, size, color, alignments, and text shadows in the Typography panel.
- Use the ❮ and ❯ stepper buttons in the recipient bar to flip through all recipients and verify styling.
- Download Current Certificate: Download a PNG preview of the active recipient.
- Download All as ZIP: Compresses all generated certificates into a single
.ziparchive. - Distribute Certificates by Email: Connect your SMTP server and send certificates directly to recipient inboxes.
VG Certificate Distributor sends emails directly through your own SMTP mail server or email provider. Credentials are stored securely in your browser (localStorage) and used locally by your Node.js backend to dispatch emails.
To open the configuration dialog, click the "SMTP Config" button in the sidebar.
Google requires an App Password (your regular Gmail password will not work if 2-Step Verification is active):
- Go to your Google Account Security page.
- Under "How you sign in to Google", ensure 2-Step Verification is turned ON.
- Search for or navigate to App Passwords.
- Name the app password (e.g.,
VG Certificate Mailer) and click Create. - Copy the generated 16-character code (e.g.
abcd efgh ijkl mnop). - In VG Certificate Distributor, click the Gmail preset button and enter:
- SMTP Host:
smtp.gmail.com - Port:
587 - Username / Email: Your full Gmail address (
you@gmail.comor custom Workspace email) - Password / App Password: The 16-character App Password (spaces can be omitted)
- From Name:
VG Certificate Authority(or your preferred sender name)
- SMTP Host:
- Click the Outlook preset button.
- Enter the following parameters:
- SMTP Host:
smtp.office365.com(orsmtp-mail.outlook.comfor personal Outlook/Hotmail) - Port:
587 - Username / Email: Your full Microsoft 365 / Outlook email address
- Password: Your account password (or Microsoft App Password if 2FA/MFA is enabled on your organization)
- From Name: Your organization or team name
- SMTP Host:
- Go to Yahoo Account Security > Generate App Password.
- Click the Yahoo preset in the app and fill in:
- SMTP Host:
smtp.mail.yahoo.com - Port:
587(or465) - Username / Email: Your Yahoo email address
- Password: The generated Yahoo App Password
- SMTP Host:
- In Zoho Mail, go to Settings > Mail Accounts > Security and generate an App Password.
- Select Custom in the SMTP modal and enter:
- SMTP Host:
smtppro.zoho.com(orsmtp.zoho.comfor personal) - Port:
587(STARTTLS) or465(SSL) - Username / Email: Your Zoho email address
- Password: Your Zoho App Password
- SMTP Host:
- SendGrid: Host
smtp.sendgrid.net, Port587, Userapikey, Password<Your API Key> - Amazon SES: Host
email-smtp.<region>.amazonaws.com, Port587, User<SES SMTP Username>, Password<SES SMTP Password> - Brevo (Sendinblue): Host
smtp-relay.brevo.com, Port587, User<Account Email>, Password<SMTP Key>
Before sending bulk emails to recipients:
- Click the "Test Connection" button in the SMTP modal.
- The server will attempt an authentication handshake (
transporter.verify()). - If successful, you will see a green checkmark:
SMTP connection verified successfully. - Click "Save Settings" to store your configuration.
Click "Compose Email" to tailor the message sent to each recipient:
- Subject Line: Supports dynamic tags like
Congratulations, {{firstName}}!orYour {{course}} Certificate — {{name}}. - Available Variables: Every column in your uploaded Excel file is automatically converted into a variable (e.g.
{{name}},{{email}},{{course}},{{cert_id}},{{date}}). {{firstName}}: Automatically extracted from the recipient's full name.- Rich Text & Formatting: Use the built-in toolbar for Bold, Italic, Underline, and Links.
- Save Template: Click "Save Template" to store customized email bodies in
localStoragefor future batches.
- Ensure your template is loaded and fields are placed on the canvas.
- Ensure recipient data is loaded in the preview table.
- Click "Distribute Certificates by Email".
- Confirm the recipient count and dispatch summary.
- Watch the live progress bar and status log showing per-recipient success/failure confirmations.
| Issue / Error | Cause | Resolution |
|---|---|---|
535 5.7.8 Authentication credentials invalid |
Using primary password instead of App Password on 2FA-enabled accounts | Generate a dedicated App Password in your Google/Microsoft/Yahoo security settings. |
connect ECONNREFUSED or ETIMEDOUT |
Port blocked or wrong host entered | Verify SMTP host spelling and use Port 587 (or 465). Ensure local firewall isn't blocking outbound SMTP. |
Self-signed certificate in certificate chain |
Custom mail server TLS requirement | The backend has rejectUnauthorized: false enabled by default for maximum compatibility. |
Missing required fields |
One or more SMTP fields left blank | Ensure Host, Port, Username, and Password are all filled in before testing. |
Backend offline / Failed to fetch |
Node server not running | Ensure you ran npm start in the terminal and http://localhost:3001 is reachable. |
├── css/
│ └── style.css # Complete dark-mode responsive design system
├── js/
│ └── app.js # Core canvas renderer, Excel parser, & distributor
├── index.html # Main application interface
├── server.js # Express API for SMTP verification and email sending
├── package.json # Node dependencies & project metadata
└── README.md # Documentation & guides
MIT License