Welcome to the MapleStory 2 Interactive Skill Charts

MapleStory 2 Interactive Skill Charts is a set of web components which, with very little effort, let you add an interactive skill chart to your website or blog. This way your viewers can interact with the chart and see exactly what bonuses your chosen skill gives.

If you prefer, you can also just post a link back. As you edit the skills below, the URL will change accordingly. Just copy it and share as much as you like!

Select a class and the skills you want to show and then copy the code below the skill chart into your site or blog.

Archer Assassin Berserker Heavy Gunner Knight Priest Runeblade Soul Binder Striker Thief Wizard

Remaining Skill Points:

Copy this code into your website or blog


<script src="https://unpkg.com/maplestory-skills@^2/dist/maplestory-skills/maplestory-skills.esm.js" type="module"></script>

<script src="https://unpkg.com/maplestory-skills@^2/dist/maplestory-skills/maplestory-skills.js" nomodule></script>

Settings

Add extra info. (E.g. when a Runeblade's Sigil or Thief's cunning is active. Not yet available for Awakening.)

Unlimited points. (Shared links will be broken with negative points!)

Disable editor. (This is how your users will see it. Please note this will not reflect on your site, the editor will always be disabled! Visit the GitHub repository for more information on how to enable the editor.)

FAQ

The skill charts are too big/small!

The chart automatically adjust to the size of it's container, but if you still wish to change the size you can do so with CSS transformations.

ms-archer, ms-assassin, ms-berserker, ms-heavy-gunner, ms-knight,
ms-priest, ms-runeblade, ms-striker, ms-thief, ms-wizard
{
  transform: scale(0.8);              /* adapt margin below if you change this */
  transform-origin: top center;       /* or "top left" if you don't wanna center it */
  margin-bottom: calc(-770px * 0.2);  /* to remove empty space at the bottom, or */
  margin-right: calc(-815px * 0.2);   /* if you use "top left" for transform-origin */
}

Can I also use this as an editor on my site?

Yes, you can. Please visit the GitHub repository for more information.

Found a bug or have other questions?

Don't hesitate to open a new issue in the Issue Tracker, or you can contact me directly on Twitter or on the offical MapleStory 2 Discord (Bodin#9832).