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.
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.
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.
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:
API documentation is available in the repo here.
add search by collector number to
add ability to specify card face to display for
add optional display for price info to
add proper mobile support for
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.