Skip to content

Home

Jump to bottom
KabanFriends edited this page Aug 27, 2026 · 6 revisions

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.

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

MethodWhat you writeGood for
Embedding with iframeOne <iframe> tagBlog posts, wikis, any CMS that allows iframes
JavaScript APIAn import and one function callPages where the widget shares the DOM with your own interface
Self-hostingA copy of the static siteControl 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:

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.

PathContents
/advancements/embed.htmlIframe shell for the advancement viewer
/advancements/viewer.jsAdvancement viewer as an ES module
/advancements/assets/Advancement window, tab, and frame textures
/itemgui/embed.htmlIframe shell for the item GUI
/itemgui/itemgui.jsItem 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.jsonThe vanilla advancement tree
/bundles/itemgui-demo/bundle.jsonA 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.

Home

Embedding

Reference

Building bundles

Running it yourself

Clone this wiki locally

, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Home · KabanFriends/mcwidgets Wiki · GitHub
Skip to content
Home
Jump to bottom

KabanFriends edited this page Aug 27, 2026
·
6 revisions
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.
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
MethodWhat you writeGood for
Embedding with iframeOne <iframe> tagBlog posts, wikis, any CMS that allows iframes
JavaScript APIAn import and one function callPages where the widget shares the DOM with your own interface
Self-hostingA copy of the static siteControl 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:
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.
PathContents
/advancements/embed.htmlIframe shell for the advancement viewer
/advancements/viewer.jsAdvancement viewer as an ES module
/advancements/assets/Advancement window, tab, and frame textures
/itemgui/embed.htmlIframe shell for the item GUI
/itemgui/itemgui.jsItem 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.jsonThe vanilla advancement tree
/bundles/itemgui-demo/bundle.jsonA 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.
Home
Embedding
Reference
Building bundles
Running it yourself
Clone this wiki locally

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Home · KabanFriends/mcwidgets Wiki · GitHub
Skip to content
Home
Jump to bottom

KabanFriends edited this page Aug 27, 2026
·
6 revisions
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.
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
MethodWhat you writeGood for
Embedding with iframeOne <iframe> tagBlog posts, wikis, any CMS that allows iframes
JavaScript APIAn import and one function callPages where the widget shares the DOM with your own interface
Self-hostingA copy of the static siteControl 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:
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.
PathContents
/advancements/embed.htmlIframe shell for the advancement viewer
/advancements/viewer.jsAdvancement viewer as an ES module
/advancements/assets/Advancement window, tab, and frame textures
/itemgui/embed.htmlIframe shell for the item GUI
/itemgui/itemgui.jsItem 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.jsonThe vanilla advancement tree
/bundles/itemgui-demo/bundle.jsonA 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.
Home
Embedding
Reference
Building bundles
Running it yourself
Clone this wiki locally

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Home · KabanFriends/mcwidgets Wiki · GitHub
Skip to content
Home
Jump to bottom

KabanFriends edited this page Aug 27, 2026
·
6 revisions
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.
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
MethodWhat you writeGood for
Embedding with iframeOne <iframe> tagBlog posts, wikis, any CMS that allows iframes
JavaScript APIAn import and one function callPages where the widget shares the DOM with your own interface
Self-hostingA copy of the static siteControl 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:
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.
PathContents
/advancements/embed.htmlIframe shell for the advancement viewer
/advancements/viewer.jsAdvancement viewer as an ES module
/advancements/assets/Advancement window, tab, and frame textures
/itemgui/embed.htmlIframe shell for the item GUI
/itemgui/itemgui.jsItem 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.jsonThe vanilla advancement tree
/bundles/itemgui-demo/bundle.jsonA 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.
Home
Embedding
Reference
Building bundles
Running it yourself
Clone this wiki locally

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
Home · KabanFriends/mcwidgets Wiki · GitHub
Skip to content
Home
Jump to bottom

KabanFriends edited this page Aug 27, 2026
·
6 revisions
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.
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
MethodWhat you writeGood for
Embedding with iframeOne <iframe> tagBlog posts, wikis, any CMS that allows iframes
JavaScript APIAn import and one function callPages where the widget shares the DOM with your own interface
Self-hostingA copy of the static siteControl 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:
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.
PathContents
/advancements/embed.htmlIframe shell for the advancement viewer
/advancements/viewer.jsAdvancement viewer as an ES module
/advancements/assets/Advancement window, tab, and frame textures
/itemgui/embed.htmlIframe shell for the item GUI
/itemgui/itemgui.jsItem 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.jsonThe vanilla advancement tree
/bundles/itemgui-demo/bundle.jsonA 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.
Home
Embedding
Reference
Building bundles
Running it yourself
Clone this wiki locally

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Home · KabanFriends/mcwidgets Wiki · GitHub
Skip to content
Home
Jump to bottom

KabanFriends edited this page Aug 27, 2026
·
6 revisions
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.
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
MethodWhat you writeGood for
Embedding with iframeOne <iframe> tagBlog posts, wikis, any CMS that allows iframes
JavaScript APIAn import and one function callPages where the widget shares the DOM with your own interface
Self-hostingA copy of the static siteControl 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:
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.
PathContents
/advancements/embed.htmlIframe shell for the advancement viewer
/advancements/viewer.jsAdvancement viewer as an ES module
/advancements/assets/Advancement window, tab, and frame textures
/itemgui/embed.htmlIframe shell for the item GUI
/itemgui/itemgui.jsItem 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.jsonThe vanilla advancement tree
/bundles/itemgui-demo/bundle.jsonA 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.
Home
Embedding
Reference
Building bundles
Running it yourself
Clone this wiki locally

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Home · KabanFriends/mcwidgets Wiki · GitHub
Skip to content
Home
Jump to bottom

KabanFriends edited this page Aug 27, 2026
·
6 revisions
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.
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
MethodWhat you writeGood for
Embedding with iframeOne <iframe> tagBlog posts, wikis, any CMS that allows iframes
JavaScript APIAn import and one function callPages where the widget shares the DOM with your own interface
Self-hostingA copy of the static siteControl 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:
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.
PathContents
/advancements/embed.htmlIframe shell for the advancement viewer
/advancements/viewer.jsAdvancement viewer as an ES module
/advancements/assets/Advancement window, tab, and frame textures
/itemgui/embed.htmlIframe shell for the item GUI
/itemgui/itemgui.jsItem 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.jsonThe vanilla advancement tree
/bundles/itemgui-demo/bundle.jsonA 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.
Home
Embedding
Reference
Building bundles
Running it yourself
Clone this wiki locally

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
Home · KabanFriends/mcwidgets Wiki · GitHub
Skip to content
Home
Jump to bottom

KabanFriends edited this page Aug 27, 2026
·
6 revisions
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.
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
MethodWhat you writeGood for
Embedding with iframeOne <iframe> tagBlog posts, wikis, any CMS that allows iframes
JavaScript APIAn import and one function callPages where the widget shares the DOM with your own interface
Self-hostingA copy of the static siteControl 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:
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.
PathContents
/advancements/embed.htmlIframe shell for the advancement viewer
/advancements/viewer.jsAdvancement viewer as an ES module
/advancements/assets/Advancement window, tab, and frame textures
/itemgui/embed.htmlIframe shell for the item GUI
/itemgui/itemgui.jsItem 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.jsonThe vanilla advancement tree
/bundles/itemgui-demo/bundle.jsonA 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.
Home
Embedding
Reference
Building bundles
Running it yourself
Clone this wiki locally