css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div ng-app="app" ng-controller="SummonCtrl" class="container">
  <h1 class="font-title">Minecraft Summon Command Generator</h1>
  <div class="form-group">
    <label for="entity" class="control-label col-sm-2">Entity:</label>
    <div class="col-sm-10">
      <select ng-model="summon.entity" ng-options="option.value as option.text group by option.group for option in entityOptions" id="entity" class="form-control"></select>
    </div>
  </div>
  <div class="form-group">
    <label for="relative-entity" class="control-label col-sm-2">Relative to:</label>
    <div class="input-group col-sm-10">
      <div class="input-group-addon">1.8</div>
      <input type="text" ng-model="summon.relativeEntity" placeholder="Entity" id="relative-entity" class="form-control">
    </div>
  </div>
  <div ng-repeat="coord in summon.coordinates" class="form-group">
    <label for="coord-{{coord.id}}" class="control-label col-sm-2">{{coord.id}}</label>
    <div class="input-group col-sm-10">
      <input type="text" ng-model="coord.pos" placeholder="{{coord.id}}" id="coord-{{coord.id}}" class="form-control">
      <div class="input-group-btn">
        <label btn-checkbox ng-model="coord.relative" id="coord-{{coord.id}}-relative" class="btn btn-default">Relative</label>
      </div>
    </div>
  </div>
  <ul class="list-group">
    <li ng-repeat="tag in summon.booleanTags | filter: showTag" class="tag list-group-item" ng-init="tag.value = 1" title="{{tag | formatBooleanTag}}">
      <label class="tag-checkbox"><input type="checkbox" ng-model="tag.use"></label>
      <div class="tag-text">
        <div class="col-md-6"><strong>{{tag.text}}</strong> <small>{{tag.notes}}</small> <div class="badge">{{tag.version}}</div></div>
        <div class="col-md-5"><code>{{tag | formatBooleanTag}}</code></div>
      </div>
      <a class="tag-button btn btn-primary" ng-click="tag.value = (tag.value == 0 ? 1 : 0)" href="">{{tag.value == 0 ? "false" : "true"}}</a>
    </li>
  </ul>
  <hr>
  <output class="font-chat">/{{summon.relativeEntity != "" ? "execute " + summon.relativeEntity + " ~ ~ ~ " : ""}}summon {{summon.entity}} {{summon.coordinates | formatCoords}} { <span ng-repeat="tag in summon.booleanTags | filter: showTag | filter: {use:true}">{{tag | formatBooleanTag: !$last}}</span> }</output>
</div>
            
          
!
            
              @font-face {
  font-family: "Minecraftia";
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/93930/Minecraftia2.ttf");
}
@font-face {
  font-family: "Minecrafter 3";
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/93930/Minecrafter_3.ttf");
}
.font-title {
  font-family: "Minecrafter 3";
}
.font-chat {
  font-family: "Minecraftia";
}

.tag-checkbox {
  width: 24px;
  display: inline-block;
}

.tag-text {
  width: calc(100% - 128px);
  display: inline-block;
}

.tag-button {
  width: 64px;
}
            
          
!
            
              //http://www.minecraftupdates.com/summon-command
angular.module("app", ["ui.bootstrap"])
.controller("SummonCtrl", function($scope) {
  $scope.showTag = function(tag, index) {
    return tag.allowedEntities == undefined || tag.allowedEntities.indexOf($scope.summon.entity) != -1;
  }
  
  $scope.lookupEntityType = function(tagName) {
    for (var entity in $scope.entityOptions) {
      if (entity.tagName == tagName) {
        return entity;
      }
    }
  }
  
  $scope.summon = {
    entity: "Pig",
    coordinates: [
      {
        id: "x",
        relative: true,
        pos: 0
      },{
        id: "y",
        relative: true,
        pos: 0
      },{
        id: "z",
        relative: true,
        pos: 0
      }
    ],
    relativeEntity: "",
    booleanTags: [
      //http://minecraft.gamepedia.com/Chunk_format
      {
        tagName: "Sitting",
        text: "Sitting",
        allowedEntities: [ "Wolf", "Ocelot" ] //tameable mobs
      },{
        tagName: "IsChickenJockey",
        text: "Is a Chicken Jockey",
        allowedEntities: [ "Chicken" ]
      },{
        tagName: "powered",
        text: "Charged",
        allowedEntities: [ "Creeper" ]
      },{
        tagName: "ignited",
        text: "Ignited",
        allowedEntities: [ "Creeper" ]
      },{
        tagName: "PlayerSpawned",
        text: "Spawned by a Player",
        allowedEntities: [ "Endermite" ]
      },{
        tagName: "Bred",
        text: "Bred",
        allowedEntities: [ "EntityHorse" ]
      },{
        tagName: "Chested Horse",
        text: "Is a Chested Horse (Must be Donkey or Mule)",
        allowedEntities: [ "EntityHorse" ]
      },{
        tagName: "EatingHaystack",
        text: "Eating Haystack",
        allowedEntities: [ "EntityHorse" ]
      },{
        tagName: "HasReproduced",
        text: "Has Reproduced",
        allowedEntities: [ "EntityHorse" ]
      },{
        tagName: "Tame",
        text: "Tamed",
        allowedEntities: [ "EntityHorse" ]
      },{
        tagName: "Saddle",
        text: "Saddled",
        allowedEntities: [ "Pig", "EntityHorse" ]
      },{
        tagName: "Elder",
        text: "Elder",
        allowedEntities: [ "Guardian" ]
      },{
        tagName: "Sheared",
        text: "Sheared",
        allowedEntities: [ "Sheep" ]
      },{
        tagName: "SkeletonType",
        text: "Is a Wither Skeleton",
        allowedEntities: [ "Skeleton" ]
      },{
        tagName: "wasOnGround",
        text: "Is Touching Ground",
        allowedEntities: [ "Slime", "LavaSlime" ]
      },{
        tagName: "Angry",
        text: "Angry",
        allowedEntities: [ "Wolf" ]
      },{
        tagName: "Willing",
        text: "Willing to Mate",
        allowedEntities: [ "Villager" ]
      },{
        tagName: "PlayerCreated",
        text: "Created by a Player",
        allowedEntities: [ "VillagerGolem" ]
      },{
        tagName: "IsVillager",
        text: "Is an Infected Villager",
        allowedEntities: [ "Zombie" ]
      },{
        tagName: "IsBaby",
        text: "Is a Baby",
        allowedEntities: [ "Zombie" ]
      },{
        tagName: "CanBreakDoors",
        text: "Can Break Doors",
        allowedEntities: [ "Zombie" ]
      },{
        tagName: "player",
        text: "Can Be Picked Up By Players",
        allowedEntities: [ "Arrow" ]
      },{
        tagName: "inGround",
        text: "In the Ground",
        allowedEntities: [ "Arrow" ]
      },{
        tagName: "CustomDisplayTile",
        text: "Display the Custom Tile In the Minecart",
        allowedEntities: [
          "MinecartRideable", "MinecartChest", "MinecartFurnace", "MinecartSpawner",
          "MinecartTNT", "MinecartHopper", "MinecartCommandBlock"
        ]
      },{
        tagName: "TrackOutput",
        text: "Store the Last Command Output",
        allowedEntities: [ "MinecartCommandBlock" ]
      },{
        tagName: "DropItem",
        text: "Drop an Item When it Breaks",
        allowedEntities: [ "FallingSand" ]
      },{
        tagName: "HurtEntities",
        text: "Hurt Entities it Falls On",
        allowedEntities: [ "FallingSand" ]
      },{
        tagName: "Marker",
        text: "Marker",
        notes: "Invisible, Tiny Hitbox, Disable Interactions",
        version: "1.8.1-pre",
        allowedEntities: [ "ArmorStand" ]
      },{
        tagName: "NoBasePlate",
        text: "Display No Base",
        allowedEntities: [ "ArmorStand" ]
      },{
        tagName: "NoGravity",
        text: "No Gravity",
        allowedEntities: [ "ArmorStand" ]
      },{
        tagName: "ShowArms",
        text: "Display Wooden Arms",
        allowedEntities: [ "ArmorStand" ]
      },{
        tagName: "Small",
        text: "Small Size",
        allowedEntities: [ "ArmorStand" ]
      }
    ],
    equipmentTags: [
      {
        index: 0,
        text: "Item in Hands",
        itemOptions: [
          {
            numberID: 276,
            nameID: "diamond_sword",
            text: "Diamond Sword"
          },{
            numberID: 277,
            nameID: "diamond_shovel",
            text: "Diamond Shovel"
          },{
            numberID: 278,
            nameID: "diamond_pickaxe",
            text: "Diamond Pickaxe"
          },{
            numberID: 279,
            nameID: "diamond_axe",
            text: "Diamond Axe"
          },{
            numberID: 293,
            nameID: "diamond_hoe",
            text: "Diamond Hoe"
          },{
            numberID: 283,
            nameID: "gold_sword",
            text: "Gold Sword"
          },{
            numberID: 284,
            nameID: "gold_shovel",
            text: "Gold Shovel"
          },{
            numberID: 285,
            nameID: "gold_pickaxe",
            text: "Gold Pickaxe"
          },{
            numberID: 286,
            nameID: "gold_axe",
            text: "Gold Axe"
          },{
            numberID: 294,
            nameID: "gold_hoe",
            text: "Gold Hoe"
          },{
            numberID: 267,
            nameID: "iron_sword",
            text: "Iron Sword"
          },{
            numberID: 256,
            nameID: "iron_shovel",
            text: "Iron Shovel"
          },{
            numberID: 257,
            nameID: "iron_pickaxe",
            text: "Iron Pickaxe"
          },{
            numberID: 258,
            nameID: "iron_axe",
            text: "Iron Axe"
          },{
            numberID: 292,
            nameID: "iron_hoe",
            text: "Iron Hoe"
          },{
            numberID: 272,
            nameID: "stone_sword",
            text: "Stone Sword"
          },{
            numberID: 273,
            nameID: "stone_shovel",
            text: "Stone Shovel"
          },{
            numberID: 274,
            nameID: "stone_pickaxe",
            text: "Stone Pickaxe"
          },{
            numberID: 275,
            nameID: "stone_axe",
            text: "Stone Axe"
          },{
            numberID: 291,
            nameID: "stone_hoe",
            text: "Stone Hoe"
          },{
            numberID: 268,
            nameID: "wooden_sword",
            text: "Wooden Sword"
          },{
            numberID: 269,
            nameID: "wooden_shovel",
            text: "Wooden Shovel"
          },{
            numberID: 270,
            nameID: "wooden_pickaxe",
            text: "Wooden Pickaxe"
          },{
            numberID: 271,
            nameID: "wooden_axe",
            text: "Wooden Axe"
          },{
            numberID: 290,
            nameID: "wooden_hoe",
            text: "Wooden Hoe"
          },{
            numberID: 261,
            nameID: "bow",
            text: "Bow"
          },{
            numberID: 259,
            nameID: "flint_and_steel",
            text: "Flint and Steel"
          },{
            numberID: 356,
            nameID: "shears",
            text: "Shears"
          }
        ]
      },{
        index: 1,
        text: "Armor Boots",
        itemOptions: [
          {
            numberID: 313,
            nameID: "diamond_boots",
            text: "Diamond Boots"
          },{
            numberID: 317,
            nameID: "golden_boots",
            text: "Golden Boots"
          },{
            numberID: 305,
            nameID: "chainmail_boots",
            text: "Chainmail Boots"
          },{
            numberID: 309,
            nameID: "iron_boots",
            text: "Iron Boots"
          },{
            numberID: 301,
            nameID: "leather_boots",
            text: "Leather Boots"
          }
        ]
      },{
        index: 2,
        text: "Armor Leggings",
        itemOptions: [
          {
            numberID: 312,
            nameID: "diamond_leggings",
            text: "Diamond Leggings"
          },{
            numberID: 316,
            nameID: "golden_leggings",
            text: "Golden Leggings"
          },{
            numberID: 304,
            nameID: "chainmail_leggings",
            text: "Chainmail Leggings"
          },{
            numberID: 308,
            nameID: "iron_leggings",
            text: "Iron Leggings"
          },{
            numberID: 300,
            nameID: "leather_leggings",
            text: "Leather Pants"
          }
        ]
      },{
        index: 3,
        text: "Armor Chestplate",
        itemOptions: [
          {
            numberID: 311,
            nameID: "diamond_chestplate",
            text: "Diamond Chestplate"
          },{
            numberID: 315,
            nameID: "golden_chestplate",
            text: "Golden Chestplate"
          },{
            numberID: 303,
            nameID: "chainmail_chestplate",
            text: "Chainmail Chestplate"
          },{
            numberID: 307,
            nameID: "iron_chestplate",
            text: "Iron Chestplate"
          },{
            numberID: 299,
            nameID: "leather_chestplate",
            text: "Leather Tunic"
          }
        ]
      },{
        index: 4,
        text: "Armor Helmet",
        itemOptions: [
          {
            numberID: 310,
            nameID: "diamond_helmet",
            text: "Diamond Helmet"
          },{
            numberID: 314,
            nameID: "golden_helmet",
            text: "Golden Helmet"
          },{
            numberID: 302,
            nameID: "chainmail_helmet",
            text: "Chainmail Helmet"
          },{
            numberID: 306,
            nameID: "iron_helmet",
            text: "Iron Helmet"
          },{
            numberID: 298,
            nameID: "leather_helmet",
            text: "Leather Helmet"
          }
        ]
      }
    ]
  };
  
  $scope.entityOptions = [
    { value: "Item", text: "Dropped Item", group: "Drops" },
    { value: "XPOrb", text: "Experience Orb", group: "Drops" },

    { value: "LeashKnot", text: "Lead Knot", group: "Immobile" },
    { value: "Painting", text: "Painting", group: "Immobile" },
    { value: "ItemFrame", text: "Item Frame", group: "Immobile" },
    { value: "ArmorStand", text: "Armor Stand", group: "Immobile" },
    { value: "EnderCrystal", text: "Ender Crystal", group: "Immobile" },

    { value: "Arrow", text: "Shot Arrow", group: "Projectiles" },
    { value: "Snowball", text: "Thrown Snowball", group: "Projectiles" },
    { value: "Fireball", text: "Ghast Fireball", group: "Projectiles" },
    { value: "SmallFireball", text: "Blaze Fireball", group: "Projectiles" },
    { value: "ThrownEnderpearl", text: "Thrown Ender Pearl", group: "Projectiles" },
    { value: "EyeOfEnderSignal", text: "Thrown Eye of Ender", group: "Projectiles" },
    { value: "ThrownPotion", text: "Thrown Splash Potion", group: "Projectiles" },
    { value: "ThrownExpBottle", text: "Thrown Bottle o' Enchanting", group: "Projectiles" },
    { value: "WitherSkull", text: "Wither Skull", group: "Projectiles" },
    { value: "FireworksRocketEntity", text: "Firework Rocket", group: "Projectiles" },

    { value: "PrimedTnt", text: "Primed TNT", group: "Blocks" },
    { value: "FallingSand", text: "Falling Block", group: "Blocks" },

    { value: "MinecartCommandBlock", text: "Minecart with Command Block", group: "Vehicles" },
    { value: "Boat", text: "Boat", group: "Vehicles" },
    { value: "MinecartRideable", text: "Minecart", group: "Vehicles" },
    { value: "MinecartChest", text: "Minecart with Chest", group: "Vehicles" },
    { value: "MinecartFurnace", text: "Minecart with Furnace", group: "Vehicles" },
    { value: "MinecartTNT", text: "Minecart with TNT", group: "Vehicles" },
    { value: "MinecartHopper", text: "Minecart with Hopper", group: "Vehicles" },
    { value: "MinecartSpawner", text: "Minecart with Spawner", group: "Vehicles" },

    { value: "Mob", text: "Mob", group: "Generic" },
    { value: "Monster", text: "Monster", group: "Generic" },

    { value: "Creeper", text: "Creeper", group: "Hostile Mobs" },
    { value: "Skeleton", text: "Skeleton", group: "Hostile Mobs" },
    { value: "Spider", text: "Spider", group: "Hostile Mobs" },
    { value: "Giant", text: "Giant", group: "Hostile Mobs" },
    { value: "Zombie", text: "Zombie", group: "Hostile Mobs" },
    { value: "Slime", text: "Slime", group: "Hostile Mobs" },
    { value: "Ghast", text: "Ghast", group: "Hostile Mobs" },
    { value: "PigZombie", text: "Zombie Pigman", group: "Hostile Mobs" },
    { value: "Enderman", text: "Enderman", group: "Hostile Mobs" },
    { value: "CaveSpider", text: "Cave Spider", group: "Hostile Mobs" },
    { value: "Silverfish", text: "Silverfish", group: "Hostile Mobs" },
    { value: "Blaze", text: "Blaze", group: "Hostile Mobs" },
    { value: "LavaSlime", text: "Magma Cube", group: "Hostile Mobs" },
    { value: "EnderDragon", text: "Ender Dragon", group: "Hostile Mobs" },
    { value: "WitherBoss", text: "Wither", group: "Hostile Mobs" },
    { value: "Witch", text: "Witch", group: "Hostile Mobs" },
    { value: "Endermite", text: "Endermite", group: "Hostile Mobs" },
    { value: "Guardian", text: "Guardian", group: "Hostile Mobs" },

    { value: "Bat", text: "Bat", group: "Passive Mobs" },
    { value: "Pig", text: "Pig", group: "Passive Mobs" },
    { value: "Sheep", text: "Sheep", group: "Passive Mobs" },
    { value: "Cow", text: "Cow", group: "Passive Mobs" },
    { value: "Chicken", text: "Chicken", group: "Passive Mobs" },
    { value: "Squid", text: "Squid", group: "Passive Mobs" },
    { value: "Wolf", text: "Wolf", group: "Passive Mobs" },
    { value: "MushroomCow", text: "Mooshroom", group: "Passive Mobs" },
    { value: "SnowMan", text: "Snow Golem", group: "Passive Mobs" },
    { value: "Ozelot", text: "Ocelot", group: "Passive Mobs" },
    { value: "VillagerGolem", text: "Iron Golem", group: "Passive Mobs" },
    { value: "EntityHorse", text: "Horse", group: "Passive Mobs" },
    { value: "Rabbit", text: "Rabbit", group: "Passive Mobs" },

    { value: "Villager", text: "Villager", group: "NPCs" }
  ];
})
.filter("formatCoords", function () {
  return function (coords) {
    var coordStr = "";
    for (var i = 0; i < coords.length; i++) {
      coordStr += (coords[i].relative ? "~" + (coords[i].pos != 0 ? coords[i].pos : "") : coords[i].pos || 0) + (i != coords.length ? " " : "");
    }
    return coordStr;
  };
})
.filter("formatBooleanTag", function () {
  return function (tag, showDelim) {
    return tag.tagName + ": " + (tag.value == undefined ? 1 : tag.value) + (showDelim ? ", " : "");
  };
});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console