You need to use a desktop chromium browser like Chrome or Edge. Other browsers may not work, including mobile browsers, even if the card looks fine on the web page.
If you loaded this file from a webserver on a supported browser, go here. It should just work without any additional steps.
It's a tool for creating custom Marvel Champions cards in your web browser!
It's meant to be "good enough" especially for custom card creators, printing errata, and making alternate art.
It will not make perfect copies of cards, nor will it ever. That's not the goal. The goal is good enough. Don't ask for perfect. taps "good enough"
I know about these. Please don't nag me about fixing them. If you see tiny formatting issues (like a pixel off), I will not fix those. Remember -- it's good enough.
So you encountered a problem? First, check if it's in the Known Issues list.
If it isn't, contact me at Landstander on the MC Custom Content discord:
I won't promise that everything will get fixed, but I will definitely take a look. I'll ignore issues like "This is one pixel off". I already know it's not perfect. taps "good enough"
bIt will automatically use the right font for each section. However, you may want to use fonts in other places like adding TRAITS in the rules text.
There are also special characters you may want to use like u or - or p .
When you click on a field to edit it, a set of buttons will open up beneath it. Click on the special character buttons, and that character will be added at your cursor position.
To change the font style of text to italics, bold, or Traits, highlight that text, then click the style button.
You can also add special symbols and fonts via HTML tags. Just paste the code below in the input field.
| Symbol | Example | Code |
|---|---|---|
| Acceleration | a | <code>a</code> |
| Boost icon | b | <code>b</code> |
| Crisis | c | <code>c</code> |
| Consequential damage | d | <code>d</code> |
| Energy | e | <code>e</code> |
| Amplify boost | f | <code>f</code> |
| Per player | g | <code>g</code> |
| Hazard | h | <code>h</code> |
| Artist | i | <code>i</code> |
| Mental | m | <code>m</code> |
| Infinity | n | <code>n</code> |
| Physical | p | <code>p</code> |
| Boost star | s | <code>s</code> |
| Unique | u | <code>u</code> |
| Per player | v | <code>v</code> |
| Wild | w | <code>w</code> |
| Cost arrow | - | <code>-</code> |
| Long dash | — | — |
| Rules line break | line 1 line 2 | <hr class="br"/> |
| Rules horizontal line | <hr/> |
| Font example | Code |
|---|---|
| Traits | <em>Traits</em> |
| Bold action text | <b>Action</b> |
| Rules flavor text | <i>Flavor</i> |
Just use HTML! All the text fields accept HTML, but not all HTML tags will work when you save to image, even if it looks correct in the preview.
For example, paste the code below into the Rules box to add a big, centered acceleration icon like a
<div style="line-height:300px;text-align:center;font-size:300px"><code>a</code></div>
Or add a unique icon to an ally name in the Title field like uNova Prime
<code>u</code>Nova Prime
There are more examples listed here which show you how text formatting works, and you can copy from them.
If you need more help with this, ask in the champions custom card discord. The link is in the yellow box at the top of the card creator tool.
The ideal background photo size is 1500px wide by 2150px high. If your photo is a different size, you can use the zoom and position tools to nudge it into the right place.
If you want the photo to sit on top of the title bar (like many Hero and Alter-ego cards do), you need to upload two photos: one photo that sits in the background of the card content (Photo Behind in the interface) and one photo that sits in front of the card content with lots of transparency so that the background shows through (Photo Front in the interface). Make sure the photos are the same size or you will have a bad time aligning them.
Headshots for the corner (for identity specific cards) need to be exactly 240x240px. You can toggle it appearing with the Show Corner Headshot option. No I will not add a feature to zoom them. There is some glitchy stuff that has to happen to headshots, and it's simpler to force you to make headshots exactly 240x240 than to fix it.
Below are example files many types of Marvel Champions card with lots of different examples of formatting. You can also load these using the Load an example field. There are also more examples you can load directly from the top of the creator tool.
Save the .json to your desktop, hit the Load button in the creator, and pick that .json file when prompted.
| Card type | Card name | Notes |
|---|---|---|
| Ally | Dogpool | Centered acceleration icon in the text box. |
| Alter-ego | Jennifer Walters | "I object" has a special font in the rules text |
| Attachment | Advanced Glider | Has lots of resource icons in the card text |
| Attachment | Red Skull's Luger | Uses the star in the ATK field |
| Support | The Doomsday Chair | With the correct M.O.D.O.K. spelling! |
| Side scheme | Superhuman Law Division | See this for an example of how to shrink the card title when it is too big or long for the title spot. |
| Event | Call for Aid | |
| Side scheme | Pile It On! | |
| Obligation | Worried Father | Centered line of text in the rules box |
| Obligation | Affairs of State | Bullet point list in the text |
| Main scheme B | The Rise of Red Skull | |
| Main scheme A | The Rise of Red Skull | |
| Identity | Nightcrawler | |
| Villain | Red Skull |
Tell your friends! Marvel Champions is a great game, and custom content makes it even more fun.
You can also contribute code changes to fix problems you find. Check the Known Issues to see if there's something you can help with.
