I'm looking for a web library able to represent a Minecraft item like in-game (small image for the icon, and hover text with all the information such as name, lore, enchantments, ...).

To give a little more context, I'm doing a web application for my server's moderators and administrators to allow them to see and modify (at least remove illegal items) from player's inventory / enderchest / any other storage source. I have all the needed data (NBT-serialized items) and I'm trying to display them.

Ideally, a React library would be awesome, but obviously I can work with any JS/HTML/CSS library to build my app with.

My research gave me the following results:

  1. https://www.gamergeeks.net/apps/minecraft/web-developer-tools/css-blocks-and-entities
  2. https://github.com/1e4/minecraft-items-css
  3. https://codepen.io/devbobcorn/pen/wvzxxLv
  4. https://www.npmjs.com/package/@sfirew/mc-motd-parser/v/1.0.3

Both 1. and 2. are only about item icons (inserting the image from the ID), the first one seems to have a few less images (no potion color variants) but has a JSON "database" to lookup CSS classes from Minecraft IDs, and the second one seems to have more images, but no real mapping.

And 3. is a showcase of a hover bubble that looks like in-game ones.

Link 4. seems to deal with JSON text format but is a bit weird.

That's quite a lot of things to bring together to get a kind of workaround. Moreover, some items have a texture that depends on their NBT tags (like the aforementioned potion color) so only relying on item IDs seems insufficient. This confirms my question about a library being able to handle full item NBT data (maybe in a JSON format because it would be easier to manipulate in JS) to generate the display.

While I could develop my own library to do this, I would like to know if something already exists before reinventing the wheel. It would save me a lot of time.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.