Guild Wars 2 Bag Layout Visualizer

This is a JavaScript application. You’ll need to have JavaScript enabled to use it. However, we don’t have annoying trackers, popups, cryptocurrency miners or hampster dance music. Enabling JS is pretty safe on this page. (Sorry if you would have loved some hampster dance music.)

We all know that the real endgame of Guild Wars 2 is inventory management. You can have big bags, small bags, shared inventory slots, you can reorder them and so on.

If you don’t want your inventory to look like a desperate mess where everything just gets dumped into, you’ll need some kind of logic to it. Like, you’ll maybe have some invisible bags with handy items, and maybe a material bag? And of course you’ll disable the “show bags” option to save some screen space.

But how do you make sure different types of bags don’t start in the middle of the inventory, but maybe at the beginning of a row? Is there an optimal inventory window width where everything just nicely clicks into place? What about if you buy another two shared inventory slots, or upgrade that 28-slot bag to a 32-slot one? How could you reorder things so that it looks nice again?

This is what this tool is about. {{ show_docs ? "Hide" : "Show" }} instructions

  • Set the width of your in-game inventory window (in slots) with the topmost slider.
  • “Show Bags” and “Hide Bags” do the same thing as the option in the game: “Hide” will make all bags flow into each other, while “Show” will let each one start on a new row.
  • If you own shared inventory slots, use the slider to select how many, and whether you’ll want them before or after all of your normal bags. “Embed” will merge them in the same row with whatever bag comes before or after them. This can only be enabled if you chose “Hide Bags” above.
  • You start out with a 20-slot bag. Use the + button to add another bag. You may have up to 10 bags, just like in the game.
  • Use the × button to delete a bag, or the and buttons to move a bag up or down.
  • If your browser supports it, you can change the color of the bag to your liking.
  • Of course you have to set the size of your bag; all bag sizes in the game should be present in the dropdown.
  • If you like, add a note to the bag to remind you of what it’s used for, or maybe just whether you like the way it smells. These notes will also appear when you hover your mouse over the bag in the visualization below.

Below all of the settings, there’s a small text box with a savecode: You can copy this text and send it to a friend. If they paste it into the text box on their end, they’ll have everything set up the way you did. Of course, no matter whether you have a friend or not, you can simply save this text to your notes in order to restore your settings again later on.

And finally there’s the visualization. It shows your bags and their slots like they’ll appear in game. (Without all of the annoying items in them, of course.) Whenever you change a setting, the visualization will update instantly.

I know the current design is hideous. If you’d like to improve it, visit the project’s open source repository. You can also contact me in game (scy.4820), donations welcome ;)

Inventory Window Width:
{{ cols }} slots
Shared Inventory Slots:
{{ shared }} slot

Bags:
Bag {{ num+1 }}: slots
Savecode: (copy & paste this to restore settings)
{{ slot.note }}