Building a Free Recipe Card Generator That Beats Canva's $12/mo Paywall

Published on Dev.to · Client-side only · No backend required

---

Tired of Canva charging $12/month just to download a PDF? I built a free,
private, offline recipe card generator that runs entirely in your browser.

No account. No subscription. No data leaves your device.

Try it: https://tools.jackgreen.top/recipe-card-generator/

The Problem

Canva is great — until you hit the paywall. Want to export your recipe card as
a PDF? That's a Pro feature. Want to use certain templates? Pro. Want to remove
the Canva watermark? Pro. Before long you're paying $12/month for a tool that
does one thing: make a PDF.

The Solution

A single HTML page. One JavaScript file. jsPDF loaded from CDN. The entire
app runs client-side — no server, no database, no analytics.

Your recipe data never touches a server. It stays in your browser memory until
you click "Generate PDF." Then jsPDF creates the PDF locally and triggers a
download. Done.

How It Works

Tech Stack (or lack thereof)

• HTML/CSS — dark-mode aware, responsive, no framework
• jsPDF (CDN) — client-side PDF generation, no backend needed
• Python http.server — static file serving for local/dev use
• Zero npm dependencies — no build step, no node_modules

Core Features

1. Recipe card fields: dish name, servings, prep/cook time, category
2. Ingredient list: dynamic add/remove rows
3. Step-by-step instructions: numbered, add/remove
4. Notes section: optional tips and variations
5. Two templates: Modern (bold header bar) and Classic (centered title)
6. Watermark: subtle "Generated by Recipe Card Generator" footer
7. Input validation: required fields highlighted in red

Why This Matters

• Privacy: Your family recipes never leave your device
• Offline: Works on a plane, in the countryside, anywhere
• Cost: $0 vs $144/year for Canva Pro
• Simplicity: Two templates, not 200 distracting options

The Code

The whole app is about 300 lines of JavaScript. Here's the core PDF generation:

function generatePDF(data) {
  var jsPDF = window.jspdf.jsPDF;
  var doc = new jsPDF({ unit: 'mm', format: 'a4' });
  // ... draw recipe card ...
  return doc.output('blob');
}

That's it. jsPDF handles everything — fonts, layouts, multi-page if needed,
the watermark footer on every page.

Deployment

Static file server (Python), nginx proxy, systemd service. Deployed to
jackgreen.top via rsync. No CI/CD, no Docker, no Kubernetes. A bin/deploy-to-vps
script and we're live.

Result

tools.jackgreen.top/recipe-card-generator/ — free, private, offline, forever.

No upsells. No "upgrade to Pro." Just a tool that does one thing well.

Tags: javascript, webdev, showdev