Home

mcwidgets

mcwidgets draws Minecraft GUI screens on a web page, using the real game textures at the real pixel sizes. It exists for server guide sites and wikis that would rather show a screen than describe it.

Two widgets are available.

Advancement viewer. The advancement screen, with tabs, connecting lines, task, goal and challenge frames, and hover tooltips. It reads any datapack, vanilla or custom. Unlike the in-game screen it resizes: the window is nine-sliced and the tab strip re-flows to fit whatever box you give it.

Item GUI. A view-only container screen. Use a vanilla texture such as the crafting table, or draw your own layout, then bind items to slots. Slots highlight under the pointer and show a vanilla-style item tooltip.

Both widgets are plain static files. There is no server component, no connection to a running game, and nothing to sign up for.

Bundles come first

Neither widget reads datapack JSON or game assets at runtime. You compile your content into a bundle first: one bundle.json plus the icon and texture files it references. A command line preprocessor does that once, at build time, and downloads every vanilla icon it needs along the way. The widget loads the finished bundle over HTTP.

So a working embed needs two things reachable over HTTP: the widget, and your bundle.

• Building Advancement Bundles
• Building Item GUI Bundles

If you only want the vanilla advancement tree, the embed host already publishes a bundle for it and you can skip the preprocessor entirely.

Pick how you embed

Method	What you write	Good for
Embedding with iframe	One <iframe> tag	Blog posts, wikis, any CMS that allows iframes
JavaScript API	An import and one function call	Pages where the widget shares the DOM with your own interface
Self-hosting	A copy of the static site	Control over versions, uptime, and what your readers connect to

Both embedding methods accept the same settings under different names. Each setting is listed once, per widget:

• Advancement Viewer Reference
• Item GUI Reference

Two topics cut across both widgets and both methods:

• Text and Fonts, for text components, translation files, and swapping the pixel font.
• Troubleshooting, for the errors the widgets print into the page.

The embed host

https://mcwidgets.kaban.sh serves the widget modules, the iframe shells, the textures, and two demo bundles. Everything on it is public static content sent with Access-Control-Allow-Origin: *, so you can load it from your own page.

Path	Contents
/advancements/embed.html	Iframe shell for the advancement viewer
/advancements/viewer.js	Advancement viewer as an ES module
/advancements/assets/	Advancement window, tab, and frame textures
/itemgui/embed.html	Iframe shell for the item GUI
/itemgui/itemgui.js	Item GUI as an ES module
/itemgui/assets/	Slot highlight and tooltip textures
/core/	One shared copy of the font and tooltip sprites, for coreAssetBase
/bundles/vanilla/bundle.json	The vanilla advancement tree
/bundles/itemgui-demo/bundle.json	A crafting table demo, GUI id crafting_table

Run your own copy instead if you need the embeds to keep working on your schedule rather than someone else's. See Self-hosting.

Attribution

Minecraft textures and fonts are © Mojang Studios. Redistributing them, which self-hosting does, is subject to Mojang's usage guidelines.