DEV Community

Shahzaib
Shahzaib

Posted on

How I Shipped 2 New Features Without a Backend: PDF to PNG + Flatten PDF

#webdev #tutorial #javascript #pdf

Series: Building PdfWord — a free, no-backend PDF tools site (Part 4)

Last week I cut my homepage from 4.8MB to ~70KB and made my PWA open instantly (Part 2). This week I shipped two brand-new tools — taking the site from 27 to 29 free tools — still with zero backend, zero database, and zero server bills.

The tools: PDF to PNG (lossless page images) and Flatten PDF (lock form fields permanently).

Here's exactly how they work in the browser.

1. PDF to PNG: pdf.js + canvas + JSZip

The trick is the same one I used for PDF to JPG: render each page to a <canvas> with pdf.js, then canvas.toBlob() — but with the image/png MIME type instead of image/jpeg:

const page = await pdf.getPage(i);
const viewport = page.getViewport({ scale: 2 }); // 2x for crisp text
const canvas = document.createElement('canvas');
canvas.width = viewport.width; canvas.height = viewport.height;
await page.render({ canvasContext: canvas.getContext('2d'), viewport }).promise;
const blob = await new Promise(res => canvas.toBlob(res, 'image/png'));
zip.file(name + '-page-' + i + '.png', blob);
Enter fullscreen mode Exit fullscreen mode

Everything runs on the main thread (canvas needs the DOM), with a progress bar per page and page.cleanup() to free memory between pages — important for 100+ page PDFs on phones.

Why PNG and not just JPG? PNG is lossless. For text documents, screenshots, and graphics, JPG's compression artifacts make text fuzzy. Users kept asking — so now they have both.

2. Flatten PDF: pdf-lib's form.flatten()

This one's a one-liner with pdf-lib:

const { PDFDocument } = window.PDFLib;
const pdf = await PDFDocument.load(buffer);
try {
  const form = pdf.getForm();
  form.flatten(); // burns every field into the page
} catch (e) { /* no form fields — still saves a clean copy */ }
const out = await pdf.save();
Enter fullscreen mode Exit fullscreen mode

Flattening is the thing lawyers and HR departments do before emailing contracts: the filled values stay visible but can never be edited or cleared. Before this, my users had to print-to-PDF and lose quality. Now it's one click, in the browser.

The whole tool is ~25 lines of JS. The page, SEO copy, and FAQ took longer than the code.

The playbook so far (all free, all client-side)

  1. Ship real tools that solve one problem well
  2. Give every tool its own page: SEO title, how-to steps, FAQ with JSON-LD schema
  3. Add it to the homepage grid + sitemap, ping IndexNow
  4. Write about it here on dev.to — the articles are my #1 traffic source after directories

Try them: PDF to PNG · Flatten PDF — no signup, no watermark, files never leave your browser.

What tool should I build next? Drop a comment — I read every one.

Top comments (0)