SUZUSHINLAB
Journal / English

I Built Card Codex to Search and Save Magic: The Gathering Cards

· Shingo Suzuki (Suzushin)

Japanese original: .

Game workshopTypeScriptWordPress developmentMTG

Hi, I'm Shingo Suzuki, also known as Suzushin.

As you may have gathered from my article about MTG's five colors, I'm quite fond of Magic: The Gathering.

Recently, in my article about turning Override into a web game, I introduced my development section, SUZUSHINLAB Studio.

For its second app, I've made Card Codex, a tool for searching and saving MTG cards.

Why make a card-search tool?

MTG has an enormous variety of cards. Color, type, effects, set, rarity—there are plenty of times when I want to combine conditions to find something.

“What should Studio's second app be?”
“Right, why not make something I want myself?”

There's another personal reason. I may write MTG strategy articles on this blog, and having my own tool to look up and organize cards could be useful.

So I decided to use an MTG card database to build a search tool to my liking.

Using Scryfall's helpful API

For card data, I used the API provided by Scryfall, an MTG card-search service. It's free to use without registration and supports detailed conditions including color, type, rules text, set, and rarity.

I also found that its CORS configuration allows direct requests from browsers. So instead of building a server-side proxy, I have the browser's JavaScript query Scryfall directly.

As with Override, I used TypeScript and reused the process of checking safety and deploying to production over SSH. Having already built one app made this part smoother the second time around.

What it can do

The Card Codex search screen

The search supports:

  • Card name, color, type, set, and rarity
  • Mana value as a range
  • Rules text, including AND/OR searches across multiple keywords
  • Searching only Japanese-language cards
  • Formats such as Standard, Modern, and Commander
  • Sorting by name, mana value, release date, and more

For more control, there's an advanced field where you can enter Scryfall search syntax directly.

You can save individual card images or add cards to a saved list. That list can be exported as deck-list text or as a single image showing the cards together. If you already have a deck list, you can paste the card names to add them in bulk.

Things I fixed after trying it

After getting the basic app working, I used it myself and changed what bothered me:

  • Japanese-only searches still showed English names, so I prioritized Japanese printed names.
  • Mana value initially used fixed comparison operators; I changed it to a range.
  • I added rules-text search, then AND/OR support.
  • Saved-list images were too small to read, so I increased their size.
  • I added bulk entry by pasting a deck list.
  • I added a clear-list button and sorting.

Rather than finishing once and stopping, I improve things as I notice them. That's the same approach I used with Override. Being able to fix a tool I use myself is a small but satisfying benefit.

About card images

The card images shown and saved in Card Codex come directly from Scryfall. I don't copy them onto my server or modify them. The page footer includes “Powered by Scryfall” credit and states that card-image copyright belongs to Wizards of the Coast.

Give it a try

You can use Card Codex from SUZUSHINLAB Studio.

I'd be happy if it helps you find MTG cards or organize deck lists. If you notice something or want another search condition, please let me know. Like Override, I'd like this tool to grow gradually.

I plan to keep adding original tools and games to Studio. See you in the next article!

Read the Japanese original

On this page
  1. Why make a card-search tool?
  2. Using Scryfall's helpful API
  3. What it can do
  4. Things I fixed after trying it
  5. About card images
  6. Give it a try