<script src="https://unpkg.com/@esotericsoftware/spine-player@4.2.*/dist/iife/spine-player.js"></script>

<link rel="stylesheet" href="https://unpkg.com/@esotericsoftware/spine-player@4.2.*/dist/spine-player.css">

<style> body { margin: 0px; }</style>

<div id="container"></div>

​

<script>

new spine.SpinePlayer("container", {

   skeleton: "https://esotericsoftware.com/files/examples/latest/mix-and-match/export/mix-and-match-pro.json",

   atlas: "https://esotericsoftware.com/files/examples/latest/mix-and-match/export/mix-and-match-pma.atlas",

   animation: "dance",

   skin: "full-skins/girl",

   premultipliedAlpha: true,

   showControls: false,

   success: function (player) {

      var skeleton = player.skeleton;

      var skeletonData = skeleton.data;

      var mixAndMatchSkin = new spine.Skin("custom-girl");

      mixAndMatchSkin.addSkin(skeletonData.findSkin("skin-base"));

      mixAndMatchSkin.addSkin(skeletonData.findSkin("nose/short"));

      mixAndMatchSkin.addSkin(skeletonData.findSkin("eyelids/girly"));

      mixAndMatchSkin.addSkin(skeletonData.findSkin("eyes/violet"));

      mixAndMatchSkin.addSkin(skeletonData.findSkin("hair/brown"));

      mixAndMatchSkin.addSkin(skeletonData.findSkin("clothes/hoodie-orange"));

      mixAndMatchSkin.addSkin(skeletonData.findSkin("legs/pants-jeans"));

      mixAndMatchSkin.addSkin(skeletonData.findSkin("accessories/bag"));

      mixAndMatchSkin.addSkin(skeletonData.findSkin("accessories/hat-red-yellow"));

      skeleton.setSkin(mixAndMatchSkin);

      skeleton.setSlotsToSetupPose();

   }

});

</script>