Forem: PetrDev

I shipped a website-to-PDF SaaS on WordPress — here's the stack

PetrDev — Tue, 05 May 2026 09:09:28 +0000

Last month I launched Site2PDF — converts any website to PDF, PNG, JPG or ZIP. Here's the entire tech stack, because the choices might be useful if you're building something similar.

What it does

Paste a URL → get a PDF of the whole page (or the whole site). Free plan gives 5 archives/month, all formats, cookie banner removal. Paid starts at $9/mo for 15 archives and 200 pages per site.

The stack

Frontend: a custom WordPress theme. Yes, WordPress. Hear me out.

Native user accounts, sessions, roles
Native admin panel for analytics and user management
Customizer for site branding
Gutenberg-free, just PHP templates + SCSS + vanilla JS

Rendering: Node.js + Puppeteer running on the same VPS, called from PHP via proc_open. A bash-like pattern:

$command = sprintf(
    '%s %s %s %s --options-file %s',
    escapeshellarg($node_path),
    escapeshellarg($script),
    escapeshellarg($url),
    escapeshellarg($output),
    escapeshellarg($options_json)
);
exec($command . ' 2>&1', $output, $code);

PHP passes options (cookie hide, selectors to expand, etc.) as a temp JSON file the Node script reads.

PDF assembly: pdf-lib for multi-page PDFs (each page becomes its own PDF page). DOMPDF for single-page fallback.

Image processing: sharp for PNG→JPG conversion. archiver for ZIP.

Billing: Paddle Billing (started with Stripe, had to migrate — Stripe doesn't support my country). Paddle handles tax, EU VAT, Canadian GST etc. — a huge win for a solo founder.

Auth: Google OAuth 2.0 without any plugin. A REST API endpoint redirects to Google, callback sets a one-time login token, cookie is set on the next regular page load. Why? Because iOS Safari blocks cookies set during REST API redirects (ITP).

Infra: Contabo VPS ($5/mo). Nginx, PHP-FPM, MariaDB. Chrome installed as google-chrome-stable, Puppeteer launches it with executablePath override.

Why WordPress (not Next.js or Rails)

The honest answer: I've shipped WP for 10 years. Familiar tools win. The theme is under 4000 lines of PHP, ~2000 lines of SCSS. I didn't need a full framework for ~5 pages and a wizard UI.

WordPress also gives me:

Zero-effort admin for users, plans, payment history
Free page hierarchy (/pdf-tools/full-page-screenshot/)
Built-in Yoast SEO and Site Icon features

The hot take: WordPress is a perfectly fine backend for a simple SaaS if you disable the bloat and write real code. Most of the "WordPress is slow" complaints come from bloated themes and 40 plugins.

Things that bit me

Puppeteer fullPage + fixed headers — writeup in my other post
Cookie banners blocking the screenshot — had to intercept requests to policy.cookiereports.com before page load
iOS Safari OAuth — first attempt set the auth cookie inside the callback redirect. Safari's ITP killed it. Had to use one-time tokens + set cookie on a regular page navigation.
iCloud Private Relay breaking CSRF state — used IP hash as the state key, which broke when Apple rotates IPs between redirects. Switched to state-as-key.
Paddle sandbox vs production — separate accounts, separate keys, separate price IDs. Wrote a helper that picks the right IDs based on WEBTOOLS_PADDLE_ENV constant.

The architecture in one diagram

Browser (vanilla JS)
  → AJAX → PHP (screenshot-tools.php)
          → proc_open → Node worker (Puppeteer)
          → writes PNG to /uploads/screenshot-temp/
          → PHP assembles PDF/ZIP if needed
          → returns base64 or job ID
  ← polls status / downloads blob

Full-site mode uses a different flow (background worker + status polling). Single-page mode is one synchronous AJAX call.

What's next

Real API (the pricing page still says "API — Soon")
Subscription cancel button in-app (currently "email us")
Blog with the 2-3 dev.to posts ported over for SEO

Try it

site2pdf.online. Free plan doesn't need signup. If you try it and something breaks, the Contact form works.

Happy to answer any questions about the stack in the comments.

Cleaning up web pages for screenshots — a practical Puppeteer guide

PetrDev — Wed, 29 Apr 2026 10:42:41 +0000

If you've ever taken a screenshot of a real-world webpage with Puppeteer, you've seen the ugly truth: cookie banners, sticky headers frozen at weird positions, collapsed FAQ accordions, and "Subscribe!" popups.

Here are four small Puppeteer helpers I use to get clean, presentable screenshots. Each is one function, drop-in ready.

1. Kill cookie banners

async function hideCookieBanners(page, customSelectors = []) {
    await page.evaluate((selectors) => {
        // Known cookie-banner elements
        ['CookieReportsPanel', 'CookieReportsOverlay', 'CookieReportsBannerAZ']
            .forEach(id => document.getElementById(id)?.remove());

        document.querySelectorAll('[class*="wscr"],[id*="CookieReport"]')
            .forEach(el => el.remove());

        // Reset body scroll locks the banner often sets
        document.body.style.overflow = '';
        document.documentElement.style.overflow = '';

        // User-defined selectors (if they know their site)
        selectors.forEach(sel => {
            try {
                document.querySelectorAll(sel).forEach(el => {
                    el.style.setProperty('display', 'none', 'important');
                });
            } catch {}
        });
    }, customSelectors);
}

2. Hide arbitrary elements

async function hideElements(page, selectors) {
    if (!selectors.length) return;
    await page.evaluate(sels => {
        sels.forEach(sel => {
            try {
                document.querySelectorAll(sel).forEach(el => {
                    el.style.setProperty('display', 'none', 'important');
                });
            } catch {}
        });
    }, selectors);
}

Example: hide chat widgets, "cookies" bars, floating "Get started" buttons:

await hideElements(page, [
    '#intercom-container',
    '.crisp-client',
    '[class*="newsletter-popup"]'
]);

3. Unfix sticky headers

Sticky headers repeat on every "screen" of a fullPage screenshot — ugly. Convert them to position: relative:

async function unfixSticky(page, selectors) {
    await page.evaluate(sels => {
        sels.forEach(sel => {
            try {
                document.querySelectorAll(sel).forEach(el => {
                    el.style.setProperty('position', 'relative', 'important');
                    ['top', 'bottom', 'left', 'right', 'z-index']
                        .forEach(p => el.style.setProperty(p, 'auto', 'important'));
                    el.style.setProperty('width', '100%', 'important');
                });
            } catch {}
        });
    }, selectors);
}

4. Expand FAQs / accordions

Most FAQs use classes like _active or attributes like open. Give the function a CSS selector + action + value:

async function expandAccordions(page, pairs) {
    if (!pairs.length) return;
    await page.evaluate(rules => {
        rules.forEach(({ selector, action, value }) => {
            try {
                document.querySelectorAll(selector).forEach(el => {
                    if (action === 'class') {
                        el.classList.add(value || '_active');
                        // Also unhide next sibling (common FAQ pattern)
                        const next = el.nextElementSibling;
                        if (next) {
                            next.style.display = 'block';
                            next.style.maxHeight = 'none';
                            next.removeAttribute('hidden');
                        }
                    } else if (action === 'attribute') {
                        const [name, val = ''] = value.split('=');
                        el.setAttribute(name, val);
                    } else if (action === 'style') {
                        value.split(';').forEach(rule => {
                            const [p, v] = rule.split(':');
                            if (p && v) {
                                el.style.setProperty(p.trim(), v.trim(), 'important');
                            }
                        });
                    }
                });
            } catch {}
        });
    }, pairs);

    // Wait for CSS transitions
    await new Promise(r => setTimeout(r, 400));
}

Example usage:

await expandAccordions(page, [
    { selector: '.faq__question', action: 'class', value: '_active' },
    { selector: 'details', action: 'attribute', value: 'open=true' },
    { selector: '.accordion-body', action: 'style', value: 'display: block' }
]);

Putting it together

await page.goto(url, { waitUntil: 'domcontentloaded' });
await hideCookieBanners(page);
await hideElements(page, ['.chat-widget']);
await unfixSticky(page, ['.sticky-nav']);
await expandAccordions(page, [{ selector: '.faq__q', action: 'class', value: '_open' }]);
await page.screenshot({ path: 'clean.png', fullPage: true });

Where I use this

All four helpers ship in production on Site2PDF — a website-to-PDF tool I'm building. Users paste a URL, tick what to hide/expand, and get a clean archive.

If you're doing any kind of web scraping or automated screenshots, grab these — they'll save you a weekend of CSS archaeology.

Why your fixed header disappears in Puppeteer fullPage screenshots (and how to fix it)

PetrDev — Thu, 23 Apr 2026 15:54:52 +0000

I spent two evenings debugging this. Sharing so you don't have to.

The problem

When you call page.screenshot({ fullPage: true }) on a site with a position: fixed header, one of three things usually happens:

The header renders in the middle of the page (not at the top)
The header area is blank at the top of the PDF/PNG
Only the first page shows the header — subsequent "pages" don't

You open the site in a real browser: looks perfect. You open it in Puppeteer's viewport mode: also fine. Only fullPage: true breaks it.

Why this happens

Puppeteer's fullPage: true uses Chrome DevTools Protocol's captureBeyondViewport. Under the hood, Chrome rasterizes the whole document beyond the viewport — but position: fixed elements are painted relative to the current viewport, not the document. So if your script scrolled to the bottom of the page before taking the screenshot, the fixed header is captured at the bottom.

There's also a second issue: many sites have scroll-behavior: smooth on html. When you call window.scrollTo(0, 0), the scroll is animated and doesn't complete instantly. If Puppeteer captures before the animation finishes, header ends up in a weird intermediate position.

The fix

Three things need to happen before the screenshot:

Kill smooth scrolling so scrollTo is instant
Reset any hide-on-scroll transforms that JS scroll handlers may have applied
Actually scroll to (0, 0) and wait a tick for paint

Here's the code I use in production:

async function prepareForScreenshot(page) {
    await page.evaluate(() => {
        // Disable smooth scrolling — make scrollTo instant
        const style = document.createElement('style');
        style.textContent = 'html { scroll-behavior: auto !important; }';
        document.head.appendChild(style);

        // Reset hide-on-scroll state on common header selectors
        const headers = document.querySelectorAll(
            'header, .header, [class*="header" i], nav[class*="header" i]'
        );
        headers.forEach(el => {
            const cs = window.getComputedStyle(el);
            if (cs.position === 'fixed' || cs.position === 'sticky') {
                el.style.setProperty('transform', 'none', 'important');
                el.style.setProperty('opacity', '1', 'important');
                el.style.setProperty('visibility', 'visible', 'important');
                if (cs.display === 'none') {
                    el.style.setProperty('display', 'flex', 'important');
                }
                // Remove common "hidden on scroll down" classes
                ['hidden', 'is-hidden', 'scroll-up', 'scroll-down', 'header--hidden']
                    .forEach(c => el.classList.remove(c));
            }
        });

        // Scroll to top — now instant
        window.scrollTo(0, 0);
    });

    // Give the browser one paint frame to settle
    await new Promise(r => setTimeout(r, 300));
}

Call it right before page.screenshot:

await prepareForScreenshot(page);
await page.screenshot({ path: 'out.png', fullPage: true });

When the simple fix isn't enough

If the site has a transparent header overlaid on a hero (common modern pattern), the above works great — the header just renders on top of the hero like in a browser.

If the site has a hide-on-scroll JS library that listens to scroll events after your reset, you may need to dispatch a synthetic scroll event to let it re-evaluate:

window.scrollTo(0, 0);
window.dispatchEvent(new Event('scroll'));

What I'm building

I'm working on Site2PDF — a tool that converts any website to PDF, PNG, JPG or ZIP. This exact fix is running in production there. If you want to try it, the free plan is 5 archives/month with all formats and advanced options (cookie banner removal, sticky header unfix, accordion expansion).

Feedback welcome!