Card Bleed Expander

A free browser tool that turns a deck list into print-ready cards: bleed, rounded corners and crop marks, with images that never leave your device.

Category
AI & Automation
Year
2026
Role
Design and build
Stack
React + Vite · Canvas image pipeline · Vercel (serverless API, Analytics) · Cursor · Scryfall · Pokémon TCG API · YGOPRODeck
Card Bleed Expander

01

Problem

My partner and I print proxy cards for tabletop games at home. Card images usually come without bleed, the extra margin printers need, so every card had to be extended by hand in an image editor before printing: slow and easy to get wrong.

02

Approach

I built a browser tool that takes the card image and extends its edges automatically. Edges are extended by repeating the outermost row of pixels; for the corners, the tool samples colour along the diagonal towards the centre, so the rounded corners of a card scan fill cleanly instead of leaving white gaps.

Around that core: crop marks, trim and border controls, the standard 63 × 88 mm size, RGB or CMYK output, and batch processing of a whole folder with Save, Save & next or Save all. Everything runs client-side on an HTML Canvas, so card images are never uploaded; the only server code is a small Vercel function for a private feedback form.

A second feature removes the step before that: paste a deck list and the tool downloads the card images directly, for Magic: The Gathering, Pokémon and Yu-Gi-Oh!, ready to be processed and printed. Images come from public card databases: Scryfall for Magic, the Pokémon TCG API and YGOPRODeck.

The first version was a desktop app (.exe / .dmg). When friends with the same problem wanted it, I realised that asking people to install an unknown executable is a real barrier, so I rebuilt it as a web app: nothing to install, and the source is open for anyone to check. I then shared it for free in Reddit communities for home printing.

03

Result

Two manual steps, finding each card image and fixing its bleed, became one paste and a download. We use it for every print batch, and so do a few friends. The Reddit post got little traction, a useful lesson that building the tool is only half of getting it adopted.

Design decisions

  • Solve my own problem first, then share it. Building for a real, repeated need made the requirements obvious.
  • Trust is a feature. Moving from a downloadable executable to a web app with visible source removed the biggest reason not to try it.
  • Remove the step before the step. Fixing bleed alone wasn't enough: collecting the images was just as slow, so the deck-list download came next.
  • Simple over clever. Pixel repetition plus diagonal corner sampling is predictable, instant and runs entirely in the browser, with no AI needed.
  • Zero friction, full privacy. It runs in the browser, needs no account and is free; images stay on the user's device.
Card Bleed Expander

Next project

Newsletter Image Generator