Building a Client-Side MTG Proxy Generator with React and TypeScript

Hello fellow Wizards🧙‍♂️,

I built MTG Proxy, an open-source browser application that converts Magic: The Gathering deck lists into printable playtest cards.

Live application: https://lksvn.com.br/mtg-proxy/
Source code: https://github.com/lksvn/mtg-proxy

What it does

The workflow is intentionally simple:

1. Paste or import a deck list
2. Load the corresponding cards
3. Review the previews and select different printings if needed
4. Configure the print layout
5. Export a PDF

A list can contain only card names:

Lightning Bolt
Counterspell
Delver of Secrets

Quantities, set codes, and collector numbers are also supported:

4 Lightning Bolt
1 Black Lotus (lea) 232
2 Delver of Secrets (isd)

Useful features

The application supports card names in different languages and resolves them to English printings using Scryfall data.

Typing @ followed by part of an English card name activates autocomplete:

4 @lightning

Users can also select specific printings, export both faces of double-faced cards, and configure:

• Paper size
• Card spacing
• Bleed
• Crop marks
• Black corners
• Playtest watermarks
• Basic-land filtering
• An optional deck-list page

Privacy and architecture

MTG Proxy is a client-only application. Deck lists and recent history remain in browser storage. Only card lookup requests are sent to Scryfall.

The project uses:

• React
• TypeScript
• Vite
• Sass
• pdf-lib

Keeping PDF generation in the browser avoids operating a backend and makes the tool easier to host as a static site.

What’s next

The current roadmap is focused on improving accessibility, keyboard testing, and error feedback for failed network or image requests.

If you play Magic or are interested in browser-based PDF generation, I’d appreciate your feedback.