mtgify is a tool for quickly and easily displaying Magic cards on the web.
Just add two lines of code to your website, and any word that matches with the english name of a Magic card will be automatically converted into a link to that card on Gatherer or the MTG search engine of your choice. mtgify also adds a handy image popup that appears if you hover over the card name, commonly known as an "autocard". There are also simple tools to inlining card images just by referring to the name, or doing your autocards manually.
Alternatively, let's say you don't have a website of your own but find yourself reading a lot about Magic on the web. Do you have a Magic blog you like but wish it had autocard funtionality? mtgify can also be applied in your browser to any website you visit.
Check out the examples below!
Create a bookmark to have autocard on any website you visit
Set how the links should work
Test it out! Try hovering your mouse over the card name below:
Try a different card:
Save it as a bookmark
Drag this button into your bookmarks toolbar:
That's it! Then go to any page and click the bookmark. For example, this tournament decklist
Nervous about running some random code in your browser? You can check the source yourself on GitHub
Easily display Magic cards on your own website
Import these two files at the top of your HTML document
The stylesheet is not necessary, but recommended. Think of it as a starting point.
You are more than welcome to overwrite any and all styles in your own CSS file.
Create a card link with a hover image
Once Upon a Time
Create a card link with a custom name
Create an inline card image
Render Decklists on your Website
NOTE: Decklists are still in beta, more documentation + features forthcoming
Create a decklist
Create a decklist with an image preview on the side
Here's the same code with a longer decklist
Create a decklist with inline images + quantities
Custom Configuration and API
  • AutoTagging starts with an HTML element (document.body or otherwise specified) and recursively tags all child elements
  • AutoTagging ignores HTML elements that start with auto-card
  • AutoTagging ignores HTML elements with the attribute auto-card-off
Set configuration for the page by defining MTGIFY_CONFIG before the script tag
These are the settings and their default values
You can use many of the settings as attributes on any of the card tags
Path to Exile
autocard.js defines the global variable MTGIFY which defines a handful of useful functions
developed by @mpaulweeks
Code last updated 2020-01-12 view source
Card data last updated loading...
Using MTG JSON v loading... view changelog