Web Components for previewing MTG card images automatically

Usage no npm install needed!

<script type="module">
  import mtgCardSeer from '';


MTG Card Seer

A set of easy to use HTML Web Components that use the Scryfall API to display MTG card images automatically on hover.

Basic usage

Each component has a rich and flexible API that are easy to use out of the box. Basic usage would be wrapping whatever text you would want to function as a card image popover in the card-link element like you would with a span. This will automatically search and display the specified card when hovering the link. Note that the text does not have to be the card name exactly, it performs a fuzzy search so partial names or spelling errors will work if no cards have a similar name.


<card-link>Viscera Seer</card-link>

You can read more about specific component APIs below or view more in depth examples here.


  • Made for modern browsers
  • Mobile ready
  • Supports external customization


The library is available as a package on npm. Currently there is no static location for a production file to hotlink to.

npm install mtg-card-seer --save

After that import the library in your code and all components will now be usable in your HTML.

import 'mtg-card-seer';

Dev setup

To get the project up and running with a test page and hot reloading, clone the repo and run the following:

npm install
npm start

To build the project for production code:

npm build

API documentation

API documentation is available in the repo here.

Feature roadmap

  • add search by collector number to card-link
  • add ability to specify card face to display for card-link
  • add optional display for price info to card-link preview
  • add proper mobile support for card-link
  • add inline card preview component
  • add decklist component
  • decklist component visual view
  • add sideboard cuts/adds component
  • add a11y mode for cards
  • multilingual support

Discovered a bug? Log it here with browser details and steps to replicate it.

Have an idea for a feature? Recommend it here.