DEV Community: Ahmad Faraz

How to Replace a Page in a PDF Programmatically with pdf-lib (No Backend Required)

Ahmad Faraz — Thu, 04 Jun 2026 09:01:30 +0000

A lawyer friend messaged me at 11 PM last week. He'd sent a 47-page contract to a client. Client signed it, sent it back. Everything looked good until my friend noticed page 12 had a typo in the payment terms — the kind of typo that, if a court ever looked at it, could mean the client owed nothing.

"Do I have to make him resign the whole thing? It took us three weeks to get this signed."

Technically no. You just replace page 12 of the signed PDF. The signatures on the other pages stay intact. Five seconds of pdf-lib code.

This post is the technical writeup. By the end you'll have working browser-side JavaScript that replaces any single page in a PDF with a page from another PDF, no server roundtrip, no system dependencies, no Ghostscript install. Plus the gotchas that aren't obvious until you ship and someone reports a bug.

If you just want the no-code version: we built a free tool for it — upload original, pick page, upload replacement, download. Otherwise, keep reading.

Why this is harder than `setPage(12, newPage)`

PDFs aren't structured the way most developers expect. There is no array of pages you index into. The page tree is a tree (literally — it can be nested), pages reference resources held in a separate dictionary, fonts and images are deduplicated across pages, and cross-references between pages (links, bookmarks, form fields, named destinations) are stored separately from the page content.

When you "replace page 12," you have to:

Load the original document into an in-memory representation
Load the replacement document
Copy the replacement page's content + all its referenced resources (fonts, images, embedded files) into the original document's resource pool
Insert the copied page into the original's page tree at index 11 (zero-indexed)
Remove the original page 12 (now at index 12 because of step 4) from the page tree
Re-serialize the entire document, updating the cross-reference table

If you skip step 3, the new page will appear blank because its fonts and images are still pointing at the wrong document. If you skip step 5, you'll end up with 48 pages instead of 47. If you skip step 6, the cross-references will be wrong and Adobe Reader will complain on open.

The good news: pdf-lib does all of this for you if you call the right methods in the right order.

The pdf-lib version

import { PDFDocument } from 'pdf-lib';

async function replacePage(originalBytes, replacementBytes, pageIndex) {
  // 1. Load both documents
  const originalDoc = await PDFDocument.load(originalBytes);
  const replacementDoc = await PDFDocument.load(replacementBytes);

  // 2. Copy the replacement's first page into the original document
  // copyPages handles fonts, images, and all referenced resources
  const [copiedPage] = await originalDoc.copyPages(replacementDoc, [0]);

  // 3. Insert the copied page at the target position
  originalDoc.insertPage(pageIndex, copiedPage);

  // 4. Remove the old page (now shifted one position later)
  originalDoc.removePage(pageIndex + 1);

  // 5. Serialize back to a Uint8Array
  return originalDoc.save();
}

Usage from the browser:

const originalFile = document.getElementById('original').files[0];
const replacementFile = document.getElementById('replacement').files[0];
const pageNumber = parseInt(document.getElementById('page').value, 10);

const originalBytes = await originalFile.arrayBuffer();
const replacementBytes = await replacementFile.arrayBuffer();

// pageNumber is 1-indexed (user-facing), pageIndex is 0-indexed
const resultBytes = await replacePage(originalBytes, replacementBytes, pageNumber - 1);

// Trigger download
const blob = new Blob([resultBytes], { type: 'application/pdf' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'replaced.pdf';
a.click();
URL.revokeObjectURL(url);

That's the entire implementation. About 30 lines including the UI glue. Runs in the browser. No server.

The gotchas

This is the section I always wish API docs included.

Gotcha 1: `copyPages` is async, and people forget the `await`

// WRONG — silently fails
const [page] = originalDoc.copyPages(replacementDoc, [0]);

// RIGHT
const [page] = await originalDoc.copyPages(replacementDoc, [0]);

copyPages returns a Promise that resolves to an array of PDFPage objects. Forget the await and you'll try to insertPage with a Promise object instead of a page object — pdf-lib will throw a confusing error about an invalid page type.

Gotcha 2: User-facing page numbers vs PDF page indices

Almost every bug report I've ever seen on a PDF tool comes from this. Users think in 1-indexed numbers ("page 1, page 2, page 3"). PDF page arrays are 0-indexed ("index 0, index 1, index 2").

Worse, the page numbers PRINTED on a document body often differ from the PDF's actual page numbers. A 50-page report with a cover page, TOC, and executive summary might print "Page 1" on what is PDF page 4.

Your UI needs to be crystal clear about which number you're asking for. We label our input field "PDF page number (count from the very first page, including covers)". Users still occasionally get it wrong but at least the documentation is clean.

Gotcha 3: Form fields disappear when their page is removed

PDFs can have interactive form fields (text inputs, checkboxes, signatures). These fields are stored in the document's AcroForm dictionary AND referenced from the pages they appear on.

When you remove a page that had form fields, the page reference is gone but the AcroForm dictionary still has orphan field references. Some readers tolerate this. Adobe Reader sometimes shows a "this form is malformed" warning. pdf-lib doesn't currently clean up orphaned form references automatically — you have to do it yourself if your input PDFs have forms.

Quick check before warning your users:

const form = originalDoc.getForm();
const fields = form.getFields();
const pageToRemove = originalDoc.getPage(pageIndex);
const fieldsOnThisPage = fields.filter((f) =>
  f.acroField.getWidgets().some((w) => w.P() === pageToRemove.ref)
);

if (fieldsOnThisPage.length > 0) {
  // Warn user that their replacement will lose form fields
}

Gotcha 4: Digital signatures invalidate the entire document

If the original PDF was digitally SIGNED (not just visually — actually cryptographically signed with a Sig field), modifying any byte of the document invalidates the signature. The replaced page works fine, the rest of the document opens fine, but the signature panel in Adobe Reader will show "Signature is invalid — document has been modified after signing."

This is by design — that's literally what digital signatures are for. There is no way around it with pdf-lib (or any other PDF library, because circumventing this would defeat the purpose of digital signatures).

What you CAN do is detect this case before replacing and warn the user:

const signatures = originalDoc.getForm().getFields().filter((f) =>
  f.constructor.name === 'PDFSignature'
);

if (signatures.length > 0) {
  // Warn: replacing a page will invalidate digital signatures
}

Note: this is for cryptographic digital signatures, not signature images. If someone just pasted an image of their signature onto page 5, replacing page 12 is fine and the image stays untouched.

Gotcha 5: Page sizes don't have to match, but the result might look odd

If the original PDF is Letter (8.5 × 11") and the replacement page is A4 (8.27 × 11.69"), the inserted page will appear at A4 dimensions inside the otherwise-Letter document. PDF readers handle this fine — they just show that one page at a different size. But it might look unprofessional.

If you want to normalize the size, you can scale the replacement to match:

const targetPage = originalDoc.getPage(pageIndex); // the page being replaced
const { width, height } = targetPage.getSize();
copiedPage.setSize(width, height);

Be aware this scales the content too — text might look squashed if the aspect ratios differ.

Gotcha 6: Outlines/bookmarks pointing to the replaced page

PDF outlines (the sidebar tree in Adobe Reader) point to specific destinations — usually a (page, x, y, zoom) tuple. If you replace a page, outlines that pointed TO that page still point to the same coordinates on the new page, which may not be a sensible location anymore.

pdf-lib's outline handling is limited. For most use cases you can leave outlines as-is and the user-visible result is "the bookmark goes to a slightly weird spot on the new page." If outlines are critical to your app, you'll need to walk the outline tree and fix up destinations manually.

Doing it without `pdf-lib`

If you don't want to ship pdf-lib (it's ~700KB minified), there are a few alternatives:

PDF.js (Mozilla's library) — read-only. Can render pages but not modify or save them. Wrong tool for this job.
HummusJS / PDFKit-py / PyPDF2 — server-side. Requires a backend. If you have a backend, you have other options too.
Roll your own PDF parser — possible but you will lose months. PDFs have spec edge cases that took the pdf-lib team years to handle correctly.
Use a service like our API — outsource the bytes to someone else's pdf-lib. Same operation, just over HTTP.

For browser-side without a backend, pdf-lib is the only realistic option I've found. The bundle size is fine for a tool page where the user explicitly came to do PDF work — bigger problem if you're integrating this into a 50KB landing page.

Performance notes

For typical document sizes (under 50 pages, files under 10MB):

Page replace operation: 50-200ms
The save() call at the end is the bottleneck — re-serializing the whole document with updated cross-references
Memory: roughly 2-3x the file size in memory during operation (original + replacement + intermediate state)

For larger documents (200+ pages, 50MB+ files), things get slow. pdf-lib doesn't stream — the whole document is parsed into memory and the whole result is serialized at once. For 500MB files, you'll hit browser memory limits.

If you regularly handle large PDFs and need to do many small operations, server-side with a streaming PDF library is the right answer.

The free tool version

If you don't want to ship pdf-lib in your own app, or your users aren't developers, we built this as a free in-browser tool:

Replace PDF Pages Online Free – Swap Pages Easily | ConvertKr

Replace any page in a PDF with a page from another document. Preview, select, and download. Free, no signup.

convertkr.com

Upload the original PDF, pick the page number, upload the replacement, download. Same pdf-lib engine under the hood, no install required. Files never upload to a server — everything runs in the browser.

I use it myself when I receive contracts back with typos on non-signature pages. Same workflow as my lawyer friend.

What I'd love feedback on:

Has anyone built page-replacement in production with pdf-lib at scale? Curious about memory pressure and any wrappers you wrote for the orphan-form-field problem.
Anyone using a different browser PDF library I should know about? I keep meaning to evaluate mupdf-js (the Emscripten port of MuPDF) but haven't found time.
For the form-field gotcha — is there a cleaner way to detect orphaned references than the widget-walking approach in this post?

The code in this post is MIT — fork it on GitHub, ship it, change it. If you build something useful with it, share back.

What I Learned After My Website Disappeared From Google's First Page

Ahmad Faraz — Wed, 03 Jun 2026 10:08:32 +0000

When I launched ConvertKR, I thought SEO was mostly about meta tags, titles, keywords, and writing blog posts.

As a Senior Frontend Engineer, SEO was not my area of expertise. Like many developers, I focused on building products and writing code. But after launching my website, I realized that getting traffic from Google was a completely different challenge.

So I started learning.

I spent weeks reading articles about SEO fundamentals, including:

Meta titles and descriptions
Heading structure
Sitemap generation
Robots.txt
Internal linking
Page speed optimization
Content creation

I implemented everything I learned on my website and started publishing blog posts regularly.

To my surprise, the results came quickly.

Within the first couple of months, several of my tools started appearing on Google's first page. Seeing my website rank for search queries felt amazing. It was proof that all the effort was paying off.

Then something unexpected happened.

The Rankings Suddenly Dropped

After about two months, I noticed that my pages were no longer showing on the first page for many keywords.

Traffic slowed down.

Impressions decreased.

Some of the rankings I was excited about simply disappeared.

As someone who had invested a lot of time into learning SEO, this was frustrating.

Naturally, I started researching again.

The "Google Honeymoon" Effect

I spent hours reading SEO forums, Reddit discussions, and blog posts.

One explanation kept appearing repeatedly: the "Google Honeymoon" effect.

Many SEO professionals believe that Google sometimes gives new websites temporary visibility to evaluate user engagement and content quality. After collecting enough data, rankings may fluctuate before settling into more stable positions.

Whether this is an official Google mechanism or not, the pattern sounded very similar to what I was experiencing.

At first, I thought something was technically wrong with my website.

So I reviewed everything again:

Meta tags
Technical SEO
Site performance
Content quality
Indexing status

Everything looked fine.

The Missing Piece: Authority

That's when I realized something important.

Good SEO is not only about optimizing your website.

It's also about building authority.

You can have excellent technical SEO, but if Google doesn't view your website as a trusted source, ranking consistently becomes much harder.

So instead of endlessly tweaking meta tags, I shifted my focus toward authority building.

What I Started Doing

I began creating content outside of my website:

Publishing articles on developer communities
Creating YouTube videos
Sharing my projects publicly
Participating in discussions
Building backlinks naturally

The goal wasn't to trick search engines.

The goal was to demonstrate that real people were talking about and referencing my work.

Over time, I started seeing positive signals again.

A Small Win That Made My Day

This morning, I searched for the keyword "QR Remover."

And there it was.

My website appeared near the top of the search results again.

It might seem like a small achievement, but for anyone who has spent months building a website, optimizing content, and learning SEO from scratch, it's a very rewarding feeling.

My Biggest Takeaway

If you're a developer launching your first website, don't obsess over meta tags forever.

Technical SEO is important, but it's only part of the equation.

Focus on:

Creating genuinely useful tools
Publishing quality content
Building authority
Earning backlinks naturally
Being patient

SEO is rarely a straight line.

Sometimes rankings go up.

Sometimes they go down.

But if your product provides value and you continue building authority, the results can come back stronger than before.

Have you experienced a similar ranking drop with a new website? I'd love to hear your story in the comments.

How Stock Photo Watermarks Actually Work — Recreating the Getty Preview Pattern in JavaScript

Ahmad Faraz — Wed, 03 Jun 2026 08:34:43 +0000

You've seen the watermark. It's not the press-credit bar at the bottom of news photos — that's a different thing. I mean the preview watermark stock photo sites use on unpurchased images: "Getty Images" or "Shutterstock" repeated diagonally across the entire photo, faded to maybe 40% opacity, rotated at roughly -30 degrees, impossible to crop out.

That diagonal tile pattern is one of the most effective anti-piracy designs ever shipped on the web. You can't crop it out (covers the whole image). You can't clone-stamp it out (the text is everywhere, no clean background to sample). You can barely even read what's underneath, but you can read it enough to decide whether to buy.

A friend of mine needed to add this exact style to a batch of unreleased product photos he was sending to a client for review (the client had stolen design concepts before — he wanted "watermarked preview" versions until payment cleared). I'd never built one. So I spent a Saturday reverse-engineering it.

This post is the technical writeup. By the end you'll have working Canvas code that produces a near-perfect Getty/Shutterstock-style diagonal tile watermark on any image, including the spacing bug that wrecked my first version.

If you just want the tool without the code: we built one here. Drag in any photo, type your watermark text or upload a logo, get the watermarked image back. Runs entirely in your browser — files never upload. Otherwise, keep reading.

What makes the diagonal tile watermark anti-piracy

Before writing any code, it's worth understanding why this design is the standard. Other watermark styles fail for specific reasons:

Corner watermark — crop it off and the photo is clean.
Bottom bar — same problem, plus easy to clone-stamp.
Single centered watermark — opaque enough to be useful blocks the photo, transparent enough to see through is easy to remove with content-aware fill.
Diagonal tile — covers the entire image with repeating text, so cropping leaves more text behind, and content-aware fill has nothing clean to sample from. The text is everywhere.

That's why Getty, Shutterstock, Adobe Stock, iStock, Alamy, and every other stock site converged on the same pattern. It's not aesthetic — it's defensive.

The four design rules

Studying real Getty and Shutterstock previews, four rules make the watermark look authentic:

Rotation between -25° and -45°. Getty uses about -30°, Shutterstock about -45°. Horizontal text reads too cleanly and is easier to remove. Vertical is awkward. Diagonal forces the eye to fight the tilt.
Opacity around 35-45%. Below 30%, content-aware fill removes it. Above 50%, you can't read the photo. The sweet spot is enough to mark but not enough to obstruct.
Tile spacing roughly equal to text width + a small gap. Too tight and the text overlaps itself. Too loose and there are obvious gaps to crop into.
Color: white or near-white. Dark watermarks disappear into dark photos and become camouflage. White is universally legible against most backgrounds.

Get any of these wrong and the watermark either fails as protection (too easy to remove) or fails as a preview (too hard to see the photo). The proportions matter more than people realize.

The first naive implementation

Here's the simplest possible version. Loop across the image, draw rotated text at each position, done:

function watermark(imageUrl, text) {
  return new Promise((resolve) => {
    const img = new Image();
    img.crossOrigin = 'anonymous';
    img.onload = () => {
      const canvas = document.createElement('canvas');
      canvas.width = img.naturalWidth;
      canvas.height = img.naturalHeight;
      const ctx = canvas.getContext('2d');

      ctx.drawImage(img, 0, 0);

      ctx.globalAlpha = 0.4;
      ctx.font = 'bold 48px Arial';
      ctx.fillStyle = '#ffffff';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';

      // Draw text at every grid position, each rotated -30°
      const spacing = 200;
      for (let y = 0; y < canvas.height; y += spacing) {
        for (let x = 0; x < canvas.width; x += spacing) {
          ctx.save();
          ctx.translate(x, y);
          ctx.rotate(-Math.PI / 6); // -30 degrees
          ctx.fillText(text, 0, 0);
          ctx.restore();
        }
      }

      resolve(canvas.toDataURL('image/jpeg', 0.92));
    };
    img.src = imageUrl;
  });
}

This works, sort of. Run it and you'll immediately see two problems:

The corners of the image are bare. Rotating each tile individually leaves diagonal seams of empty space along the image edges.
Tile positions don't line up. Because each tile rotates independently around its own origin, the visual pattern feels chaotic instead of grid-aligned.

The fix is one of those mental flips that's obvious once you see it: don't rotate each tile. Rotate the entire coordinate system once, then draw tiles in straight rows and columns inside the rotated frame.

Rotate the grid, not the tiles

Here's the technique. We translate the canvas origin to the center, rotate by -30°, then draw a regular axis-aligned grid in that rotated coordinate system. From the user's perspective, the grid appears tilted because the coordinate system is tilted.

ctx.save();
ctx.translate(canvasWidth / 2, canvasHeight / 2);
ctx.rotate(-Math.PI / 6);

for (let y = -bound; y <= bound; y += spacing) {
  for (let x = -bound; x <= bound; x += spacing) {
    ctx.save();
    ctx.translate(x, y);
    ctx.fillText(text, 0, 0); // no per-tile rotation
    ctx.restore();
  }
}

ctx.restore();

Two things to notice:

The loop iterates from -bound to +bound, not 0 to canvas size. Because we translated to the center, coordinates are now centered on (0, 0), so we need to cover both negative and positive directions.
No per-tile rotation. The tiles are drawn flat in the rotated frame. The canvas does the rotation work for us.

But there's a new problem: what's bound? The image is canvasWidth × canvasHeight, but after rotation by -30°, the corners of the original image sit at coordinates that are further from the center than the image dimensions suggest.

The diagonal calculation

When you rotate a rectangle, the bounding box of the rotated shape is larger than the unrotated rectangle. To make sure tiles cover the entire image even at the rotated corners, you need to tile out to at least half the image's diagonal length.

const diagonal = Math.sqrt(canvasWidth ** 2 + canvasHeight ** 2);
const bound = diagonal / 2;

This is conservative — it covers a circle inscribing the rectangle, which is more than the rotated rectangle actually needs. But it's simpler than computing the exact rotated bounding box, and the extra tiles outside the canvas get clipped automatically when you draw to the canvas. Zero-cost insurance.

The spacing trap

Here's the bug I shipped in version one and only caught in testing: my tool let users adjust the tile spacing with a slider. Default was 150px. Worked great with short text like "Getty" at 48px font.

Then I tested with longer text — "ConvertKr Photography Studio © 2026" at the same font. The tiles overlapped catastrophically. Adjacent tiles drew on top of each other because the rendered text was ~600px wide while spacing was 150px.

The fix is to derive a minimum spacing from the actual rendered watermark dimensions, separately for horizontal and vertical axes:

const metrics = ctx.measureText(text);
const textWidth = metrics.width;
const textHeight = fontSize * 1.2; // approximation — works for most fonts

const spacingX = Math.max(userSpacing, textWidth + 30);
const spacingY = Math.max(userSpacing, textHeight + 15);

Why separate X and Y? Because text is much wider than it is tall. If you use one spacing value for both axes, you either get gaps that are too big vertically (when sized for horizontal) or text that overlaps horizontally (when sized for vertical). Separate values give you tight vertical packing (rows close together) and comfortable horizontal spacing (text doesn't run into itself). That's the actual Getty/Shutterstock look.

The 30 and 15 are gap padding. Tweak to taste — 30 horizontal and 15 vertical produces output that closely matches real stock previews.

The polished version

Putting it all together. Full file as a Gist on GitHub →

function addStockWatermark(imageUrl, options = {}) {
  const {
    text = 'Sample',
    fontSize = 48,
    fontFamily = 'Arial',
    color = '#ffffff',
    opacity = 0.4,
    rotation = -30,            // degrees
    userSpacing = 150,         // minimum spacing in px
    paddingX = 30,
    paddingY = 15,
  } = options;

  return new Promise((resolve, reject) => {
    const img = new Image();
    img.crossOrigin = 'anonymous';
    img.onload = () => {
      try {
        const canvas = document.createElement('canvas');
        canvas.width = img.naturalWidth;
        canvas.height = img.naturalHeight;
        const ctx = canvas.getContext('2d');

        ctx.drawImage(img, 0, 0);

        // Set up font once so measureText returns accurate width
        ctx.font = `bold ${fontSize}px ${fontFamily}`;
        ctx.fillStyle = color;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // Compute non-overlapping spacing from actual text dimensions
        const textWidth = ctx.measureText(text).width;
        const textHeight = fontSize * 1.2;
        const spacingX = Math.max(userSpacing, textWidth + paddingX);
        const spacingY = Math.max(userSpacing, textHeight + paddingY);

        // Rotate the grid, not the tiles
        ctx.save();
        ctx.globalAlpha = opacity;
        ctx.translate(canvas.width / 2, canvas.height / 2);
        ctx.rotate((rotation * Math.PI) / 180);

        // Tile out to half the diagonal so rotated corners stay covered
        const diagonal = Math.sqrt(canvas.width ** 2 + canvas.height ** 2);
        const bound = diagonal / 2;

        for (let y = -bound; y <= bound; y += spacingY) {
          for (let x = -bound; x <= bound; x += spacingX) {
            ctx.fillText(text, x, y);
          }
        }

        ctx.restore();
        ctx.globalAlpha = 1;

        resolve(canvas.toDataURL('image/jpeg', 0.92));
      } catch (err) {
        reject(err);
      }
    };
    img.onerror = () => reject(new Error('Image failed to load'));
    img.src = imageUrl;
  });
}

Usage:

const url = await addStockWatermark('/photo.jpg', {
  text: 'YOUR BRAND',
  opacity: 0.4,
  rotation: -30,
});
document.getElementById('preview').src = url;

That's the complete implementation. About 60 lines of JavaScript, no dependencies, runs entirely in the browser.

CORS gotcha

If you're loading images from another domain, crossOrigin = 'anonymous' requires the remote server to send Access-Control-Allow-Origin headers. Most don't. The clean workaround is to have users upload their own files using a file input — local file objects have no CORS restrictions:

const fileInput = document.getElementById('file');
const url = URL.createObjectURL(fileInput.files[0]);
const watermarked = await addStockWatermark(url, { text: 'PREVIEW' });

That's the approach we took for the tool itself. No backend involved — the file never leaves the user's device.

Performance notes

For a 4000×3000 image with default spacing, the tile loop draws roughly 150-200 text instances. Total render time on a mid-range laptop is 30-80ms — most of it is the drawImage() for the source bitmap, not the watermark loop.

The toDataURL() call at the end is the slowest step (200-500ms for a 4K JPEG). If you need to display the result instantly and only save later, swap to canvas.toBlob() which is async:

canvas.toBlob((blob) => {
  const url = URL.createObjectURL(blob);
  // use url for preview, no parsing cost
}, 'image/jpeg', 0.92);

Image watermarks instead of text

The same pattern works if you want to tile a logo PNG instead of text:

// In place of fillText, use drawImage
for (let y = -bound; y <= bound; y += spacingY) {
  for (let x = -bound; x <= bound; x += spacingX) {
    ctx.drawImage(logoImage, x - logoW / 2, y - logoH / 2, logoW, logoH);
  }
}

One detail: most user-uploaded logos arrive in black or full-color. For a stock-watermark style you usually want them tinted to a single color (typically white). The trick is globalCompositeOperation = 'source-in' on an offscreen canvas:

const off = document.createElement('canvas');
off.width = logoW;
off.height = logoH;
const octx = off.getContext('2d');
octx.drawImage(logoImage, 0, 0, logoW, logoH);
octx.globalCompositeOperation = 'source-in';
octx.fillStyle = '#ffffff';
octx.fillRect(0, 0, logoW, logoH);
// Now `off` is a white silhouette of the logo — use it like wmImage

This recolors every opaque pixel to white while preserving transparency.

A note on legality

You can apply any watermark you want to your own photos. What you should NOT do is generate a "Getty Images" branded watermark on a photo and try to pass it off as being from Getty. That's brand impersonation and Getty's legal team is famously aggressive about it.

Legitimate uses I've seen:

Watermarking your own unreleased product photos for client preview
Photography portfolios marking unpurchased proofs
Educational content explaining how watermarks work
Memes (half the internet's joke screenshots use a Getty-style overlay for comic effect)
Your own stock photo business protecting previews on your site

Don't impersonate someone else's brand. Use your own name, business, or copyright notice.

The free tool version

If you don't want to ship 60 lines of Canvas code into your own project, we built this as a free in-browser tool: convertkr.com/getty-images-watermark. Drop in any image, type a watermark or upload a logo, get the result back. Files never upload anywhere — everything runs in your browser.

Built during the Saturday that started this post. My friend uses it for client mockups now. A couple of meme-page admins on Twitter use it too, which I find weirdly satisfying.

What I'd love to see in the comments:

Have you reverse-engineered other iconic visual patterns? (The Wikipedia infobox, the Spotify gradient, the "as seen on" press bar)
Cleaner approach to text dimensions than fontSize * 1.2 for height? Anyone done it via actualBoundingBoxAscent + actualBoundingBoxDescent and found gotchas?
Anyone running tiled watermarks in production at scale? Curious about throughput per node and whether it's CPU or memory bound first.

The code is MIT — fork it on GitHub, ship it, change it. If you build something interesting with it, share back.

I Built a PDF Conversion API So You Don't Have to Install Ghostscript

Ahmad Faraz — Mon, 01 Jun 2026 13:51:40 +0000

A developer friend messaged me last month. He's building a SaaS for accountants — small product, growing nicely. One feature his customers kept asking for: "Can your app just compress these PDFs before I email them?"

Simple feature on paper. Until he tried to build it.

He spent a weekend on Ghostscript flags trying to get the compression right. Then another evening fighting Docker images because Ghostscript wouldn't install on his Railway deployment. Then he discovered his compressed PDFs sometimes corrupted the text layer, which broke his customers' workflow. Then he realized he'd need OCR for scanned PDFs, which meant Tesseract, which meant another binary, more system dependencies, more Docker pain.

"This is supposed to be a one-line feature. I've spent four days on it."

This is the conversation that made us build the ConvertKr API. If you've been down this rabbit hole, you know exactly what he meant.

What it does

Same PDF and image tools we've been running for free at convertkr.com, exposed as a JSON HTTP API at api.convertkr.com. You send a file in, you get a processed file back. No file storage. No queue infrastructure. No system dependencies to install.

Currently live:

PDF — compress, merge, split, rotate, crop, organize (reorder pages), add page numbers, insert pages, extract text
Images — convert (any format to any format), resize, watermark, HEIC to JPG
Coming next — OCR, HTML to PDF, PDF to image, PDF to Word (Office-grade via Windows VPS), background removal

The simplest possible example

curl -X POST https://api.convertkr.com/v1/compress-pdf \
  -H "Authorization: Bearer ckr_live_YOUR_API_KEY" \
  -F "file=@invoice.pdf" \
  -F "quality=medium" \
  -o invoice-compressed.pdf

That's it. One HTTP call. Compressed PDF lands in your working directory.

From Node:

import { readFile, writeFile } from 'node:fs/promises';

const file = await readFile('invoice.pdf');
const form = new FormData();
form.append('file', new Blob([file]), 'invoice.pdf');
form.append('quality', 'medium');

const res = await fetch('https://api.convertkr.com/v1/compress-pdf', {
  method: 'POST',
  headers: { Authorization: 'Bearer ckr_live_YOUR_API_KEY' },
  body: form,
});

const buf = Buffer.from(await res.arrayBuffer());
await writeFile('invoice-compressed.pdf', buf);

Same pattern in Python, Go, PHP, Ruby — anything with an HTTP client. We don't ship SDKs yet because the API is small enough that a raw fetch is shorter than importing a wrapper.

Why credits, not a subscription

This was the design decision we agonized over.

Most file-conversion APIs charge a flat monthly subscription — say $49/month for up to 1,000 conversions. Sounds clean. But it punishes anyone whose usage isn't perfectly steady.

If you do 100 conversions in January and 2,000 in February, you either overpay in January or get throttled in February. If your business is seasonal (tax software peaks in April, e-commerce peaks in November), subscription pricing doesn't fit. Indie developers shipping side projects hate it most — you pay $49 for the privilege of doing 12 conversions a month.

So we went with credits. Buy a pack up front. Each call deducts a small number of credits based on the operation. Cheap ops cost less, expensive ops cost more. Balance never expires.

Operation	Credits per call
Rotate PDF	1
Merge / Split PDF	1-2
Compress PDF	2
Image convert / resize	1
HEIC to JPG	1
PDF to text	2-3
OCR PDF (when live)	5-10 per page

50 credits free on signup, no card. Smallest paid pack is $5.

Auth — boring, but worth describing

Two modes, one user record:

JWT cookies for the dashboard on convertkr.com (signup, balance, generate API keys, view ledger)
Bearer API keys for the API itself — format ckr_live_<32 hex chars>

Keys show the full value once at creation. After that we store only the first 12 chars for display and a SHA-256 hash of the rest for verification. Same pattern Stripe uses. We copied it because it's good and there's no point reinventing it.

The credit ledger is append-only. We never UPDATE or DELETE rows — every change is an insert with a positive or negative delta. Balance = SUM(delta) WHERE user_id = ?. This sounds excessive until you realize how much pain it saves when you need to investigate "why does this user have N credits."

Race-safe credit consumption uses a pg_advisory_xact_lock(hashtext('user-credits-' || user_id)) inside the deduct transaction, and the deduction is committed only after the conversion succeeds. So a failed conversion is a free conversion — no manual refunds, no edge cases.

"What happens to my file?"

Nothing. Files are never written to disk. Your PDF arrives in the request body, gets processed in worker memory, the response goes back, and the buffer is garbage-collected. There is no "uploads" folder. There is no S3 bucket. There is no temp directory.

This matters more than people realize. If you're processing invoices, contracts, medical PDFs, tax forms — anything sensitive — you don't want a vendor that keeps copies "for 30 days" or "for billing purposes." We don't keep copies at all.

The reason the WordPress side does everything client-side in the browser is the same reason: we don't want to be responsible for your data. The API extends that promise to the server.

What people are building with it

From the early signups:

SaaS apps adding "compress before email" — exact use case from the opening story. One API call replaces installing Ghostscript on a managed Node host.
Invoice processing — merge invoice + statement + receipt before sending, rotate sideways scans, compress under email size limits.
Real estate apps — split 30-page scanned contracts into per-section PDFs, add page numbers, reorganize for storage.
Image-heavy apps fighting HEIC — users upload HEIC, your app needs JPG, instead of bundling a decoder you make one call.
WordPress plugins — restrictive hosting usually can't install system binaries; an HTTP API sidesteps that whole problem.
Internal tooling — operations teams batch-processing for compliance, archiving, or migration.

The Office formats sidequest (why they're not in the Node API)

One thing intentionally NOT in the Node API: Word to PDF, Excel to PDF, PowerPoint to PDF.

Honest reason: open-source conversion libraries for Office formats (LibreOffice headless, Pandoc) are okay for simple documents but break on real-world files with custom fonts, complex tables, embedded charts, or proprietary Microsoft features. The output looks almost right — which is worse than looking obviously wrong. Your customers send the converted file to a recruiter or client, and the formatting is subtly broken.

So Office conversion runs on a separate Windows VPS with actual Microsoft Office installed. Real Word renders real Word files. Same output you'd get if you opened the file in Office on your laptop and clicked "Save as PDF." When those endpoints come online, you'll call them the same way — but they're routed to that Windows worker behind the scenes.

Anyone who tells you their pure-Node service produces "identical to Word" output is selling you something.

Things we deliberately don't do

This is the part I never see in API docs but always wish I could:

We don't store your files. Already covered. Worth repeating.
No webhooks for synchronous operations. Compress a PDF, get it back in the same HTTP response. No "we'll send a webhook when ready" for jobs that take 2 seconds.
No billing for failures. If conversion fails on our side, no credits deducted. Atomic inside one transaction.
No auto-renew. You buy a pack manually. We don't store your card and surprise you next month.
No rate limits as a sales tactic. Technical limits exist (so one customer can't accidentally DOS the service) but they're high enough that legitimate use never hits them. We're not throttling free-tier users to upsell.
No lock-in. Stop using us — credits stay. Want a refund on unused credits — we'll process it.

Stack, for the curious

Hono on Node 22 (Express-style ergonomics, web-standards request/response, painless to run on Railway and edge runtimes alike)
Drizzle ORM + postgres.js + PostgreSQL 17 for the user/key/ledger schema
TypeScript strict mode
Lemon Squeezy as merchant of record for payments (we're in Pakistan — direct Stripe isn't available; LS handles VAT and global tax)
Railway for hosting (Postgres + app on git push)
Argon2id for password hashing, SHA-256 for API key hashing (keys are 128-bit random — slow hashes are unnecessary and would add latency to every request)

The entire codebase is around 3,000 lines of TypeScript. Small on purpose.

How to start

Sign up on convertkr.com with email + password — 50 free credits land immediately.
Generate an API key from the dashboard (full key shows once — save it).
Run a curl against any endpoint. Watch the balance tick down in real time.
When ready, buy a credit pack via Lemon Squeezy. Credits land within seconds of payment via webhook.

If you're integrating into a real product and need to verify the API handles your specific files before committing — just email. We'll grant test credits.

What I'd love feedback on

Honest list — would value any of these from the comments:

Pricing. Are credits at $5 / 1,000 cheap enough? Too cheap? Wrong unit?
Endpoint coverage. What's missing that you'd actually use? (We can prioritize based on demand — most additions take under two weeks.)
SDKs. Would an official Node or Python wrapper actually save you time, or is fetch + curl fine?
OCR. When OCR comes online, would you want it as a separate endpoint or built into PDF-to-text automatically?

The honest answer to "what would make you actually adopt this" is the most useful comment you can leave.

Source code for the API itself is closed for now (it's tied to the credit ledger and billing), but happy to talk architecture in the comments. Conversion logic underneath uses pdf-lib, sharp, and a few open-source libraries — nothing exotic.

If you've been down the Ghostscript-in-Docker rabbit hole, you know the pain. We've been there. The API exists so you don't have to be.

Try it free with 50 credits →

I Needed to Remove a QR Code from an PDF, But Every Solution Was Complicated

Ahmad Faraz — Sat, 30 May 2026 09:37:05 +0000

A few weeks ago, I was updating some marketing assets for one of my projects.

Everything looked good until I noticed a small problem.

The pdf contained an old QR code.

The QR code was pointing to an outdated page, and I needed to remove it before publishing the pdf again.

My first thought was, "This should be easy."

I opened a few pdf editing tools and quickly realized it wasn't as simple as I expected.

Most solutions required installing software, learning editing techniques, or manually covering the QR code with another object. Some AI tools could do it, but they were either paid or required creating an account.

For a task that should take a few seconds, I was spending far too much time.

That's when I started wondering:

"Why isn't there a simple tool that only removes QR codes?"

The Problem With QR Codes

QR codes are everywhere.

They're on flyers, product images, posters, presentations, screenshots, and social media graphics.

The problem is that QR codes don't always stay relevant.

Businesses change landing pages.

Campaigns expire.

Links break.

Sometimes you simply want to reuse an pdf without the QR code.

Yet removing one often requires using software designed for professional designers.

Building a Simpler Solution

Instead of continuing to search for a solution, I decided to build one.

The goal was simple:

Upload an pdf
Detect QR codes automatically
Remove them
Download the cleaned result

No accounts.

No complicated editing.

No learning curve.

Just a tool that solves one problem well.

After several iterations, the result became the Remove QR Code tool on ConvertKR.

What I Learned

One thing I've learned from building developer tools is that users don't always need more features.

Sometimes they just need fewer steps.

The best tools are often the ones that remove friction from a small but frustrating task.

Removing a QR code is not something people do every day.

But when they need it, they want the process to be fast.

Try It Yourself

If you've ever found yourself dealing with outdated QR codes in pdfs, you can try the tool here:

Remove QR Code from PDF Online Free – Instant Tool | ConvertKr

Remove watermarks, stamps, logos, QR codes, text, or any content from PDFs. Draw a box and erase. Free, no signup.

convertkr.com

I'd love to hear feedback from other developers, marketers, and designers who run into this problem.

Sometimes the most useful products come from solving our own small frustrations.

I built a free offline PDF & image toolkit — 15 tools, works without internet

Ahmad Faraz — Tue, 31 Mar 2026 20:59:55 +0000

TL;DR

I built ConvertKr Desktop — a free PDF & image toolkit with 15 tools that works 100% offline. Available for macOS, Windows, and Linux. No internet, no cloud uploads, no subscriptions.

🔗 Download | Web Version

The problem

Every time I need to merge a few PDFs or compress a document before emailing, I end up on some random website that:

📤 Uploads my files to their server (privacy?)
💧 Adds a watermark unless I pay
💰 Gives me 2 free uses per day, then asks for $12/month
🐌 Takes forever to upload and download

For something as simple as merging two PDFs, this felt ridiculous.

The solution

I built ConvertKr — first as a free web app where everything processes right in your browser (your files never leave your device), and now as a desktop app that works completely offline.

No internet. No accounts. No limits. Just open the app, pick your files, and get the result.

What you can do with it

PDF Tools

Merge — combine multiple PDFs into one
Split — extract pages by range or individually
Compress — reduce file size before emailing
Rotate — fix sideways scanned pages
Organize — drag and drop to reorder or delete pages
PDF to Image — convert pages to PNG, JPG, or WebP
Protect — add watermark protection
Unlock — remove password from PDFs
Watermark — add text watermarks (supports Urdu too)
Page Numbers — add numbers in any position
PDF Editor — add text, images, shapes, drawings, and highlights

Image Tools

Image to PDF — convert photos to PDF
Image Convert — switch between PNG, JPG, WebP
Image Compress — make images smaller
Image Crop — visual crop tool

Why offline matters

🔒 Privacy — your files never leave your computer. Period.
📶 No internet needed — works on a plane, in a cafe with bad wifi, anywhere
⚡ Fast — no uploading, no downloading, no waiting
📁 No file limits — handle large documents that crash browser-based tools
💸 Free forever — no trial that expires, no premium tier, no "upgrade to unlock"

Available on all platforms

Platform	Download
macOS (Apple Silicon)	DMG
Windows (64-bit)	EXE Installer
Linux (64-bit)	AppImage
Linux (Debian/Ubuntu)	.deb

macOS: If you see "app is damaged", open Terminal and run: xattr -cr /Applications/ConvertKr.app
Windows: If SmartScreen appears, click "More info" → "Run anyway"

These warnings appear because the app isn't code-signed yet. It's completely safe.

Web version too

Don't want to download anything? All tools also work at convertkr.com — directly in your browser, with 27+ tools including OCR, background remover, QR codes, and more. Same privacy — everything processes locally.

What's coming next

🔍 OCR — extract text from scanned PDFs
📦 Batch processing — drop a folder, process everything
✍️ Digital signatures
📝 PDF form filler

Try it

Completely free. No trial. No license. No limits.

👉 Download ConvertKr Desktop
👉 Use the web version

Questions or feedback? ahmadfarazjutt3@gmail.com

If you find it useful, buy me a coffee ☕ — it keeps the project going.

How I Built 11 Free File Tools That Run Entirely in the Browser

Ahmad Faraz — Sun, 22 Feb 2026 20:16:56 +0000

Every time I needed to edit a PDF or convert an image online, the same thing happened. Upload my file to some random server, create an account, hit a paywall after two tries, and wonder who's looking at my documents.

I got tired of it. So I built my own.

Meet ConvertKr

It's a set of 11 free browser-based tools for working with PDFs and images. The catch? There is no catch. No signups, no watermarks, no file limits.

But the part I care about most — your files never leave your device. Everything runs locally in your browser using JavaScript. My server never sees your documents. Not temporarily, not for processing, not at all.

The tools

PDF Editor — text, images, signatures, highlights, redactions
Merge PDF and Split PDF
PDF to Image and Image to PDF
Image Convert, Compress, Crop and Resize
Image Watermark
Background Remover
QR Code Generator

How is this possible without a server?

Modern browsers are way more powerful than most people give them credit for.

PDF.js handles PDF rendering — the same library Firefox uses internally. pdf-lib generates new PDFs with your edits baked in. The Canvas API handles all image operations — converting formats, compressing, cropping, watermarking. For background removal, an ML model runs directly in the browser.

No frameworks either. Just vanilla JavaScript. Each tool is a standalone page that loads fast and does one thing well.

The hardest part

The PDF editor was by far the most complex. You're essentially building a layer system on top of a rendered PDF page. Every annotation — text, image, signature, drawing — needs to be positioned in CSS pixels on screen, then converted back to PDF coordinate points when generating the final file. Getting that math wrong by even a few pixels means signatures end up in the wrong spot.

I also spent way too long debugging an ArrayBuffer detachment issue. When PDF.js reads your file, it detaches the buffer so pdf-lib can't use it anymore. The fix was simple once I found it — store the data as a Uint8Array immediately and pass copies to both libraries — but finding the cause was painful.

Why I'm sharing this

Two reasons. First, I genuinely think more developers should consider client-side processing for file tools. The browser can handle it, your users get real privacy, and you save on server costs. It's a win all around.

Second, I want feedback. I'm not a designer and I built this mostly alone. If something looks off, feels broken, or could be better — I want to know.

I'm also actively adding more tools. If there's something you wish existed that doesn't upload your files to the cloud, tell me. I might build it next.

Check it out at convertkr.com — would love to hear what you think.

Building a Modern CV Builder with React 19, TypeScript, and Firebase: A Complete Guide

Ahmad Faraz — Thu, 06 Nov 2025 11:47:03 +0000

Learn how to build a professional, open-source CV/Resume builder application with real-time preview, PDF export, and Firebase integration.

🎯 Introduction

In this comprehensive guide, I'll walk you through building a modern CV/Resume builder application from scratch. This project demonstrates advanced React patterns, TypeScript best practices, Firebase integration, and performance optimization techniques that you can apply to your own projects.

What we're building:

A full-featured CV builder with 11 beautiful templates
Real-time preview with side-by-side editing
PDF export and import functionality
Firebase authentication and data persistence
Performance-optimized components
A 6-step guided wizard for resume creation

Repository: GitHub - resume-studio

🚀 Project Overview

This CV builder is a production-ready application that showcases modern web development practices. It's built with React 19, TypeScript, and Firebase, providing a seamless user experience for creating professional resumes.

Key Features

✨ 11 Professional Templates - From minimalist to modern designs
🎨 Real-time Preview - See changes instantly as you type
📄 PDF Export/Import - Export your CV or upload existing PDFs
🔐 Firebase Authentication - Email, Google, and Twitter sign-in
💾 Auto-save - Your progress is automatically saved
⚡ Performance Optimized - Memoized components prevent unnecessary re-renders
📱 Responsive Design - Works perfectly on all devices

🛠️ Tech Stack

Here's what powers this application:

React 19 - Latest React with hooks and memoization
TypeScript - Type-safe development
Vite 7 - Lightning-fast build tool
Tailwind CSS - Utility-first styling
Firebase - Authentication, Firestore, and Storage
React Router v7 - Client-side routing
jsPDF & html2canvas - PDF generation
pdfjs-dist - PDF parsing and data extraction

📐 Architecture & Design Patterns

1. Component Structure

The application follows a modular component architecture:

src/
├── components/
│   ├── common/           # Reusable UI components
│   ├── dashboard/        # Dashboard components
│   ├── layout/           # Layout components
│   ├── templates/        # 11 CV template components
│   └── wizard/           # Wizard step components
├── hooks/                # Custom React hooks
├── services/             # Firebase services
├── contexts/             # React contexts
└── utils/                # Utility functions

2. Custom Hooks for State Management

We use custom hooks to encapsulate state logic and make components cleaner:

// src/hooks/useCVData.ts
import { useState, useEffect, useCallback } from 'react';
import type { CVData } from '../types/cv.types';
import { saveCVData, loadCVData } from '../utils/dataPersistence';

export const useCVData = () => {
  const [cvData, setCvData] = useState<CVData>(freshCVData);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const savedData = loadCVData();
    if (savedData) {
      setCvData(savedData);
    }
    setIsLoading(false);
  }, []);

  useEffect(() => {
    if (!isLoading) {
      saveCVData(cvData);
    }
  }, [cvData, isLoading]);

  const updateCVData = useCallback((newData: CVData) => {
    setCvData(newData);
  }, []);

  return { cvData, updateCVData, isLoading };
};

This hook provides:

Automatic loading from localStorage
Auto-save functionality
Stable function references with useCallback

3. Performance Optimization with React.memo

One of the critical challenges in a real-time editor is preventing unnecessary re-renders. Here's how we solved it:

The Problem

When typing in an input field, every keystroke would trigger a state update, causing the entire component tree to re-render. This led to:

Input fields losing focus
Poor typing performance
Unnecessary DOM updates

The Solution

We memoized components and used refs to maintain stable function references:

// src/components/common/Input.tsx
import { memo, useMemo } from 'react';
import type { FC, InputHTMLAttributes } from 'react';

interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
  label?: string;
  error?: string;
  helperText?: string;
}

const Input: FC<InputProps> = ({ 
  label, 
  error, 
  helperText, 
  className = '', 
  id,
  ...props 
}) => {
  const inputId = useMemo(() => 
    id || `input-${Math.random().toString(36).substr(2, 9)}`, 
    [id]
  );

  // ... rest of component
};

export default memo(Input);

CollapsibleSection Optimization

The biggest performance win came from moving CollapsibleSection outside the parent component:

// ❌ Before: Defined inside component (recreated on every render)
const CVEditorCollapsible = ({ data, onChange }) => {
  const CollapsibleSection = ({ ... }) => ( ... ); // Recreated!
  return <CollapsibleSection ... />;
};

// ✅ After: Defined outside (stable component identity)
const CollapsibleSection: FC<CollapsibleSectionProps> = memo(({ 
  title, icon, iconColor, children, isExpanded, onToggle 
}) => (
  <div className="bg-white rounded-2xl shadow-lg overflow-hidden mb-6">
    {/* ... */}
  </div>
));

const CVEditorCollapsible = ({ data, onChange }) => {
  return <CollapsibleSection ... />;
};

Why this matters: When CollapsibleSection was defined inside the parent, React saw it as a new component type on every render, causing all children to unmount and remount. Moving it outside gives it a stable identity, allowing React to properly optimize re-renders.

4. Firebase Integration

Authentication Setup

// src/config/firebase.ts
import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';
import { getStorage } from 'firebase/storage';

const firebaseConfig = {
  apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
  storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
  appId: import.meta.env.VITE_FIREBASE_APP_ID,
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const db = getFirestore(app);
export const storage = getStorage(app);

Service Layer Pattern

We use a service layer to abstract Firebase operations:

// src/services/authService.ts
import { 
  signInWithEmailAndPassword,
  createUserWithEmailAndPassword,
  signInWithPopup,
  GoogleAuthProvider,
  TwitterAuthProvider,
  onAuthStateChanged,
} from 'firebase/auth';
import { auth } from '../config/firebase';

export const signInUser = async (email: string, password: string) => {
  return await signInWithEmailAndPassword(auth, email, password);
};

export const signUpUser = async (email: string, password: string) => {
  return await createUserWithEmailAndPassword(auth, email, password);
};

export const signInWithGoogle = async () => {
  const provider = new GoogleAuthProvider();
  return await signInWithPopup(auth, provider);
};

export const onAuthStateChange = (callback: (user: any) => void) => {
  return onAuthStateChanged(auth, callback);
};

This pattern provides:

Centralized Firebase logic
Easy testing and mocking
Consistent error handling
Type safety

🎨 Key Features Implementation

1. Real-time Preview

The editor uses a two-column layout with synchronized state:

// src/pages/EditorPage.tsx
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
  {/* Left: Editor */}
  <div className="overflow-y-auto pr-2">
    <CVEditorCollapsible 
      data={cvData} 
      onChange={(newData) => updateCVData(newData)} 
    />
  </div>

  {/* Right: Preview */}
  <div className="overflow-y-auto">
    <div id="cv-export-content">
      {renderTemplate(selectedTemplate, cvData)}
    </div>
  </div>
</div>

Every change in the editor updates cvData, which triggers a re-render of the preview panel.

2. PDF Export

PDF export uses html2canvas and jsPDF:

// src/utils/exportPDF.ts
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

export const exportToPDF = async (
  elementId: string,
  filename: string
): Promise<void> => {
  const element = document.getElementById(elementId);
  if (!element) throw new Error('Element not found');

  const canvas = await html2canvas(element, {
    scale: 2,
    useCORS: true,
    logging: false,
  });

  const imgData = canvas.toDataURL('image/png');
  const pdf = new jsPDF('p', 'mm', 'a4');
  const imgWidth = 210; // A4 width in mm
  const imgHeight = (canvas.height * imgWidth) / canvas.width;

  pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight);
  pdf.save(filename);
};

3. PDF Import & Data Extraction

Users can upload existing PDFs and extract data:

// src/utils/exportPDF.ts (simplified)
import * as pdfjsLib from 'pdfjs-dist';

export const extractTextFromPDF = async (file: File): Promise<string> => {
  const arrayBuffer = await file.arrayBuffer();
  const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;

  let fullText = '';
  for (let i = 1; i <= pdf.numPages; i++) {
    const page = await pdf.getPage(i);
    const textContent = await page.getTextContent();
    const pageText = textContent.items
      .map((item: any) => item.str)
      .join(' ');
    fullText += pageText + '\n';
  }

  return fullText;
};

4. 6-Step Wizard

The wizard guides users through resume creation:

// src/pages/ResumeWizard.tsx
const steps = [
  { id: 'personal', title: 'Personal Information', component: PersonalInfoStep },
  { id: 'work', title: 'Work Experience', component: WorkExperienceStep },
  { id: 'education', title: 'Education', component: EducationStep },
  { id: 'skills', title: 'Skills', component: SkillsStep },
  { id: 'summary', title: 'Summary', component: SummaryStep },
  { id: 'review', title: 'Review', component: ReviewStep },
];

const handleComplete = () => {
  updateCVData(wizardData);
  const selectedTemplate = localStorage.getItem('selectedTemplate') || '1';
  navigate(`/editor/${selectedTemplate}`);
};

Each step validates input before allowing progression, ensuring data quality.

🔧 Performance Optimizations

1. Component Memoization

We memoized all frequently re-rendered components:

Input, Textarea, Date - Using React.memo
CollapsibleSection - Moved outside and memoized
Event handlers - Using useCallback

2. Stable Function References

const handlePersonalInfoChange = useCallback((field: string, value: string) => {
  const currentData = dataRef.current;
  onChangeRef.current({
    ...currentData,
    personalInfo: {
      ...currentData.personalInfo,
      [field]: value,
    },
  });
}, []); // Empty deps - uses refs instead

By using refs (dataRef, onChangeRef), we can keep the dependency array empty, ensuring the function reference never changes.

3. Local Storage Caching

CV data is automatically cached in localStorage:

useEffect(() => {
  if (!isLoading) {
    saveCVData(cvData); // Auto-save on every change
  }
}, [cvData, isLoading]);

This provides:

Instant loading on page refresh
Offline capability
Reduced Firebase read operations

📱 Getting Started

Prerequisites

Node.js 16+
npm or yarn
Firebase account (free tier works)

Installation

# Clone the repository
git clone https://github.com/AhmadFaraz-crypto/resume-studio.git
cd resume-studio

# Install dependencies
npm install

# Set up environment variables
cp env.example .env.local

# Add your Firebase config to .env.local
VITE_FIREBASE_API_KEY=your-api-key
VITE_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=your-project-id
VITE_FIREBASE_STORAGE_BUCKET=your-project.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=123456789
VITE_FIREBASE_APP_ID=your-app-id

# Start development server
npm run dev

Firebase Setup

Create Firebase Project
- Go to Firebase Console
- Create a new project
Enable Services
- Authentication: Enable Email/Password, Google, Twitter
- Firestore: Create database in test mode
- Storage: Create storage bucket in test mode
Get Configuration
- Project Settings → Your apps → Web app
- Copy config values to .env.local

🎯 Key Learnings

1. Performance Matters

Memoization isn't just about optimization—it's about user experience. Preventing unnecessary re-renders ensures:

Smooth typing experience
No focus loss
Better perceived performance

2. Component Architecture

Moving components outside their parents when they're recreated on every render is crucial. React needs stable component identities for proper optimization.

3. TypeScript is Your Friend

Strong typing catches bugs early and makes refactoring safer:

interface CVData {
  personalInfo: {
    name: string;
    email: string;
    phone: string;
    location: {
      city: string;
      zipCode: string;
      country: string;
    };
    linkedin?: string;
    summary: string;
  };
  workExperience: WorkExperience[];
  education: Education[];
  skills: string[];
}

4. Service Layer Pattern

Abstracting Firebase operations into services provides:

Better testability
Easier maintenance
Consistent error handling

🚀 Deployment

The application can be deployed to any static hosting platform:

Netlify

# Build command
npm run build

# Publish directory
dist

Add environment variables in Netlify dashboard.

Vercel

# Framework: Vite
# Build command: npm run build
# Output directory: dist

Environment variables are configured in Vercel dashboard.

🤝 Contributing

Contributions are welcome! Areas for contribution:

🎨 New template designs
🐛 Bug fixes
📚 Documentation improvements
♿ Accessibility enhancements
🌍 Internationalization
🧪 Tests
🎯 Performance optimizations

📚 Resources

🎉 Conclusion

Building this CV builder taught me valuable lessons about:

React performance optimization
TypeScript best practices
Firebase integration patterns
Component architecture
User experience design

The application is fully open-source and production-ready. You can use it as:

A learning resource
A starting point for your own projects
A portfolio showcase
A contribution opportunity

Star the repository if you find it helpful: GitHub - resume-studio

💬 Questions?

Have questions or suggestions? Feel free to:

Open an issue on GitHub
Start a discussion
Submit a pull request

How to Capture Web Page Screenshots with Next.js and Puppeteer

Ahmad Faraz — Fri, 01 Nov 2024 15:30:44 +0000

Capturing screenshots of web pages programmatically can be incredibly useful for generating previews, creating image-based reports, and more. In this guide, we’ll build a Next.js API route that takes a URL and generates a PNG screenshot. Our setup uses Puppeteer and chrome-aws-lambda to leverage a headless Chrome browser, making it versatile and production-ready.

We’ll start by setting up a new Next.js project and walking through the code step-by-step to understand how the API captures screenshots.

Prerequisites

Setting up the Next.js app
Configuring the API route with Puppeteer
Creating the React component for the capture interface
Explanation of local vs. deployment configurations for Puppeteer

Getting Started with a New Next.js Project

Create a new Next.js app:

npx create-next-app@latest capture-image-app
cd capture-image-app

Install the necessary dependencies:

npm install puppeteer puppeteer-core chrome-aws-lambda busboy

Step 2: Create the API Route to Generate Screenshots

Now, we’ll set up an API endpoint to capture and return screenshots based on a provided URL.

In the pages/api folder, create a new file named generate-png.ts and add this code:

import { NextApiRequest, NextApiResponse } from "next";
import busboy, { Busboy } from "busboy"; // Use busboy for multipart parsing
import chromium from "chrome-aws-lambda";
import puppeteerCore from "puppeteer-core"; // Import puppeteer-core directly
import puppeteer from "puppeteer"; // Import puppeteer directly

// Conditional import for Puppeteer based on the environment
const puppeteerModule = process.env.NODE_ENV === "production" ? puppeteerCore : puppeteer;

export const config = {
  api: {
    bodyParser: false, // Disable default body parsing to handle raw binary data (Blob)
  },
};

const delay = (ms: number): Promise<void> => new Promise((resolve) => setTimeout(resolve, ms));

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
): Promise<void> {
  try {
    if (req.method === "POST") {
      const bb: Busboy = busboy({ headers: req.headers });
      let width: number = 1920; // Default width
      let height: number = 0; // Default height
      let delayTime: number = 6000;
      const buffers: Buffer[] = [];

      bb.on("file", (_name: string, file: NodeJS.ReadableStream) => {
        file.on("data", (data: Buffer) => buffers.push(data));
      });

      bb.on("field", (name: string, value: string) => {
        if (name === "width") width = parseInt(value, 10) || 1920;
        if (name === "height") height = parseInt(value, 10) || 0;
        if (name === "delay") delayTime = parseInt(value, 10) || 6000;
      });

      bb.on("finish", async () => {
        const blobBuffer: Buffer = Buffer.concat(buffers);
        const htmlContent: string = blobBuffer.toString("utf-8");

        const browser = await puppeteerModule.launch({
          args: ["--start-maximized"],
          executablePath: process.env.NODE_ENV === "production"
            ? await chromium.executablePath || "/usr/bin/chromium-browser"
            : undefined,  // No custom executable path needed for local
          headless: true,
        });

        const page = await browser.newPage();

        // Load the HTML content directly
        await page.setContent(htmlContent, { waitUntil: "networkidle0" });

        //@ts-expect-error todo
        const bodyHeight = await page.evaluate(() => {
          return document.body.scrollHeight; // Get the full scrollable height of the body
        });

        await page.setViewport({
          width: Number(width),
          height: height || bodyHeight, // Use the provided height or fallback to the full body height
          deviceScaleFactor: 2,
        });

        await delay(delayTime);

        const screenshotBuffer = await page.screenshot({
          fullPage: !height,
          type: "png",
          omitBackground: false,
        });

        await browser.close();

        res.setHeader("Content-Type", "image/png");
        res.setHeader(
          "Content-Disposition",
          "attachment; filename=screenshot.png"
        );
        res.status(200).end(screenshotBuffer);
      });

      req.pipe(bb); // Pipe the request stream to busboy
    } else {
      res.setHeader("Allow", ["POST"]);
      res.status(405).end(`Method ${req.method} Not Allowed`);
    }
  } catch (error) {
    console.error("ERROR", error);
    res.status(500).end("Internal Server Error");
  }
}

*Explanation: Choosing Puppeteer for Local vs. Production Environments
*
In this code, we’ve set up a dynamic import for puppeteer:

Local Development: If NODE_ENV is not production, it uses puppeteer, which is simpler to set up and doesn’t require chrome-aws-lambda.
Production: For serverless deployments, the environment will detect NODE_ENV as production and load puppeteer-core along with chrome-aws-lambda, which allows it to work in AWS Lambda and other similar environments. In this setup, chrome-aws-lambda provides the correct Chromium path, ensuring compatibility with serverless providers.

Step 3: Create a Simple React Component for the UI

Here, we’ll create a straightforward form that lets users input values for the webpage capture. This form will trigger the generate function to capture and download the screenshot in PDF format.

import { useState } from "react";

export default function ScreenCaptureComponent() {
  const [isProcessing, setProcessing] = useState(false);
  const [width, setWidth] = useState<string>("1920");
  const [height, setHeight] = useState<string>("1000");
  const [delay, setDelay] = useState<string>("6000");

  // Function to clone HTML and prepare for capture
  function takeScreenshot() {
    const clonedElement = document.body.cloneNode(true) as HTMLElement;
    const blob = new Blob([clonedElement.outerHTML], { type: "text/html" });
    return blob;
  }

  // Function to capture screenshot by sending cloned HTML to API
  async function generateCapture() {
    setProcessing(true);

    const htmlBlob = takeScreenshot();

    if (!htmlBlob) {
      setProcessing(false);
      return;
    }

    try {
      const formData = new FormData();
      formData.append("file", htmlBlob);
      formData.append("width", width);
      formData.append("height", height);
      formData.append("delay", delay);
      const response = await fetch("/api/generate-png", {
        method: "POST",
        body: formData,
      });

      if (!response.ok) throw new Error("Capture failed");

      const blob = await response.blob();
      const downloadUrl = URL.createObjectURL(blob);
      const link = document.createElement("a");
      link.href = downloadUrl;
      link.download = "capture.png";
      link.click();
      URL.revokeObjectURL(downloadUrl);
    } catch (error) {
      console.error("Failed to capture screenshot", error);
    } finally {
      setProcessing(false);
    }
  }

  return (
    <div
      style={{
        maxWidth: "400px",
        margin: "50px auto",
        padding: "24px",
        backgroundColor: "white",
        borderRadius: "8px",
        width: "100%",
        boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
      }}
    >
      <h2
        style={{
          fontSize: "24px",
          fontWeight: "600",
          textAlign: "center",
          marginBottom: "16px",
        }}
      >
        Webpage Screenshot Capture
      </h2>
      <form
        onSubmit={(e) => {
          e.preventDefault();
          generateCapture();
        }}
        style={{
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          marginBottom: "16px",
        }}
      >
        <label
          style={{ marginBottom: "8px", fontWeight: "500" }}
          htmlFor="width"
        >
          Width (px)
        </label>
        <select
          id="width"
          value={width}
          onChange={(e) => setWidth(e.target.value)}
          style={{
            width: "100%",
            padding: "8px",
            marginBottom: "16px",
            borderRadius: "4px",
            border: "1px solid #ccc",
            outline: "none",
          }}
        >
          <option value="1920">1920 (Full HD)</option>
          <option value="1366">1366 (Laptop)</option>
          <option value="1280">1280 (Desktop)</option>
          <option value="1024">1024 (Tablet Landscape)</option>
          <option value="768">768 (Tablet Portrait)</option>
          <option value="375">375 (Mobile)</option>
        </select>

        <label
          style={{ marginBottom: "8px", fontWeight: "500" }}
          htmlFor="height"
        >
          Height (px)
        </label>
        <input
          type="number"
          id="height"
          value={height}
          onChange={(e) => setHeight(e.target.value)}
          required
          style={{
            width: "100%",
            padding: "8px",
            marginBottom: "16px",
            borderRadius: "4px",
            border: "1px solid #ccc",
            outline: "none",
          }}
        />

        <label
          style={{ marginBottom: "8px", fontWeight: "500" }}
          htmlFor="delay"
        >
          Delay (ms)
        </label>
        <input
          type="number"
          id="delay"
          value={delay}
          onChange={(e) => setDelay(e.target.value)}
          required
          style={{
            width: "100%",
            padding: "8px",
            marginBottom: "16px",
            borderRadius: "4px",
            border: "1px solid #ccc",
            outline: "none",
          }}
        />

        <button
          type="submit"
          disabled={isProcessing}
          style={{
            padding: "8px 16px",
            color: "white",
            borderRadius: "4px",
            transition: "background-color 0.3s",
            backgroundColor: isProcessing ? "#b0bec5" : "#2196F3",
            cursor: isProcessing ? "not-allowed" : "pointer",
          }}
        >
          {isProcessing ? "Capturing..." : "Capture Screenshot"}
        </button>
      </form>

      {/* Example HTML Element to Capture */}
      <div id="capture-area" style={{ display: "none" }}>
        <h3
          style={{
            fontSize: "20px",
            fontWeight: "600",
          }}
        >
          Content to Capture
        </h3>
        <p>This is an example of the HTML content that will be captured.</p>
      </div>
    </div>
  );
}

Conclusion

This tutorial covers setting up a webpage capture tool in Next.js, handling screenshots with Puppeteer, and creating an interactive frontend component. Remember to use puppeteer locally and switch to puppeteer-core in production to reduce bundle size and optimize for serverless environments. Happy coding!

How to fix “require is not defined” in JavaScript / Node.js? How can we run HTML file on server?

Ahmad Faraz — Thu, 28 Mar 2024 13:14:22 +0000

When we are working with plain javaScript, Sometimes we are getting this error on require() and we are getting the “ReferenceError: require is not defined” error in the browser environment because the require() method is supported in browsers.

There are already multiple solutions on stackoverflow and also we have multiple articles related to that, we can use type="module" in <script type="module" /> then we can use import and export in JavaScript, like you can see stackoverflow here multiple solutions.

but after that if we get another error like

Access to script at 'file:///Users/ahmadfaraz/Documents/app.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.

This error is coming because we are running the HTML file locally and if you are using VS Code IDE there is a HTML live server has an extension for I'm not sure if this could help you or not. But this is my solution how you can solve this above error.

If we run HTML file on server that error can be solved, let's see how can we run HTML file on local server.

Note: Make sure you must have installed node.js

create file package.json

{}

then run this command http-server

npm i http-server

Then you will see in package.json that you have installed the http-server library.

create file src/data.js

export const DATA = [
    {
        "id": "1",
        "name": "Ahmad"
    }
]

create file src/index.js

import {DATA} from './data.js'
console.log(DATA)

create file src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="module" src="./index.js"></script>
</body>
</html>

update file package.json

{
  "scripts": {
    "start": "npx http-server src/"
  },
  "dependencies": {
    "http-server": "^14.1.1"
  }
}

the run

npm start

Error should resolved now.

DEMO VIDEO

Thank you!

NextJs 14 with antd 5.11

Ahmad Faraz — Tue, 21 Nov 2023 13:51:01 +0000

Hello everyone,

Today I will guide you how we can implement antd in NextJs 14.

Recently I was working on a client project, there we are using NextJs 12 version and antd 4.20.2 version, I got a task, I have to update our NextJs version to 14, because our web app NextJs 12 was very slow and we have to upgrade the version.

There is a lot of fantastic updates in NextJs 14, you can see on this link

First I have a problem with antd because Ant Design's CSS is loading after the page is rendered, causing a flash of unstyled content in next Js 14. I searched a lot of articles but couldn't find anything right related to this.

I saw few updates in antd on antd documentation

Here is the steps, how we can implement antd in our NextJs 14 app.

Step 1:

npx create-next-app@latest

Step 2:

npm install antd

Step 3:

npm install @ant-design/cssinjs

Step 4:

Create lib/AntdRegistry.tsx in your src directory

'use client';

import React from 'react';
import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';
import type Entity from '@ant-design/cssinjs/es/Cache';
import { useServerInsertedHTML } from 'next/navigation';

const StyledComponentsRegistry = ({ children }: React.PropsWithChildren) => {
  const cache = React.useMemo<Entity>(() => createCache(), []);
  const isServerInserted = React.useRef<boolean>(false);
  useServerInsertedHTML(() => {
    // avoid duplicate css insert
    if (isServerInserted.current) {
      return;
    }
    isServerInserted.current = true;
    return <style id="antd" dangerouslySetInnerHTML={{ __html: extractStyle(cache, true) }} />;
  });
  return <StyleProvider cache={cache}>{children}</StyleProvider>;
};

export default StyledComponentsRegistry;

Step 5:

Update your layout.tsx file

import React from 'react';
import { Inter } from 'next/font/google';

import StyledComponentsRegistry from '../lib/AntdRegistry';

import '@/globals.css';

const inter = Inter({ subsets: ['latin'] });

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

const RootLayout = ({ children }: React.PropsWithChildren) => (
  <html lang="en">
    <body className={inter.className}>
      <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
    </body>
  </html>
);

export default RootLayout;

NextJs documentation: https://nextjs.org/docs/app/building-your-application/routing
Github repo: https://github.com/AhmadFaraz-crypto/NextJs-14-with-antd-5.11

ERPNext-installation-Guide-Mac

Ahmad Faraz — Fri, 21 Oct 2022 11:19:21 +0000

The complete guide to install ERPNext in your Mac system

Pre-requisites

Python 3.6+
Homebrew 3.6+
Node.js 14
Redis 5                                       (caching and real time updates)
MariaDB                                       (to run database driven apps)
yarn 1.12+                                    (js dependency manager)
pip 20+                                       (py dependency manager)

STEP 1 Install brew
Homebrew is an app for macOS that allows you to install a huge variety of UNIX software on your Mac with one simple command (on the command line).

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

STEP 2 Install git

Git is the most commonly used version control system. Git tracks the changes you make to files, so you have a record of what has been done, and you can revert to specific versions should you ever need to. Git also makes collaboration easier, allowing changes by multiple people to all be merged into one source.

brew install git

STEP 3 Install setuptools and pip (Python's Package Manager).

Setuptools is a collection of enhancements to the Python distutils that allow developers to more easily build and distribute Python packages, especially ones that have dependencies on other packages. Packages built and distributed using setuptools look to the user like ordinary Python packages based on the distutils.

pip is a package manager for Python. It's a tool that allows you to install and manage additional libraries and dependencies that are not distributed as part of the standard library.

sudo pip3 install setuptools

STEP 4 Install virtualenv

virtualenv is a tool for creating isolated Python environments containing their own copy of python , pip , and their own place to keep libraries installed from PyPI. It's designed to allow you to work on multiple projects with different dependencies at the same time on the same machine.

sudo pip3 install virtualenv

STEP 5 Install MariaDB

MariaDB is developed as open source software and as a relational database it provides an SQL interface for accessing data.

open this link

https://mariadb.com/resources/blog/installing-mariadb-10-1-16-on-mac-os-x-with-homebrew/

Install Mariadb

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
brew install mariadb
mysql_install_db
mariadb-secure-installation
mariadb -u root -p

IMPORTANT :During this installation you'll be prompted to set the MySQL root password. If you are not prompted for the same You can initialize the MySQL server setup by executing the following command

sudo mysql_secure_installation

STEP 6 MySQL database development files

brew install mysql-client

STEP 7 Edit the mariadb configuration ( unicode character encoding )

sudo nano /opt/homebrew/mariadb/my.cnf

add this to the my.cnf file

[mysqld]
character-set-client-handshake = FALSE
character-set-server = utf8mb4
collation-server = utf8mb4_unicode_ci

[mysql]
default-character-set = utf8mb4

Now press (Ctrl-X) to exit

brew services start mariadb

STEP 8 install Redis

Redis is an open source (BSD licensed), in-memory data structure store, used as a database, cache, and message broker.

brew install redis

STEP 9 install Node.js 14.X package

Node.js is an open source, cross-platform runtime environment for developing server-side and networking applications. Node.js applications are written in JavaScript, and can be run within the Node.js runtime on OS X, Microsoft Windows, and Linux.

brew install node

This will be install latest version of Node.

If you want to change the node version you can use NVM.

https://tecadmin.net/install-nvm-macos-with-homebrew/

STEP 10 install Yarn

Yarn is a JavaScript package manager that aims to be speedy, deterministic, and secure. See how easy it is to drop yarn in where you were using npm before, and get faster, more reliable installs. Yarn is a package manager for JavaScript.

sudo npm install -g yarn

STEP 11 install wkhtmltopdf

Wkhtmltopdf is an open source simple and much effective command-line shell utility that enables user to convert any given HTML (Web Page) to PDF document or an image (jpg, png, etc)

brew install wkhtmltopdf

STEP 12 install frappe-bench

sudo -H pip3 install frappe-bench

IMPORTANT: you may wish to log out and log back into your terminal before next step and You must login.

bench --version

STEP 13 initilise the frappe bench & install frappe latest version

bench init frappe-bench --frappe-branch version-13

cd frappe-bench/
bench start

STEP 14 create a site in frappe bench

bench new-site site1.local

NOTE: If you face this type of issue.

For key collation_server. Expected value utf8mb4_unicode_ci, found value utf8mb4_general_ci
================================================================================
Creation of your site - site11.locale failed because MariaDB is not properly
configured. If using version 10.2.x or earlier, make sure you use the
the Barracuda storage engine.
Please verify the settings above in MariaDB's my.cnf. Restart MariaDB. And
then run `bench new-site site1.locale` again.

then you have to go in mariadb shell and run this commands

SET GLOBAL collation_server = 'utf8mb4_unicode_ci';

and restart the mariadb

brew services restart mariadb

STEP 15 install ERPNext latest version in bench & site

bench get-app erpnext --branch version-13
###OR
bench get-app https://github.com/frappe/erpnext --branch version-13

bench --site site1.local install-app erpnext

bench --site site1.local add-to-hosts

bench start

Your server will run on this host

http://site1.local:8000/

DEV Community: Ahmad Faraz

How to Replace a Page in a PDF Programmatically with pdf-lib (No Backend Required)

Why this is harder than setPage(12, newPage)

The pdf-lib version

The gotchas

Gotcha 1: copyPages is async, and people forget the await

Gotcha 2: User-facing page numbers vs PDF page indices

Gotcha 3: Form fields disappear when their page is removed

Gotcha 4: Digital signatures invalidate the entire document

Gotcha 5: Page sizes don't have to match, but the result might look odd

Gotcha 6: Outlines/bookmarks pointing to the replaced page

Doing it without pdf-lib

Performance notes

The free tool version

Replace PDF Pages Online Free – Swap Pages Easily | ConvertKr

What I Learned After My Website Disappeared From Google's First Page

The Rankings Suddenly Dropped

The "Google Honeymoon" Effect

The Missing Piece: Authority

What I Started Doing

A Small Win That Made My Day

My Biggest Takeaway

How Stock Photo Watermarks Actually Work — Recreating the Getty Preview Pattern in JavaScript

What makes the diagonal tile watermark anti-piracy

The four design rules

The first naive implementation

Rotate the grid, not the tiles

The diagonal calculation

The spacing trap

The polished version

CORS gotcha

Performance notes

Image watermarks instead of text

A note on legality

The free tool version

I Built a PDF Conversion API So You Don't Have to Install Ghostscript

What it does

The simplest possible example

Why credits, not a subscription

Auth — boring, but worth describing

"What happens to my file?"

What people are building with it

The Office formats sidequest (why they're not in the Node API)

Things we deliberately don't do

Stack, for the curious

How to start

What I'd love feedback on

I Needed to Remove a QR Code from an PDF, But Every Solution Was Complicated

The Problem With QR Codes

Building a Simpler Solution

What I Learned

Try It Yourself

Remove QR Code from PDF Online Free – Instant Tool | ConvertKr

I built a free offline PDF & image toolkit — 15 tools, works without internet

TL;DR

The problem

The solution

What you can do with it

PDF Tools

Image Tools

Why offline matters

Available on all platforms

Web version too

What's coming next

Try it

How I Built 11 Free File Tools That Run Entirely in the Browser

Meet ConvertKr

The tools

How is this possible without a server?

The hardest part

Why I'm sharing this

Building a Modern CV Builder with React 19, TypeScript, and Firebase: A Complete Guide

🎯 Introduction

🚀 Project Overview

Key Features

🛠️ Tech Stack

📐 Architecture & Design Patterns

1. Component Structure

2. Custom Hooks for State Management

3. Performance Optimization with React.memo

Why this is harder than `setPage(12, newPage)`

Gotcha 1: `copyPages` is async, and people forget the `await`

Doing it without `pdf-lib`